Every designer has their own way of doing things and I would highly encourage you to modify the following steps to fit into your own style.
Note: The images used below are not part of a single project, so they will not make sense together 😜.
Step 1. Research
This is how everything starts, gathering information about the project, either from the client or on my own. The approach to this phase highly depends on how much initial information is available about the scope and requirement of the project. On a high level, this phase has 3 goals:
- How the organization presents or wants to present themselves
- Understanding the problem
- The impact of the solution on the business or presence of the organization
Step 2. One Page Overview
This is the phase where I try to understand all the correlation between requirements and features of the project. This is very personal to me and might be difficult to understand for anyone else picking up the sheet of paper.
This is what helps me understand and take actions points for the project.
Step 3. User Persona
This sets the tone and empathy points for the goal of the project.
I start with a brief story of the character and put a face, name, and age to make it more convincing. The key values are as follows and the other parameters are based on the requirements of the project
- Frustration/pain point — The friction or the problem the character is facing and needs a solution for.
- Goal — This is the ideal reason why the user will be using the app and will continue using it.
Step 4. Sketching Ideas/Wireframing
I personally prefer sketching over digital wireframing as it is much more flexible and you can experiment a lot. This part of the process does include wireframing at times when it is really needed.
The end goal of this process is to figure out what UI components and styles will be needed in the final design.
This makes looking for UI inspiration much easier as I become aware of what components I am looking for.
5. Mood boarding
I try to break down inspiration into 3 categories and subdivide it into design components.
- Design patterns — This is where I keep some of the modern layout styles or something that is really fancy, maybe not relevant, but gives ideas to think out of the box.
- Color styles — This section has nothing to do with the UI but gives a good reference for color combinations.
- UI components — I search for components differently. Here, I will not focus on how elements fit together, but instead, how an element is styled individually. For example, I will have a different selection of navigations and an entirely different selection for hero banner styles.
I usually make Mood boards on Pinterest, the second choice is creating a folder in my desktop (this is helpful if the internet becomes a distraction in the workflow). Other than that InVision is also a good option for creating a Mood board.
6. Start creating Mock-ups
Sketch is my preferred option to design mockups for website or app design, but I do switch to photoshop at times if the client needs a PSD as the final output.
The start is not about a single polished version, there is a lot of playing around with different layouts in this phase before I finalize and stick to a single style.
Once that style is finalized, the next step is to continue creating other screens of the project. Design consistency is really important from the start and it makes the workflow quicker, so as I create components I also make sure that they are forming global styles. This is much easier to manage in Sketch with symbols, every symbol is a component and any style update to a component is reflected throughout the project.
7. Refining the Final Version
At this stage, we have everything in place and this is good to be a final version, but I prefer toning it down. There are two main things that I do in this phase.
- Removing the useless — The main goal of this is to remove unnecessary elements from the design as they can make the user flow confusing. This phase also includes taking in feedback from other people to refine the design. One key lesson in this phase is:
“Don’t shy from throwing away an element or an entire screen”.
- Add small details — This includes work on the details of the design which might not be easily visible but can make a difference. For example, make sure the border radius of a button and the cards are equal or have a specific ratio, or updating the text of a button from “Start” to “Let’s get started” to make it consistent to the tone of the micro-copy.
8. Don’t stop until it’s done
I keep updating the design while the development process is in progress. These updates can be part of a change or a technical feasibility issue or a better experience realized during development. This is really an essential part of the process because making sure that any changes during the development are updated in the design makes the project easy to pick up for the next version.
If you are just getting started, hope this flow helps you create your own design process and if you are a pro, feedback is always welcome.