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!
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:
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:
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!
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:
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:
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:
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:
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:
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:
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:
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!
In this final stage, the Design team will deliver key design documents such as Information Architecture, Prototypes, and UI Styleguide 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:
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.
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!
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.
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.
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.
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:
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.
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. 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, we are ready to help leverage your business in your target market. Let’s craft brilliance together!