📌 The Design Process & How UI/UX Designers collaborate
Throughout the UI UX 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.
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.