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. Long story short, there are six main points to share here, which are:

1. The Understanding Phase
2. Crafting The Strategies
3. Leading the Research Process
4. Leading the UX Design Process
5. Leading the UI Design Process
6. Conclusion

The Understanding Phase

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:

1. Who is the client?
2. What are their business goals?
3. Who are their users?
4. What are the challenges they are currently facing?
5. What are their vision/targets?
6. What kind of product do they want to build? Why do they want to make it?
7. 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:

1. 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.
2. 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.
3. 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.

Crafting The Strategies

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:

The Design Approaches

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.

The Timelines

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.

Example of Timeline with Google Sheet

The ToDos and Assignment

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.

Example of Todo List and Assignment

The Client Alignment

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:

1. Ensures that all parties involved are on the same page,
2. Sets the client’s expectation about the design process/steps we are going to do and its time of delivery,
3. Makes sure that our task priority is correct and aligns with their business plan,
4. 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.

Lead the Research Process

In this section, I will share how I lead the research process in general.

Compose The Research Plan

The research plan is created based on the project’s needs, and it should cover the points below:

1. Background
2. Hypothesis
3. Research Objective
4. Stakeholders
5. Research Methods
6. Participants
7. Planning & Timeline
8. Expected Outcomes

Here is the example of our research plan:

Research Plan

Preparing the Research

We prepare the research depending on the method we have defined in the research plan.

Research Preparation

Recruiting the Research Participant

There are two ways of recruiting research participants:

1. Collaborate with the client to find out the potential participants. Usually, they are chosen from their current users or partners.
2. 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.

Supervising the Research

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.

Conduct Remote Interview and Usability Testing

Reviewing the Results

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.

Example of Affinity Mapping

Usually, the research results would be in three different formats.

1. User persona
2. User journey
3. Insights documentation

Example of User Journey Map

Managing All Deliverables and Present Them to the Clients

All research deliverables, such as:

1. Research plan
2. Interview script / surveys questions / UT scenario
3. Video recording of the research
4. Affinity mapping
5. User persona
6. User journey
7. 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.

Leading the UX Design Process

In this section, I will share how I lead the UX Design process using the insights gained from the research stage.

Benchmarking / Competitive Study

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:

1. The app/web flow
2. The pros and cons analysis
3. Conclusion / recommendation

Information Architecture (IA)

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.

Example of Information Architecture (IA) Diagram

These techniques are useful to ensure that our Information Architecture has good quality.:

1. Tree testing
2. Card sorting
3. Create a lo-fi wireframe and test it with the user

Wireframes and Flows

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.

Example of Wireframe and Flow

Leading the UI Design Process

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.

Understanding the Client’s Preferences

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:

1. Be the communication medium between the client and designer
2. Talk less, show more
3. Reduce the subjectivity of the design
4. 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.

UI Exploration

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.

Example of UI Style Exploration

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.

UI Mockups, UI Flow, and Prototype

All of the UI Mockups we create are based on the design library compiled from UI explorations.

Example of UI Mockup Works

As a lead, I have the responsibility to:

1. Give feedback on improving the design work to meet the quality standard
2. Train and educate designers in both technical and non-technical UI design skills
3. Make sure that the UI progress is on track as per the timeline and planning
4. Present and report the progress to the clients and explain to them if there are any blockers
5. Collect the feedback from the clients and brainstorm for the design solutions

Design System

The design system is a set of design documentation that includes at least three basic things:

1. Styling (Colors, typography, icons, illustrations, etc.)
2. Components (Buttons, cards, input fields, bottom navigation, etc.)
3. Guidelines (The usage explanation, do’s and don’ts, etc.)

Example of Design System

Usually, we use Zeroheight as the primary tool to develop this design system. A design system is very useful for:

1. Giving guidelines and directions to the team in scaling the design
2. Maintaining consistency of the design
3. Handoffs and slicing assets for developers

Conclusion

So, to sum up, these are the important takeaways of how I lead the UI/UX design team in working on a project:

1. Start the project with understanding and planning
2. Lead the end-to-end process; starting from the research, UX design, and UI design
3. Communicate effectively; communication is one of the keys to a successful project, both with designers and with clients
4. 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:

1. Brick, 2021–2023
2. Fundtastic, 2018–2021
3. Indigo, 2021–2022
4. CekAja, 2018–2020, 2022
5. Dropezy, 2021–2022
6. Amar Bank, 2020–2021

As a designer:

1. SWAP, 2019–2020
2. Radiant 1, 2020–2021
3. Emporio Analytics, 2019–2020
4. Troveskin, 2018–2019
5. Ayopop, 2017–2019
6. Mojoreads, 2017–2019
7. IGotAnOffer, 2019–2020
8. Mind Therapy, 2019–2020
9. 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!