UX/UI process under the hood

UX Design Process

When people evaluate websites, they often focus on the visual elements, such as the images, colors, and overall look and feel. After all, visuals are the first thing we see when we visit a website. However, there's much more hidden behind the aesthetic.

At Turum-burum, we believe that design is about more than just making things look pretty. The quality of design is about three fundamental things:

1. User experience. It's about creating a website that is easy to use, informative, and engaging because based on the actual user's experience.
2. Building trust and loyalty. It's about creating a website that users will want to come back to again and again.
3. Solving business tasks. It's about using design to help businesses achieve their goals.

Stage #1: Discovery Phase

So, as usual, our work starts with the discovery phase, which means we conduct interviews with:

• Stakeholders;
• Customers;
• Managers (offline shop assistants, sales, etc.).

At the same time, in case we create design not from scratch, we set up the data stream to get some valuable insights and save time:

• Google Analytics funnels, and user behavior;
• GTM events;
• Clarity heatmaps and session recordings — an additional tool to actually measure and see user behavior and gather not only quantitative but qualitative data.

As a result of this phase, we got:

• Business, customer, and tech requirements;
• List of competitors;
• Data reports (quantitative and qualitative data);
• User behavior mapping;
• JTBD (Job to be Done in User Scenario) and user scenarios to actually realize what the product might be and what the goals might be.

So, we get tons of information to process and analyze: screenshots, data from Google Analytics and heatmaps, funnel paths of different types of users on different devices, and so on. 

There are a lot of heatmaps that help us actually find and see the most clickable design elements and how users actually behave and act by using this or that page. And what are the things that we have to save or work on within the step?

Stage #2: UX mapping phase

So, the next phase is actually UX mapping when we have all the requirements. Foremost, we create a user persona to better understand our target audience and also group users based on their behavior patterns, motivations, and goals. 

Then we create a customer journey map to better understand what the weak points are, how to overcome obstacles and what to do to add value proposition there.

We conduct competitive analysis to determine the unique features and functionality that we have to add to the new product to make the project a bit different from the competitors. 

As a result, we get the data to build the information architecture and information navigation that might be part of the user's flow. We analyze the user journey through the funnel to identify areas for improvement, aiming to streamline the process and simplify the information architecture for a more user-friendly experience.

Stage #3: Wireframing phase

We create low-fidelity prototypes to capture the main flow concept, ensuring alignment with the client's vision. Regular discussions with the client on each page validate that we're moving in the right direction.

After this low-fidelity concept, we proceeded to create high-fidelity and detailed prototypes.

In large projects, we may develop over 200 detailed screens to design all user states and behaviors in order to simplify subsequent development stages and enable user testing on prototypes. So, in its turn, the user testing helps us to gauge usability, ensure intuitive design, and potentially save costs by addressing UX issues early in the process.

This UX design process is adaptable to a variety of projects, including live websites, startups, and mobile apps.

So, as you can see, there's a lot of work that we can handle, because for us at Turum-burum, design is more than aesthetics; it's about creating user-centric websites that are easy to navigate, trustworthy, and aligned with business goals. Through our discovery, UX mapping, and wireframing phases, we gather insights and materials that provide a comprehensive foundation for our UI team.

UI Process

UI isn't just about interactivity and animation — it's a way to stand out, convey the company's mission, translate emotions, and add value to your customers.

Detailed overview of each UI process stage

Stage #1. Materials handover and project briefing

Though UI and UX processes are going simultaneously, yet, after the UX process is complete, the materials are transferred to the UI team, including all research, findings, insights, artifacts, and prototypes with all flows and business specifics explained. All that helps the UI team faster delve deep into all project materials, niche characteristics and trends, and other relevant information to understand the TA's needs, project goals, and client requirements. 

Stage #2. Interviews and insights

No separate research is performed during the UI phase, but once the UX is approved and there is a lack of UI insights, we may conduct another round of stakeholder interviews specifically for the UI part.

We ask questions that will help us understand the visual stylistic direction. We ask about the mood, emotions, brand book, logo, current website (if any), and the tasks we need to solve at this stage. In case there is a website, we ask what they like and don't like in the current design. Also, ask them to describe how they envision the future site using metaphors to capture the mood they want – should it be sharp and professional or, maybe, light and easy-breezy?

These questions help us grasp the vision and objectives for the design. It could be as simple as wanting a fresh, stylish look, or something more specific as standing out from the competition through the design.

In addition, we collect references and ask the client to comment on each one, specifying what they liked and disliked. For references, we usually choose from our previous projects or Behance portfolios, making sure the examples match the client's industry or niche. 

Stage #3. Mood boards

With all that info in hand, we create mood boards to nail down the visual direction. That gives the client some options to select from so they can pick what vibes with them. In Figma, we also throw in some sketches of market trends and proven solutions for reference. That is where we decide which elements to incorporate into the design. Once these details are approved, we proceed with the actual design work, considering all requirements and preferences.

Stage #4. Concept development and pages design

We start with a homepage and some key pages, if it’s an ecommerce project, it can be the homepage, product page, cart, and checkout. We develop their design and style, including all the smallest details such as layout, fonts, color scheme, icons, and so on. That sets the stage for our UI guide.

After that, we present the design for these key pages, breaking down why we made this or that choices and how they serve the project goals. If the client approves, we move on to designing the remaining website pages. If not, we iterate, considering all client feedback and comments. Typically, the UI design is approved in the first iteration, or at most in the third iteration, because at this time it is clear what you like and what you don't. When a page/s is finalized, we design all remaining pages/screens in all states and with all the details considered.

Stage #5. Animations

Depending on the project and the chosen solutions, we may create animated prototypes to visually demonstrate specific interface interactions that are challenging to explain through words. That includes seamless page transitions, eye-catching scroll animations, pop-up elements, menu expansions, and more.

That is to say, some things are better and easier to demonstrate to make sure the client understands how it actually will work. We even have videos of some solutions from our working projects that we provide our clients with for review and further approval.

Example https://www.loom.com/share/60eb66212e81419b8081c59447e1d09d 

https://www.loom.com/share/a019d17079214f46a15cd3d1808e95c5 

Stage #6. UI guide

In this final stage, we create a comprehensive UI guide, covering all essential aspects of the design from colors, fonts, and spacing to interactions with insights on user behavior scenarios, interactive/pop-up elements, button clicks, transitions, and more.

For developers, we also provide details of what happens during various actions, behaviors, transitions, and more. This comprehensive guide ensures a smooth transition from design to development, leaving no room for guesswork regarding the design specifications and user interactions.

Conclusion

Behind every simple and clean design lies thorough and team work that is done discreetly to the client. Our goal is not to create a one-off website with a trendy design, but rather a business tool that effectively meets your objectives and provides an exceptional level of service to your customers. We believe that a well-designed website can be a powerful asset for any business, and we are committed to helping you achieve your business goals and objectives.

‍