Mobile-first: Timar is a smartphone based application that can help people discover salons for a broad range of beauty treatments and easily manage their appointments. 

Mindslab Studio, Product Design, 2018

00 — Research

In order to understand our user's core needs and expectations, we reached out with a feasibility study to 45 salon goers to gain insights on their needs, motivations and frustrations to help shape the app solution. The purpose of this study was to figure out the needs of our users and therefore, be able to create a design system that was intuitive and user-friendly. 

To this end, some user needs were fairly obvious. I found out that most users were unaware of the various kinds of services that salons in their area offered. They relied on traditional menu cards, most of which weren't available online, and if they were they tended to be outdated. This was aggravated by the fact that most of the salons didn't have dedicated websites either. 

While responding to the feasibility study, customers overwhelmingly expressed a need for short waiting times and better staff care. This was specially true for people who had opted fior a walk-in experience and weren't impressed by the long queues and busy, un-interested duty staff.

Some of the questions as well as the key findings which helped me shape the user experience of the timar are given below:

Step 1 — Research Insights

• Most salon-goers (25% of the survey respondents) changed their salon because of poor customer service. Other major reasons for leaving include moving to a new residence (10%) , not being able to book timely appointments (8%) and just wanting to try something different (11%)
  
  
• An overwhelming number of salon-going respondents (70%) were open to the idea of looking up salon services if they were easily available
  
  
• 62% of our respondents also said that they’d be willing to use an application or an online platform to book their salon appointments online. Another 18% were unopposed to this idea as well.
  
  
• While a lot of customers tend to be loyal to their favourite salons, 62% of the respondents had changed their salon service at least once
  
  
• Key factors for choosing a salon included: convenience, quality of service, comfort while dealing with staff and good recommendations

Step 2 — User journey exploration

After figuring out my user's requirements, the next step was to collate all my findings in the form of a user journey. I divided the my research's key points into two major subcategories namely push and pull factors. This helped me distill my user's most fundamental requirements which formed the core of Timar's UX. I achieved this by creating multiple user story points which eventually became the most important features that would make Timar a viable - and most importantly, a user-friendly product. 

This entire exercise helped expose different pain points and identify areas for improvement in the app along the entire user journey. Most importantly, it also helped me evaluate my user's emotional needs and expectations - this information, coupled with the touch-points that I identified, helped me close my knowledge gaps and manage my team and stakeholders' expectations throughout the design process.

With a rough customer journey mapped out, I started to reframe insights from the interviews and brainstorming sessions as outcome statements. Throughout the process, we decided to use the outcome statement framework to discuss any problems and proposals. Framing problems as outcome statements served several purposes:

1. Clarity of Purpose: It defined the problem in a clear and concise manner, focusing on what needs to be achieved. This clarity helps in understanding the problem's scope and purpose.
   
   
2. Goal-Oriented Thinking: Outcome statements emphasize the desired results or goals, encouraging goal-oriented thinking. This can lead to more effective problem-solving, as it keeps the focus on the end objective.
   
   
3. Measurable Criteria: Outcome statements often include measurable criteria, making it easier to evaluate the success or progress in addressing the problem. This allows for objective assessment.

Keeping our discussions framed as outcome statements allowed the team to focus on outcomes, rather than solutions itself, reducing the risk of prematurely selecting a solution and discouraging group-think. This open-minded approach can lead to more creative and effective solutions.

Step 3 — Setting up the app structure

Armed with the insight gained from my user research and journey mapping, I went through a couple of iterations before I was able to map timar's user flow. I also refined some of the  key interactions and revisited the home screen's functionality - As a designer, I understand that time and attention span are extremely valuable commodities in the digital realm - and therefore, should not be taken for granted. Therefore, I also designed Timar to be completely devoid of any unnecessary loops and patterns that might make it confusing for its users.

It is extremely simple and intuitive since concious effort was made to ensure that the least number of screeens and transitions were to be used per transaction. The following flowchart gives an idea of what a single transaction looks like.

01 — Wireframing

Having figuring out the core requirements for the application, my next step was to flesh out the details through wireframes. The purpose of doing this was to refine the user flow through the application and close gaps which could affect its effectiveness. The outcome was an end-to-end experience which was extremely intuitive and straightfoward. 

In addition to wireframing the screens, I also compiled them in the form of a clickable prototype to test with the users and stakeholders. Creating a prototype was a very useful exercise because it helped me stress test various possibilities, anticipate error states and visualise better user flows. 

02 — Style Board

Whether exploring new salon treatments or simply looking for something specific, effortless browsing is absolutely critical for a good user experience. Therefore, it was important for timar to be simple, well thought-out and intuitive to use. This was achieved by adopting elements from familiar design systems well-understood by the users. 

Big cards enable photo content to attract maximum attention while slight elegant animations and microinteractions during the first interaction prompt the additional functionality that is hidden under the card and available on swipe down.

03 — Colours

Three core colours — Coral, navy, and white are used to create an interface that is designed to look modern, yet inviting and familiar.  The vibrant, yet mellow coral is complemented with the darker tones of navy and black, all of which come together to create a feeling of excitement and buoyancy in our continually shifting environment.

These colours also work well with the card based UI creating an interplay of light and shadow which help direct the attention of users wherever and whenever it is needed.

04 — Key Elements

Salon Discovery

The Discover screen is the centre of all the action. Tap away to uncover all the beauty treatments that your area has to offer. If you’re not sure where to go, you’ll be able to get recommendations based on the salons you previously liked and the types of places you enjoy the most right from the homepage.

05 — UI Breakdown

Salon Menu

Timar makes it very easy to check out all the services your favourite salon has to offer. It also highlights the treatments consistently rated well by other users.

Booking

Timar automatically displays all the appointment slots available within the next week. Simply choose the date, select a time slot and your stylist to confirm your booking. Moreover, all prices will be clearly marked.

Instant Information

Every salon listing in the app comes with addresses, staff details and operation hours to help you book an appointment at your own convenience.

Summary

Take a moment to review - or modify - anything in your booking as needed.

Detailed Reviews

Get brief summaries along with detailed user reviews and ratings to help you decide the salon of your choice. Not quite there yet? Slide the similar carousel to find that elusive salon right away!

06 — Content Strategy

Progressive disclosure of information

The “Bite, Snack, Meal” content approach advocates for presenting content in manageable portions to allow for content grazing (the “bite”), short content summaries (the “snack”), and if the mood strikes, rich detailed content (the “meal”). 

The idea is rooted in the concept of progressive disclosure of information: Start with teaser content to drive users to the next level of engagement only when their interests are piqued or they require a deeper level of understanding.

Using this strategy with Timar ensured that we engaged a diverse range of users, both those who prefer quick, easily consumable content and those who seek more comprehensive information.

The key message for users who want only the most important information

The highlights for an introduction but skips any unnecessary details

The details for invested, time-rich users who wish to know and understand nuance

Wearables

Last impressions are lasting impressions. Therefore, users can install Timar on their smartwatches for a seamless integration on the go.

Other work

Over the course of my career, I've had the opportunity to work on a range of projects, across industries that continue shaping our digital landscape. I have collected a few case studies to illustrate my design process, the objectives and outcomes for some of the projects that I've worked on.

I also use this portfolio as a reference point for myself, to keep track of my learning and development as I continue evolving in my design career. Please feel free to reach out if you have any feedback, comments or if you'd like to know more about my work.

Bus Open Data Service

Designing BODS: A groundbreaking platform for nationwide bus data - a one stop hub for timetables, fares, and real-time bus locations across England.

Kia Reviews

Designing for trust: How I designed a reviews system that fosters trust, provides valuable information, and enhances car buying experience for Kia customers.

Roombuilder

Efficient and elegant: How I designed a Unity based software tool that helped interior decorators create and render photorealistic room designs in 3D, with home decor and furniture, exactly to scale.

Thank you for visiting my website 🌍

If you'd like to know more about my work, please send me an email or get in touch on LinkedIn.