In a nutshell
From the idea of a product to its development, what is the role of UX and UI Design? That's what we'll see in this article through an example of mobile application design.
This article is part of another ⚠️
If this is your first visit here, welcome 👋 . Please note that this article is part of a more global one: Getting started in UX/UI Design, a comprehensive guide. Although it is not essential, I still recommend to start there first if you are new to UX/UI Design.
Table of contents
The context
Let’s take a new startup with an idea for a disruptive fitness app that, combined with an AI, would use your smartphone’s camera to analyze your movements and thus give you advice for improvement based on their quality. Let’s point out, and that’s important, that this is the startup’s first product and they have no data on their potential users. Note that in reality, the following example can work with a majority of startups for whom their first product would be a mobile application.
(For info, there is an application called “SwingVision” that does this for tennis and recently, Peloton announced a product that does the same thing as my example).
Without going into all the subtle details of project management, as it would take one (or even several) whole books to do so, let’s look at the broad outlines of the project.
Keep in mind that not all projects in the world follow this scheme, I give you a generic case, but each project will be adapted according to the demand, resources, time, etc.
Note: in the following paragraphs, I will talk about UX Designer and UI Designer to distinguish two people, but as said in the previous articles, it is most of the time a UX/UI Designer.
1 - Vision and startup
Every project starts with an idea, a vision. It’s from this starting point that we enter the process. Without a vision, there would be no paintings by Michelangelo, no first trip to the moon and no Google.
The UX or UX/UI Designer will be at the beginning of the chain, and depending on his skills, can be brought to the conception of the brief (or specifications) with the product owner (or PO, he’s the holder of the product vision in the Agile method), this is often the case when we talk about a product designer (see product designer).
This brief does not necessarily take the form of a 300-page document, which is possible for large projects, but in general, it will be one (or several) shared documents describing, among other things: the vision, the problem to be solved and the envisaged solution (more or less precise at this stage). It’s an important document that must unite the teams around a clear vision.
After the brief is created, there is a project kick-off meeting with all project’s team to ensure that everyone is aligned with the vision. For the designers, it’s important to get feedback from the developers on the technical limitations as soon as possible to avoid making designs that are not feasible.
2 - UX Design
In our example, I’m focusing on the design of the mobile app, but as a reminder, the UX Designer’s interest is the user experience with the startup as a whole (well it depends if we make a difference with the CX Design).
Based on the brief, the UX Designer will analyze the request and if necessary go back and forth with the PO to validate his understanding. The good understanding of the problem that the project seeks to solve is crucial for the UX Designer, the better it is, the better the solution will be.
The primary objective of the UX Designer is to identify the needs of the end-users and to harmonize them with the product and the vision. Regarding the product itself, it’s described in the brief, but it’s of course evolving throughout the UX and UI phase (and globally, during the lifetime of the company).
He will then apply different techniques of the UX domain and as said before, it would be impossible to say which ones are used by everyone, it depends on the project, the time, the budget and the skills of the designer.
However, ideally for our example, the steps would be as follows:
2.1 User interviews
If for our startup, this was not their first product, they would most likely already have data on their users that they could leverage. Since this is not the case, the first step will be to interview (face-to-face or online) a selection of potential customers to better understand their behaviors and expectations.
2.2 Definition of persona
Then, the UX Designer will proceed to the analysis of the data from the previous research phase. He will synthesize two-three (or more if necessary) typical user profiles and create a persona for each. They are useful for the whole team, it allows to have in mind who are the users of our work. For the UX team of course, but also for the marketing team, to establish campaigns adapted to the users.
2.3 Scenario map
Now that we have defined our users and created characters, it’s time to “play” with them and see how they can evolve in the product.
With the project actors, the UX Designer will define the users’ actions according to their goals listed in the personas. These actions are called “User stories”, for example in our case, one could be: “As a user, I want to get a personalized training in order to progress in an optimal way for me”. The scenario map lists the steps in the future product to accomplish all the user actions, and for each step, the teams will list design ideas, questions and comments to consider.
2.4 User flows
Once we have defined all the user actions with their scenarios, it’s time to articulate them with logic between them on a user flow. In this part, the contribution of developers is essential. The user flow is useful for designers and developers alike to have an overall view of the structure and logic of the application.
Note that before this step we can make story maps which are close to scenario maps but go into more detail about user actions, a kind of “pre user flow” in short.
2.5 Wireframes
At this stage, the UX Designer will define the structure of the screens outlined in the user flow. The wireframe will, without UI Design, show the vision of the UX Designer on the distribution of the elements (images, titles, buttons, etc.) he considers the most appropriate for the project.
Note: he could also first do a zoning (or “blockframe”) to get approval before spending time on the wireframe.
The wireframe is done without the texts or the minimum, in general it’s other people (copywriter, marketing, PO, etc.) who write them, but the UX Designer can participate.
2.6 User and internal testing
If time allows, it is advisable to do user tests (depending on the wireframe, if it is too abstract it can be counterproductive).
For this, the UX Designer will have made a prototype that can be used with the wiframes (for example, the buttons will be clickable) and will be able to collect the users’ remarks as they navigate in the product.
And above all, the wireframe must be validated by all the actors of the project, this is important before going to the UI Design phase. If later, during the UI phase or even during development, we discover important flaws in the UX, it will cost the startup more to correct them than now.
3 - UI Design
Once the UX is validated, the UI can begin. Note that the UI Designer, in order to optimize time, can start working before the UX phase is done. On the first step (3.1) and to a lesser extent on the second (3.2) (on parts of the wireframe already validated).
3.1 Research and moodboard
Creativity is nourished by existing work, so the UI Designer will look for designs inspiration that can be combined on a moodboard. It’s recommended to produce at least two boards with different styles and to present them to the project leaders to get their feedback.
3.2 Sketches
Before starting on a software, I strongly recommend to first make sketches of the UI by hand, these are based on the wireframes of the UX Designer and describe their contents in more detail. I’m not the only one who noticed it, but in this phase we are more creative with a pencil (or a digital stylus) than with a mouse.
3.3 Building the styleguide
It’s a visual and textual guide of the elements that make up the UI, such as: colors, fonts, spacing sizes, icons, illustrations, the shape of buttons, forms, animations, etc. It’s shared with the developers, for example with ZeroHeight.
In fact, this part is done throughout the following steps, we go back and forth all the time. It would be counterproductive to try to do the whole styleguide on one side without testing it on screens in the application.
In a broader sense, styleguide is part of a larger picture: the design system. The latter consists in providing and maintaining the global coherence of the substance and form of the designs produced by the company. It’s a central source of knowledge, composed, for example, of company’s vision, indications on marketing choices (tone, vocabulary, etc.), design (styleguide) and code (notation convention, technologies, etc.). It is shared with all the actors of the company’s products. Good examples are the one of Decathlon and IBM.
3.4 Mockup and prototyping
“If a picture is worth 1000 words, a prototype is worth 1000 meetings.” - IDEO
The mockup is the clean up of the sketches, the wireframes with the final design. Prototyping is the act of making these screens interactive, it’s the cornerstone of our process, the climax of the previous UX and UI steps and will be the base for the user testings and developers’ work.
In a nutshell: the UI Designer will enhance the wireframes with colors, typography, icons, buttons, images, etc. And make them interactive. A few years ago, making a clickable prototype was not an easy task, but since the advent of tools like Sketch, Figma or Adobe XD, it’s now much easier, and without doing any code.
3.5 User and internal testing
Before the developers begin their tasks, the UI Designer will test the prototype with potential users to see if there are any blockages or difficulties. It’s also tested with the project leaders (including the developers, of course) so that everyone is aligned. Again, the tools mentioned above facilitate collaboration by offering the possibility to share a link of the prototype to everyone and to comment on it.
If there is a golden rule in user testing, it would be this one: it’s better to fix problems where it’s cheaper. That is to say, on the prototype rather than on the developed product (it’s simpler and, especially, less expensive to move buttons on a prototype than on the developed product).
This is a critical phase and even if not enough time is allocated, then inhouse testing may be enough. But this phase is there to avoid as much as possible last minute changes on the application when we are in the development phase.
3.6 Developer handoff
The above-mentioned software also allows you to do what is called handoff for developers, i.e. to make their work easier. We will export assets such as illustrations and icons at the right sizes, document the styleguide by indicating the rules to be respected (spacing, contrasts, animations, etc.) or comment the prototype with any remarks that would avoid them having doubts about our vision.
4 - Development
The developers do their job. But the designers are never far away, because they surely have some remarks for them and it’s likely that they work with Agile method (we’ll see project management methods later). Therefore, to optimize time, the project manager will have planned the UI Designer’s tasks so that the developers start working when one or more features are prototyped, tested and validated. And while they are developing, the UI Designer carries on with the prototyping of the next feature.
Then, once finished, it’s the release of version 1 in production. But everything doesn’t stop there, products are constantly evolving and very quickly, we go back to the beginning of the process according to the users’ feedback to improve the product. For example, the Adobe XD teams have opened an account on uservoice.com. Users can submit their ideas for new features and vote for the ones they like best (adobexd.uservoice.com).
To keep the momentum going
As mentioned at the beginning of this article, it’s part of a larger set, to continue it’s this way.
Doko Zero
UI Designer with UX and web development skills