UI/UX Design: Definitions and Design Process, Case Study

UI/UX design plays a crucial role in the product development process, as it’s responsible for creating visually appealing products that provide exceptional user journeys. A well-designed UI/UX can have a significant impact on how users perceive and interact with a product or service, influencing their decision to stay or leave the business. While UX and UI design are closely related, they have distinct roles in the design process. Clarifying these roles is essential for creating an efficient workflow and producing high-quality design projects.

So, what are the differences between UX and UI design? How do UI and UX designers work together in an agile design process? Let’s discover through this blog!

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.

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.

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.

Read more: Understanding the role of culture in website and app localization

Final thought

In general, UX and UI designers are required to work closely together throughout the design process to create a product that not only satisfies the user’s needs but also makes a positive impact on the business.

Nonetheless, many businesses in the Vietnam market choose to combine all of this into one department, called “Product Design.”. This is because projects are typically conducted on a smaller scale and do not require as much specialization in UX and UI work. Furthermore, Our approach to User Experience Research is integral to our process, allowing us to gain insights that help us create innovative solutions that make a real impact. We believe that measuring UX Metrics is crucial for understanding user satisfaction, identifying usability issues, and making data-driven decisions that drive product success. Combining these roles can lead to a more cohesive design process, resulting in more efficient workflows, better communication, and, ultimately, a better end product. However, it’s important to recognize the unique value each field brings and to ensure that both aspects are given adequate attention in the design process.

Are you currently having an innovative idea that you are thrilled to make happen and launch, or are you expecting to take your product to a new level? Talk to our UX experts! As a top UI/UX Design Agency in Vietnam, we have a strong local team with global experience. Wherever you are, in the USA, India, Vietnam, or any other part of the world, with expertise in the UX research methodologies and design process, adding a sense of local taste, Lollypop Vietnam are ready to help leverage your business in your target market. Let's craft brilliance together!