ARTICEL • JAN 31, 2023
Directing the UX & UI Design Strategy
In this article, I would like to share my end-to-end design process as the design lead in working on the project for our clients at Flolab Studio.
In this article, I would like to share my end-to-end design process as the design lead in working on the project for our clients at Flolab Studio.
Working in an agency means we need to be ready to handle a lot of projects at the same time. It also means that, as a design lead, I have to understand each client’s needs, one by one, deeply.
Every project is unique and has different characteristics. As a design team, we must adapt to it and deliver a high-quality design that meets the client’s expectations.
In general, these are what I need to understand before kicking off a project:
Who is the client?
What are their business goals?
Who are their users?
What are the challenges they are currently facing?
What are their vision/targets?
What kind of product do they want to build? Why do they want to make it?
Why do they need us? What are their expectations of working with us? etc
To achieve this, here are some of the key activities I usually do:
Learning the documents that the client has shared with us. It could be a PRD (product requirements documents), previous research results, statistics of web/app performances, branding & visual guideline, etc.
Conducting small desk research to build more understanding of the context. For example, if the client is a fintech that sells an investment product, then I will learn about the kinds of investment products, basic investment strategies, etc through articles or even YouTube videos. I also encourage all my team members to do the same thing. Then, we have a discussion session to share everyone’s findings and learn from each other.
Finally, I have another discussion with the client to get more details, including reaffirming the team’s understanding of their PRD, clearing up any doubts during the learning phase, and taking in their expectation. I also pitch some ideas of the design concept to them to give a rough picture of what the design will look like.
Again, every project/client’s needs are unique, as well as the strategies we do to handle them. In the strategy phase, these are the three main points to consider:
Theoretically, the ideal design approach uses design thinking or design sprint methods. However, practically, it is not always textbook. The design approaches depend on the client’s needs and the contract between the client and the company.
Some projects can run ideally, starting with user research to build empathy, understanding goals and pain points, and coming up with the design solution. However, for some projects that are not done in an ideal condition, we can conduct desk research as an alternative to user research. Even some projects do not use research at all: we directly jump to the UX & UI design according to what the clients need.
The key is in the Understanding Phase. Once it is well done, as a design lead, I will be able to propose the best approach our team can apply to the project.
After understanding and defining the design approach to use, creating the timeline is the next step. To do this, I communicate with the client about the timeline to ensure we are on the same page. The tools used for the timeline can vary depending on the client’s preferences, which mostly is Google Sheets. It sounds old-school indeed, however, back to basics can help the client understand it faster and that is what we both need.
The working process of the project must run as planned on the timeline. Therefore, I set up the to-dos and assign them to my team members based on our team’s design culture. Day by day, I monitor the progress, identify the blockers, give feedback to improve the design, and get involved in the work if necessary.
We present and discuss all the work strategies with the client before the start of the project. This is beneficial for the us because it:
Ensures that all parties involved are on the same page,
Sets the client’s expectation about the design process/steps we are going to do and its time of delivery,
Makes sure that our task priority is correct and aligns with their business plan,
Gets us necessary feedback and adjustments
The transparent work strategies and steps are very crucial to be communicated with the client before we start the project. Clear communication has become one of the many factors that satisfy our clients in working with us.
In this section, I will share how I lead the research process in general.
The research plan is created based on the project’s needs, and it should cover the points below:
Background
Hypothesis
Research Objective
Stakeholders
Research Methods
Participants
Planning & Timeline
Expected Outcomes
We prepare the research depending on the method we have defined in the research plan.
There are two ways of recruiting research participants:
Collaborate with the client to find out the potential participants. Usually, they are chosen from their current users or partners.
Recruit the participants by ourselves. We announce that we are looking for research participants for our project in our social media. The requirements of the participants are also posted, and the interested ones will apply to us.
Once everything is ready, it is time to conduct the research. Before performing the research (especially for Usability Testing/UT), I usually do a pilot testing or rehearsal to check if our scenario is already on the right track and to identify any technical errors. In this session, I give examples of how to conduct the research and explain the do’s and don’ts to our juniors.
When the research is performed, I check it regularly and give feedback when necessary to improve its quality.
The most challenging part of the research process begins here. In this step, we will have got a lot of data from our participants. Now, we need to review and conclude them to generate valuable insights. We usually use Affinity Mapping to synthesize the insights. My role here is to lead the affinity mapping with the team and ensure that the results we obtained are relevant with the research objectives we have previously decided.
Usually, the research results would be in three different formats.
User persona
User journey
Insights documentation
All research deliverables, such as:
Research plan
Interview script / surveys questions / UT scenario
Video recording of the research
Affinity mapping
User persona
User journey
Research summary and insights
need to be managed well so that both design teams and clients can access them easily.
One of the ways to summarize all of the deliverables is to create a presentation deck. Then, this presentation deck is presented by the design lead.
In this section, I will share how I lead the UX Design process using the insights gained from the research stage.
Even after gaining useful insights from the previous research, I believe that benchmarking/competitive study is necessary. The result of this further study will strengthen the insights from the previous research and give inspirations to create design explorations. The competitive study covers these points:
The app/web flow
The pros and cons analysis
Conclusion / recommendation
Information architecture is the way the content is organized and presented to the user in a digital product. Good information architecture can make the user experience (UX) of the product seamless and user-friendly, which can increase the user’s satisfaction with the product.
As a design lead, I’m aware of how vital Information Architecture is in creating a product. We need to build it based on the insights we have collected through the research and competitive study so that the product aligns with the user’s preferences. This IA includes the product’s content, navigation, and features.
These techniques are useful to ensure that our Information Architecture has good quality.:
Tree testing
Card sorting
Create a lo-fi wireframe and test it with the user
Based on the IA, the wireframes are created. Wireframes visualize a user path or flow, page layouts, information hierarchy, as well as its interactions. Depending on their purpose, wireframes can vary in fidelity — from quick sketches to detailed representations of the final design.
Our wireframes are usually completed with their user flow, and they are presented to the client side-by-side with the information architecture we have already created. This visualization is important in order to get the clients to fully envision their product’s user experience.
This is it. This is the step where the dreams come true. All the crafted strategies, research data, and UX concepts are tinkered into a visual design that delights its users.
Working on the UI design without understanding what the client wants is like driving in a jungle without any directions ‒ we could be running in circles and not getting to the destination. It’s the same in UI design; without a good understanding of the client’s preferences, it would be challenging to satisfy them and we would be looped on unlimited revisions.
Therefore, we developed the UI mood board to solve this problem. The UI mood board is a collection of style preferences and deep analyses of them. With this board, we try to understand the client’s preferences. It can help us to:
Be the communication medium between the client and designer
Talk less, show more
Reduce the subjectivity of the design
Make agreement and direction for the UI work
As the lead, I present and brainstorm this board with the client. By agreeing on the UI mood board, we create the direction of the design and will not be lost in the jungle anymore.
Once we get a clear direction, it’s time for UI designers to work on UI explorations. UI exploration is the several different prototypes of UI designs that we offer to the clients based on the same information structure. They are usually presented in the landing page designs as starters. Here is an example of one of our UI explorations showing different UI styles with the same information structure.
This design exploration is the result of our designers’ interpretation of the UI mood board. As the lead, I continuously give feedback to the designers to ensure the design’s quality and alignment of the client’s preferences.
After several UI explorations are created, I normally take the best two design prototypes to be presented to the clients and hear their thoughts and feedback. Sometimes the client will choose one of the designs, but, other times, they want the designs combined.
After the final design exploration is approved, we create the design system and continue designing other pages.
All of the UI Mockups we create are based on the design library compiled from UI explorations.
As a lead, I have the responsibility to:
Give feedback on improving the design work to meet the quality standard
Train and educate designers in both technical and non-technical UI design skills
Make sure that the UI progress is on track as per the timeline and planning
Present and report the progress to the clients and explain to them if there are any blockers
Collect the feedback from the clients and brainstorm for the design solutions
The design system is a set of design documentation that includes at least three basic things:
Styling (Colors, typography, icons, illustrations, etc.)
Components (Buttons, cards, input fields, bottom navigation, etc.)
Guidelines (The usage explanation, do’s and don’ts, etc.)
Usually, we use Zeroheight as the primary tool to develop this design system. A design system is very useful for:
Giving guidelines and directions to the team in scaling the design
Maintaining consistency of the design
Handoffs and slicing assets for developers
So, to sum up, these are the important takeaways of how I lead the UI/UX design team in working on a project:
Start the project with understanding and planning
Lead the end-to-end process; starting from the research, UX design, and UI design
Communicate effectively; communication is one of the keys to a successful project, both with designers and with clients
Never miss the connection between the current tasks and previous tasks. Every step should align with each other.
In addition, our team is also open to new approaches or methods to handle projects. I encourage my team to keep learning something new even when we already have a mature design process. As the saying goes, ‘there is always room for improvement’.
To close this article, I would like to mention some successful UX & UI projects I have contributed to.
As a design lead:
Brick, 2021–2023
Fundtastic, 2018–2021
Indigo, 2021–2022
CekAja, 2018–2020, 2022
Dropezy, 2021–2022
Amar Bank, 2020–2021
As a designer:
SWAP, 2019–2020
Radiant 1, 2020–2021
Emporio Analytics, 2019–2020
Troveskin, 2018–2019
Ayopop, 2017–2019
Mojoreads, 2017–2019
IGotAnOffer, 2019–2020
Mind Therapy, 2019–2020
and many more
This article is written to explain how my team designs the projects in general, and how I lead the team in particular. If you are interested in learning more details, please feel free to reach out by hitting this link. I am more than happy to help!
Thank you!
Interested in partnering with me? Reach out at mrizqihanafi@gmail.com
UX
UI
UX Design
UI Design
UX Research
Design Management
User Experience
User Interface
Directing the UX & UI Design Strategy.My end-to-end design process as the design lead in working on the project for our clients.
Mentoring the Design Team to Grow.Mentoring and evaluating my team members’ performances to help them grow to become better designers.
“Not only is he an excellent designer, but he is also a great friend and mentor. His leadership skills are unparalleled and he always goes above and beyond to support his team members.”
“Rizqi & team is a UI/UX design genius! Their work on our project was flawless, delivering a design that not only looked amazing but also functioned beautifully.”
“Working with them was a pleasure. Their UI/UX design expertise is unmatched, and they were able to take our project to the next level.”
“Rizqi transformed our vision into a user-friendly, visually stunning reality. Their expertise and professionalism were evident from start to finish.”
