UI/UX Design: Definitions and Design Process with a Case Study

Introduction

In today’s fast-paced digital landscape, hundreds of thousands of websites/apps are launched every day. As a result, UI/UX design has become a core factor that can determine whether a digital product succeeds or fails.

According to a study by Nielsen Norman Group, 88% of users are unlikely to return after a bad UX experience. This number alone shows that investing in UI/UX isn’t just about making a product “look better” — it’s about building seamless experiences that drive long-term growth and user loyalty.

So, what truly sets UI and UX apart? And how does the design process at Lollypop turn ideas into meaningful, well-crafted digital experiences?

What is UX Design?

UX (User Experience) refers to the overall experience that a user has when interacting with a product or service. It encompasses all aspects of the user’s interaction, including their perceptions, emotions, and attitudes toward the product or service.

UX design is the process of designing and optimizing the interaction between users and a product or service. The goal of UX design is to create a product or service that meets the needs and expectations of the users while also aligning with the business goals.

A well-designed UX benefits both users and businesses:

• For users: With a user-centric philosophy, UX designs make each user interaction simple. When interacting with navigation features to find information or need to complete tasks, a good UX will provide a seamless experience that creates both physical and psychological satisfaction for end users

• For businesses: Owning a great UX-designed product helps businesses create a positive experience for users, increase engagement and reduce churn rate, leading to higher conversion rates. A well-designed UX can also help businesses save costs in the long run by reducing the need for product redesign (UI UX Audit) costs or customer support costs due to poor UX.

What is UI Design

UI (User Interface) involves the visual and interactive elements that make up the interface of a product or service, including buttons, menus, icons, typography, and color schemes.

UI design is the process of designing the visual and interactive elements on the interface of a product or service that users interact with when using a digital product or service. The goal of UI design is to create an interface that is visually appealing, intuitive, and easy to use.

As with UX, a well-designed UI is beneficial for both users and businesses:

• For users: A well-designed UI provides users with a visually appealing interface that can make their experience with the product or service more enjoyable.
• For businesses: Investing in UI Design can benefit businesses in multiple ways, including creating a positive first impression, establishing a strong brand presence, communicating brand values and identity, and finally differentiating their brand from competitors. By prioritizing UI design, businesses can strengthen their brand and build a loyal customer base, which can ultimately support long-term growth and success.

UI Design vs UX Design: What are the differences?

Based on the points discussed above, let’s take a look at the key differences between UX Design and UI Design in the comparison table below:

The Design Process & How UI/UX Designers collaborate

Throughout the design process, UX and UI designers work closely together to gain deep insights into their users and create intuitive designs. Lollypop achieves this by following a 3-stage Agile Design Process in every project we undertake globally.

This Agile approach is inspired by the well-known Design Thinking Process, but customized due to business requirements for cost savings and time-to-market optimization. Our approach is not linear, and revisions are recommended throughout the process. It is suitable for both SMEs and conglomerates and can be tailored to cultural preferences. Let’s explore as below!

Stage 1: Discover

The Discover stage is critical to the success of the design process as it provides designers with the insights they need to create a product that meets the needs of both business goals and its users. This stage involves the first two steps of the Design Thinking process:

A. Empathize

Each business has its own vision for its products. Therefore, during the “Empathize” step, Lollypop put Clients as the focus to ensure that our design direction is aligned with their goals (Brand awareness, Targeting new users, Boosting user numbers, Driving website traffic, etc). To kick off this step, we send our clients a questionnaire form that covers key areas of interest, including:

• Vision and background: What is the company’s vision for the future development of products or services? What message or value does the company want to convey to users through this product or service design?
• Unique Value proposition: What specific benefits does this product or service bring to the user? What pain points will the product or service solve for the user?
• Process & Workflow: In what scenarios will the user use this product? How does the user interact with the product?
• Competition: Who are the company’s biggest competitors? What distinguishes this product or service from those competitors?

B. Define

Once the questionnaire results are gathered from clients, the design team sits together to develop a “Problem Statement”.

In general, a Problem Statement is a brief and clear description of a specific problem that a project aims to solve, outlining the current state, desired future state, and any gaps that exist between them. This helps the team gain a clear understanding of the problem they are trying to solve.

After finalizing Problem Statement, Lollypop’s UX designers conduct a 2-3 week discovery workshop to gain a deeper comprehension of the project. During the workshop, the team carries out various activities to produce necessary deliverables, including:

• SWOT Analysis: A business analysis model through 4 factors: Strengths, Weaknesses, Opportunities, and Threats helps provide an overview of the company and its business model evaluation.
• Empathy Map: A visual tool that helps designers to develop empathy for the users they are designing for and to gain a deeper understanding of their perspective. The Empathy Map is typically divided into 4 quadrants, including “Says” – user opinions, feedback, and comments); “Thinks” – user beliefs, assumptions, and attitudes; “Feels” – user’s emotional state (fears, frustrations, and joys); “Does” – user’s actions (behaviors, habits, and routines).
• User personas: Fictional representations of the end users in many aspects such as user profile, environment, psychographics, pain points, goals, & scenarios. User personas help Designers gain a deeper understanding of users, thereby, making appropriate design decisions that meet their needs and expectations.
• User journey map: A sequential description of a user’s interactive journey with a product/service. This tool is useful for identifying user goals, motivations, pain points, and touchpoints throughout the journey, allowing Designers to discover areas for improvement to optimize the user experience.
• Competitive Analysis: The process of analyzing and evaluating competitor solutions (features, functions, processes, emotions, etc.). This process helps UX Designers to make informed design decisions that optimize the user experience while also creating a unique point of difference and competitive advantage in the market.
• Design Audit: The process of evaluating and dissecting a product/service to identify current strengths and weaknesses based on various methods (Heuristic Evaluation, User Testing, etc.), thereby making improvements and adjustments in terms of formats, features and user experience.

Click to the video below to know more:

Stage 2: Design

The Design stage is the most crucial phase where UX and UI designers work closely together to create the magic that brings the product to life. During this stage, the client’s role shifts from orientating to following & providing feedback. At Lollypop, our Design stage involves the remaining three steps of the Design Thinking Process, which are:

C. Ideate

The ideation stage involves brainstorming, ideation workshops, and other techniques to come up with as many ideas as possible. In order to maximize the chances of finding truly innovative and effective solutions for design problems at the “Discover” stage, all information/data should be collected without being filtered or judged. Some deliverables from the design team include:

• Feature Listing & Prioritization: The process of listing and ranking the platform’s functionalities by importance and necessity to help designers determine which features should be included in the initial release and which should be delayed for later ones.

• User Flow: Diagrams that visually describe sequentially the actions or tasks that users perform on a website/app from the moment they start using them to the completion of a specific goal.
• Task Flow: A diagram that details user actions to complete a specific task in a linear sequence, without sub-branches like User flow.
• Information Architecture: An information system that is logically organized and designed to help users easily find, access, and use information effectively. IA includes Sitemap – A map describing the structure and links between pages; Taxonomy – The process of classifying content and information into groups, categories or tags; Navigation – Menus, navigation buttons, toolbars and other links; Contextual Help: Documentation that guides users when they encounter problems; Search & Content buttons on website/app.
• Design Direction: A design-oriented document that includes Moodboard – a set of graphic elements, colors, typefaces, and symbols based on a specific idea on the same interface (digital, print, etc.) to evoke a certain emotion for viewers; and Visual direction – a set of guidelines that define the overall look and feel of a design. It typically includes information on the use of color, typography, imagery, and other design elements, as well as guidelines for layout, composition, and other design aspects.

D. Prototype 

This step aims to create a preliminary version of the final product or service that can be tested and evaluated. Some design deliverables consist of:

• Wireframes: These are typically simple, black-and-white sketches in the form of a Box Holder, showing the basic layout and functionality of various elements on the page, such as buttons, text, and images. Wireframes help designers quickly test and iterate on different design concepts before moving on to more detailed designs.
• Proof of Concept (POC): A small-scale visual or interactive demonstration of a new UI/UX design that includes key design features and functionality to show the feasibility and potential of the proposed design to clients. This allows them to get a better understanding and provide early feedback. Depending on the nature and project scope, designers can present the ideas via different formats of POC (such as Prototypes, Mockups, Diagrams, and Presentations), in which, Prototype is the most preferred format, as providing a testing product version, allowing clients to interact directly and explore areas for improvement.
• UI Style Guide: A set of rules and standards handed over to stakeholders (UI Designers, Dev Team, Marketing) to ensure consistency across different platforms and devices, including guidelines about colors, fonts, width and spacing, layout, visual effects, icons, etc.

Check out this blog:

• Design System: Explained, Explored, and Evaluated
• The Power of the UX Pyramid in User-Centered Design

E. Testing 

As the high-fidelity prototype version is finalized, it’s time for the design team to test its functionality and usability to gather feedback from users or stakeholders before moving into the Building stage. Some testing methods include:

• A/B testing: a method of comparing two versions of a product or service to determine which one performs better. It involves randomly assigning users to one of two groups and presenting each group with a different version of the product or service. The performance of each version is then measured and compared to determine which one is more effective.
• Usability testing: a method of identifying usability problems by recruiting participants and asking them to complete a series of tasks while providing feedback on their experience. Their interactions with the product are observed, recorded, and analyzed to identify areas of improvement.

Although Lollypop designers are required to carry out various tasks as listed above in the Design stage, some activities may be omitted in real projects to meet client demands for cost-saving and faster time-to-market!

Stage 3: Build

In this final stage, the Design team will deliver key design documents such as Information Architecture, Prototypes, and UI Style guide to developers to initiate the product development phase. Note that the documents might include UI/UX design annotations that contain detailed explanations about design elements (block sizes, element spacing, interactive button actions, etc).

With these documents in hand, developers have all the information they need to accurately implement the development work:

• Front-End Development: Implementing the best combination of technologies (MEAN stack, Flutter, Native OS) for the project.
• Backend Development: Using the best programming language and technologies to design databases, build APIs, integrate services, process logic and compute, ensuring applications function work properly.
• Quality Control (QC): Conducting quality checks and fixing existing glitches and inaccuracies to ensure quality standards are met.

Note that collaboration and communication between designers and developers are crucial at this stage to ensure that all design elements work in reality and fulfill user expectations.

The UI & UX design process in action: A Case Study of Vodafone Idea

1. The UI/UX Design Challenge

In 2019, Lollypop took on the challenge of overhauling the entire digital branding for Vodafone Idea (Vi), the largest telecom service provider in India with over 330 million users. The company was established from the merger of two global brands, Vodafone and Idea. In particular, Lollypop was responsible for designing all digital touchpoints, including an intuitive mobile application, emailers, and a robust website. This enables a seamless transition of users from the existing apps of the two brands.

The uncertain and volatile nature of the telecom market, along with its unique complexities, made understanding and creating a seamless digital transition a tough challenge for Lollypop Design Studio Vietnam. A bad experience at any touch-point can cause customer attrition and thus loss of business!

2. The UI/UX Design Process

Step 1: Discover

In the first phase, Lollypop’s UX Researchers conducted workshops with the telecom clients to understand users’ pain points, expectations, and motivations to arrive at the usability score of the individual apps. We also conducted thorough research on the user reviews on the marketplace. Most of the apps had outdated design language, and the experience also needed to be reviewed.

After that, we identified user personas and created the best journeys for them. We defined intuitive workflows such as recharge, bills, and balance checks for the users and pitched for various first-of-its-kind initiatives directed to boost customer acquisition and engagement.

Step 2: Design

Lollypop‘s UI designers gave the app a fresh look by updating the design system to match the new brand guidelines. We incorporated the boldness of Vodafone and the playfulness of Idea, ensuring that every screen prompts the user to take an action, leading to higher engagement.

Elements such as icons and artwork are in sync throughout, with a balance of red and yellow colors highlighting the integration of both brands.

Step 3: Build

In this phase, Lollypop‘s designers and developers worked to bring the newly designed user interface and user experience to life. Necessary documentation, such as design annotations and handoffs, are transferred to developers to implement the design.

Additionally, rigorous testing was carried out to ensure that the app was free of any bugs or glitches. Lollypop‘s team also tested the app across different devices and platforms and made iterations to ensure the app was functioning as intended.

3. The Result

Lollypop designed a new seamless experience that accommodated the traits of both Vodafone and Idea applications without causing any abrupt shift in their usage patterns. The project achieved incredible results, including:

• Over 300M customers served
• Over 60M downloads
• 1.5M bill payments
• 3.5M recharges
• 75M total visitors
• An average rating of 4.0
• International awards for its UI/UX design and impact

The results achieved through Vodafone’s case study demonstrate Lollypop‘s expertise and capability in delivering a digital experience that caters to millions of users. Apart from this case, readers can also learn more about other Lollypop projects through their website.

Top UI/UX Design Trends to Watch in 2026

1. Voice User Interfaces (VUI)

Voice interactions are quickly becoming a game-changer in how people use digital products. Instead of tapping or typing, users can now simply talk to their devices — asking questions, setting reminders, or controlling smart home systems.

Thanks to improvements in natural language processing (NLP), these interfaces can better understand speech patterns, context, and intent — making voice experiences faster and more intuitive. Tools like Alexa, Siri, and Google Assistant have already shaped user expectations around seamless, conversational experiences.

For designers, the popularities of Voice User Interfaces (VUIs) means a shift from designing screens to designing conversations. It’s about understanding tone, user goals, and emotional context — so that every response feels thoughtful, not scripted.

2. Augmented Reality (AR) and Virtual Reality (VR)

AR and VR are changing the way users interact with products — turning everyday browsing into immersive experiences.

In retail, for example, AR lets customers “try before they buy” by placing virtual furniture in their living room or testing how a pair of glasses looks on their face. On the other hand, VR creates entirely virtual environments, which are perfect for applications such as real estate tours, product demonstrations, or training simulations.

For designers, this opens up a whole new canvas. You’re not just arranging visuals on a flat screen anymore — you’re shaping 3D, interactive experiences that respond to gestures, movement, and gaze. The challenge is to make these interactions feel seamless and emotionally engaging, so that technology enhances the experience instead of getting in the way.

Read more: Lean UX – A Smarter Approach to Product Design for Businesses

Final thought

Creating a great digital product requires UX and UI designers to collaborate closely — ensuring every decision balances user needs with business goals. That said, it’s still important to acknowledge the unique value of each discipline. UX lays the foundation for how a product works, while UI defines how it feels and looks. Giving both areas the right attention ensures a product that’s not only beautiful but also meaningful and effective.

If you’re working on a new product idea or looking to elevate your current experience, our UX experts are here to help. As a leading UI/UX Design Agency in Vietnam and APAC region, we bring together local insight and global expertise — turning ideas into real, user-centered solutions that help your business grow.

Let’s contact to schedule a FREE consultation with our UX experts and craft brilliance together! 

Frequently Asked Questions (FAQs)

1. What is UI/UX Design?

UI and UX are two core concepts in design. UI (User Interface) refers to the visual and interactive elements users engage with directly — such as fonts, buttons, icons, images, color schemes, toolbars, and layouts. UX (User Experience), on the other hand, focuses on how the product works — ensuring that every interaction feels intuitive, seamless, and satisfies user needs effectively.

2. How do UI/UX Designers differ from Product Designers?

UI/UX Designers focus on crafting smooth user experiences (UX) and visually engaging interfaces (UI). They typically collaborate closely with development teams to ensure design solutions are delivered as planned. Product Designers, however, take a broader view — combining design thinking with business strategy to deliver both user and commercial value. They also work with business and management teams to align design outcomes with company goals. In reality, however, these roles often overlap depending on the organization or project scope.

3. How long does the Lollypop design process take?

Lollypop offers two flexible design service packages based on project needs: Agile Design Process: Ideal for large enterprises and SMEs. Duration ranges from 6–12 months, depending on project complexity. Build Fast. Launch Fast: A leaner model tailored for startups looking to optimize resources, with a timeline of 2–3 months.

4. How many principles are there in UI/UX design?

There’s no “one-size-fits-all” number. However, most designs adhere to foundational frameworks like Design Principles, Nielsen Norman’s 10 Usability Heuristics, and Shneiderman’s 8 Golden Rules of Interface Design — all of which help ensure usability, clarity, and seamless user interaction.

5. Why is UI/UX design important for businesses?

Good UI/UX design makes products easy to use, intuitive, and minimizes user errors. A great user experience not only keeps users engaged longer but also boosts retention and conversion rates — directly driving revenue and sustainable growth. Simply put, investing in UI/UX is investing in long-term business performance.

6. Is AI replacing UI/UX designers?

AI can automate repetitive tasks like generating layouts, suggesting color palettes, writing microcopy, or analyzing user data. However, it still lacks empathy, contextual understanding, and creative problem-solving — the human elements that define great design. Rather than fearing replacement, designers should leverage AI as a powerful assistant to enhance quality and efficiency in their workflow.

7. What is the difference between web design and UI/UX design?

Web design is actually a subset of UI/UX design. While web design focuses on visuals and layout for browser-based interfaces, UI/UX design encompasses the entire user journey across multiple platforms — including websites, mobile apps, smartwatches, and even smart TVs.

8. Which tools do Lollypop designers use?

At Lollypop Design Studio, Figma is the primary tool used throughout the design process — from wireframes to high-fidelity prototypes. Additionally, tools from the Adobe ecosystem like Illustrator and After Effects are often used to create graphics and animations, adding emotion and liveliness to the final design.