As end users, we’re always taking part in one UX process or another. All those apps we use each day have a lot going on behind them, with many people involved.
However, every app undergoes its own unique process to development. It’s practically impossible to have a fixed process that follows the same flow and timeline and solves problems the same way. The same goes for the UX process.
Some clients only have a vague idea of what they want, while others have a predefined architecture and design in place that they’d like us to use. Because of this, the UX process is unique each time, and it’s important to set the right foundation at the start.
The first steps of the UX process are crucial. It’s where many of the solutions to the client’s problems are resolved.
The UX process can be broken down into several fundamental steps:
- Project intake
- Discovery
- Research
- Wireframes
- Look and feel
- Delivery
3. Design phase
- Wireframe changes
- High-fidelity mockups
- Prototyping/Animations
- Delivery
4. Usability testing
Each of these steps can be a topic of its own as a lot goes into each one, but in this article, I’ll be providing a general overview.
Liftoff
After a successful onboarding, the sales team introduces the client to our Discovery team. This team is responsible for supporting the rest of the teams throughout the project lifecycle. It’s made up of experienced project managers, project owners, solutions architects, and UX designers.
As the first point of contact, the Discovery team is introduced to the client and initiates the first steps of the project. Later on, they will pass the project on to the delivery team.
Project intake
The project intake phase entails organizing materials, establishing communication with clients, and developing the project structure. The UX designer reviews the materials after receiving the necessary documents from the client, which serves as the starting point for the discovery phase.
A slide from the intro presentation
Discovery phase
The Discovery phase is the most important part of the UX process. It involves researching the problems, framing them to be solved, and gathering enough information to determine the initial course of action. It sets the project in the right direction by focusing on the right problems while iteratively creating the right solutions.
Research
The goal of the research is to get meaningful information from multiple sources. Since everything is dynamic, this phase can be split into multiple different steps.
Goals and values – A deeper understanding of the values the product will bring to the end users and the client.
User needs statements – A user perspective of the problems that we need to solve.
User journey maps – A visual representation of the precise steps end users would take to complete a goal, which helps us to better understand customer needs and wants.
User personas – Fictional, yet realistic descriptions of the regular users of the product, based on a typical person’s needs and wants.
Flowcharts – They depict various processes and structures and are commonly used to structure various pages and steps such as registrations, logins, payments, etc.
There are many more steps that we can utilize, but the key is to use ones that are necessary to get to the core of the problem.
Everything from the previous steps is summarized and analyzed during a two-week intensive process in which our team and client have regular meetings. We go over the basic requirements and then assist the client in determining the next steps.
Wireframes
Wireframes are basically sketches that describe different user flows and every possible interaction with the product.
While it’s not crucial for wireframes to be highly detailed, it could leave a small margin for misinterpretation. Detailed descriptions also help project managers create development tickets more easily.
There are numerous tools available for creating wireframes. Designers can use pen and paper or more advanced software tools such as Figma, Balsamiq, Whimsical, and so on, but the end goal is the same: to create the initial structure of the product. Balsamiq is our personal favorite wireframing tool because it’s very intuitive, has a lot of predefined elements, and most importantly, it creates an intimate connection with the viewers because the screens appear to be hand-drawn.
Tools for creating wireframes
Sometimes the client will come up with more ideas, which can easily affect the project and significantly increase the effort of the team. This is called the scope creep. It’s one of the main reasons why teams need to define the MPV (Minimum Viable Product), which is the predefined scope that has enough features to make the project feasible. All features that aren’t included or proposed in the MVP are going to be planned in future iterations and scopes.
In the wireframes, the UX designer starts with creating the first set of screens, such as onboarding, registration, or login screens. To prevent them becoming messy and unmanageable, we group screens into different flows, sections, and structures.
Starting with one of the most important elements of wireframes, the navigation, we try to follow best practices in the process. That makes the product much more intuitive since the users can notice patterns they are already used to, and they immediately feel more connected to the product. Following a predefined structure, we go deeper by creating screen by screen, while connecting and describing the interactions between them. As the screens unfold, things get a lot more complicated, and we need more components to support the flows.
As the second week of the discovery phase unfolds, a substantial portion of the product has been visualized and discovered. The client now understands the process and is confident that the product is on track. Experts then write up the architecture blueprint to help the client set their expectations.
Look and feel – the product UI
It’s time to move on to the visuals and user interface. A lot goes into product UI, and it’s important to set the right base. The designer creates a couple of screens based on the wireframes for a general feeling of what the product might look like.
Sometimes we must use predefined design systems, or we must only use the visual preferences of the brand, such as colors, typography, components. Other times we have to create a whole new design system from scratch. Depending on the product needs, we also have the option to use third-party design systems, such as Google’s Material design, Apple Human Interface, and Microsoft Fluent.
If we’re creating the product from scratch and don’t have a design system, we lay out the elements and create the structure of components based on the wireframes. Defining the grid system is key here, as it helps us set up a hierarchy and puts the elements in visual balance. The product’s brand colors would be used to accent the product. Based on them, we’d create a color palette as a basis on which we could add colors as needed.
By creating screens and elements from scratch, we’re also creating a design system from which we can reuse the elements. A design system is important for consistency throughout the product. In some tools, we can create a design system library with all the elements defined as reusable components that could be linked through many screens or even other projects. By doing so, we can update hundreds of instances of the same component from a single place.
An important decision the team needs to make at the beginning of the UI phase is what tools they’ll use for creating the mockups. If the client doesn’t have the requirements for a specific tool, the designer has a lot of options, and each one has its pros and cons. Before deciding, it’s important to understand the needs of the team and product by answering specific questions, such as:
- Will multiple designers work on the project or just one?
- How are we going to present mockups to the client?
- Do we need interactive prototypes?
- How are we going to deliver the mockups to developers?
By answering these questions, you can filter through the tools for the one that suits the needs of the team and product. The most popular ones for UI currently are Figma, Adobe XD, Sketch, and InVision.
Tools for UI
The important thing to note is that these tools are just that, tools. They aren’t going to do the work for you.
Delivery
Before presenting the final proposal to the client, the designer and the project manager work closely to make a clear list of requirements based on the wireframes. With these requirements defined and organized in a spreadsheet, the team meets and estimates the hours needed to complete a particular feature.
After reviewing the estimate and price, the client is ready to make a final decision. The Discovery phase could end here if the client doesn’t want to proceed with the project, but that’s usually not the case. After investing this much time and effort into creating the product proposal, it’s in the best interest of the client and the team to proceed.
Design phase
After the final review and the client’s decision, we start the development of the product using agile methodology. Agile is a way of managing projects by breaking them down into several phases. It involves constant collaboration between the stakeholders and the team and cycles between planning, executing, and evaluating.
Wireframe changes
If there are any changes in the meantime, the designer tweaks the wireframes. Changes with bigger impact are communicated with clients and are then pushed to the next iterations outside of the MVP so they won’t affect the predefined estimations.
High-fidelity mockups
While the team sets everything up for development, the designer has a head start so the developers would have the UI ready when they start working. Depending on the tools used, the designer provides the possibility to preview and inspect the design on the individual component level.
This process continues and everything is designed and built in cycles. The client and the team review the progress during regular grooming sessions, and we iterate and improve. There are cases when the design needs to be refactored if there are development obstacles. If the budget and timeline allow, it would be recreated or refactored in order to solve the problem.
Prototyping Animations
After we complete certain flows and have the screens ready, it is a good idea to create interactive design prototypes. These prototypes ultimately represent the final product where we can interact with certain elements and present specific functionalities before development.
For the same reason, we also create animations to represent visual feedback of interactive elements or certain presentational features. Animations are rarely done in projects because they require a lot of time and effort to create, but depending on the project and the client, they can be required or defined before development.
An example of UI proposal
Delivery
Delivery in the design phase means both delivery towards the client and the delivery for the developers. The client should be able to preview design mockups continuously through a specific environment, or through individual tickets, but having a bigger picture is always better. Examples could be open space variants where we have all screens organized on one plain environment, or we could use visual files, documents, prototypes, etc.
There are many tools that allow inspection of the design and individual elements. Inspecting means that a developer can click on individual elements and get all kinds of different information about it.
Having these environments helps both designers and developers work independently without the help of designers for exports and styles.
Usability testing
Whether we think our design is awesome or awful, it’s only a matter of opinion. The real value comes from the field where we can check if the product we created is actually useful and whether it solves the problems it should.
Usability testing is having a specific number of people use the product you created to complete a predefined set of tasks. After successfully conducting the usability test, the designer would define all the weak points, obstacles, or any other notes meaningful to the product’s improvement. The team can then plan on handling and solving the problems encountered.
Developing a product is a complex process, but with a great team, thorough research, and careful planning, it is possible to create hugely intuitive and user-friendly systems. With the right approach, we can create solutions that really help people.
If you have any comments, questions, or opinions, feel free to send an email to emirdu@maestralsolutions.com or contact us through the contact page. We’re always up for feedback!
Cheers 🙂