Local Hair Salon - Small business

UX Designer
Client
Academic project for a small business
role
UX Designer
timeline
October 2021 (6 weeks)
Tools
Miro, Figma, Adobe Illustrator, Powerpoint, Excel

Project Overview

Event planning meets COVID risk calculator.

Event planning meets COVID risk calculator.The project's purpose was to create an app that allows users to acquire an easy-to-read grade of the COVID risk of a given event, displayed as a forecast, using just a few key inputs. The outcome is far from certain, similar to a weather forecast, but it summarizes complicated instrumentation that day-to-day clients do not have access to and will not understand.

It was a group project for which I was accountable from beginning to end, although I concentrated on UX design. Defining the target audience, building user journeys, storyboarding, wireframing, and designing the final user interface were all part of the process.

Project Overview

Chatbot to support program adviser and perspective students of University Of Washington

The goal of the project is to design a chatbot for the University Of Washington (CommLead Program) that will assist prospective students with their queries regarding academic programs. The chatbot is integrated into the college's website and will be available 24/7 to assist students in their queries. In the project I worked with 3 designers, 2 researchers, 1 product manager.

The chatbot aims to reduce the mental stress and workload of the program adviser by providing instant responses to frequently asked questions and directing students to the appropriate resources.

Project Overview

Conduct a comprehensive usability study on Zara to spot which heuristics identified, are pain points for the target audiences, and recommend improvements.

Data is informed from the user survey and the usability test results on the subjects that matched our user persona.

Task In hand
  • Target Persona
  • User Survey
  • Usability Script
  • User Interview
  • Solutions
  • Prototype

Project Overview

Worked with Restart partners and created social media content for Covid'19 India Mask Adoption campaign "Maskpur" sponsored by Facebook. We took an iterative, audience-informed approach to the messaging, deploying a broad range of lower-budget creative, observing its performance, and refining based on what we learned. We tried creating a distinct look and feel for the campaign to make our posts stand out amidst the digital noise. The wide range of messaging in design materials includes infographics, original illustrations, humorous memes, mutual support, and direct messages.

Goal

Promote Mask Awareness amongst the Indian audience and educate them when to wear a mask, how to wear it correctly, social distancing, staying away from crowded spaces and other good practices to stay safe during Covid-19.

Result

We ran 192 ads across the Facebook and Instagram platforms of our non profit partners in India, Sheroes, Breakthrough and Arthan. The lift study done on the campaign shows that our ads influenced 1.19 million people in India to wear masks while leaving their homes at the cost of $0.04 each.

Project Overview

A client project for a local hair salon small business in Bellevue, Seattle. The salon has provided enjoyable experiences to customers with hair styling services for 22 years. Customers prefer online platforms for goods and services in today's digital world because of their busy schedules and convenience; hence the salon aims to streamline the flow of its website and make it user-friendly by improving the online booking process.

For this project I performed :
  • User research
  • Define user needs
  • Ideate solutions using paper prototypes
  • Designed hi-fidelity screens
  • User testing

Project Overview

I conducted a product quality assessment for App Store as one of the academic projects for the Product Content Strategy class at the University Of Washington. The project encompasses my insights on the ease of use, inclusivity of the experience, any issues that specific groups might have while navigating the application, privacy concerns, etc.

Task in hand

  • Perform two separate user journeys
  • Conduct heuristic evaluation and accessibility assessment
  • Suggest solutions for better user engagement

Project Overview

As a Interaction/Visual Designer at Google, I have been working with the Central Accessibility UX team to design and deliver high-quality assistive technology features for differently abled individuals. I collaborate closely with a team of designers, researchers, and engineers to improve the journeys and onboarding experiences of users of assistive features through usable interactions.

I've been involved in projects like Reading Mode for Chrome, Lookout, Action Block, and Voice Selection for Google's Text-to-Speech team. I've also helped create design guidelines for Google Text-to-Speech, which benefit products like Assistant, Read Anything in Chrome, Android Reading Mode, and Lookout.

In my capacity as a visual designer, I've furthered the cause by establishing a distinct visual identity for our team, the Abilities Innovation & Research team, which includes crafting the team's logo and other visual assets. My contributions extend to providing graphics and illustrations for various projects across the Google ecosystem.

Project Overview

Magnifier is a mobile application empowering users to magnify small text, perform intricate tasks, and zoom in to view distant signs with precision and clarity. Seamlessly integrated into Pixel devices, this app harnesses the power of your phone's camera and intuitive interface to provide an effortless and powerful magnification tool.

The objective of this project is to design a product icon that distinctly communicates real-world object magnification feature of the app while maintaining visual consistency with other Pixel product icons.

Process of logo symbol development can’t be shown (NDA)

Project Overview

Objective - Develop an logo and illustration for ADI (accessibility and disability inclusion) Month at Google that embodies the celebratory spirit while showcasing diverse accessibility elements. The logo should reflect inclusivity, positivity, and align with Google's brand identity.

Usage - The logo served as a unifying emblem across various internal platforms, doubling as swag to instill pride among employees, boost awareness, and support accessibility initiatives during Accessibility Month at Google.

The project was done in collaboration with the creative lead of the team <3

Article published by Google showcasing the logo

Project Overview

To establish consistent, accessible reading and speech experiences across Google's product range, harmonizing them with Google's brand identity. The aim was to develop a comprehensive design system, comprising patterns and guidelines, supporting teams working on reading and speech-first products at Google.

Note - Unfortunately, due to NDA, I'm unable to disclose specific project details or share the designs. However, I am happy to talk about my design process and decisions or answer any questions or concerns you might have.

Project Overview

Jake Prendez is a Seattle-based Chicano artist and the proprietor of Nepantla Art Gallery. His website serves as a platform for selling art merchandise and showcasing his culturally rich artwork. Additionally, the website acts as a gateway for potential inquiries regarding guest lectures and collaborations.

Project Objectives:The primary objective of this project is to revamp and optimize Jake Prendez's website hosted on the Wix platform. The project targets two core areas

1. Enhancing Shopping Cart Experience - Streamlining the user experience within the shopping journey to encourage visitors to explore and seamlessly purchase art merchandise

2. Improving Discoverability and Brand Identity - Elevating the website's visibility, accessibility, and brand identity without the need for engineering support, utilizing the Wix platform's capabilities.

Link to the website - https://www.jakeprendez.com/

Pachanka - a COVID risk assessment calculator for events

Pachanka [noun]

Pronounced PatCH-an-ka, means street party, or unmediated reunion of people to have fun on the street.

The product's purpose is to forecast future COVID risk analysis so that customers may schedule their events accordingly. Pachanka assesses risk and makes recommendations based on data elements, allowing users to select the best alternative. Information and peace of mind are essential client benefits that Pachanka provides.

Design Thinking Process

The design thinking process I followed for the project

Target Audience

Our clients are people planning to host or attend an event soon and are concerned about the event's safety and risks.

To understand the customer needs, we also conducted light-weight interviews with social event organizers and participants around us on this topic. During the interview the participants expressed that to feel safe and secure during COVID times while attending or hosting a safe event, people may consider:

  • Other participants' vaccination status, as well as any symptoms they may be experiencing
  • The number of people that will attend an event
  • Social distance
  • Information about the venue/location (infection data and trends in the city and area, vaccination status of people in the area)

JDBD & Persona’s

The MLP of Pachanka will focus on personal uses for application—planning personal events and making personal risk assessments for attendance.

Story Board

We've structured our thoughts around two types of users: organizers and attendees. Though some screens and emotional moments are shared, the customer journeys, user stories, and core flows are all unique

Organizer Storyboard

Attendee Storyboard

User Journey

We created two journey maps to understand the stages, steps and pain points for event organizers and event attendees.

Paper Sketches

Lo- Fidelity Paper Prototypes

After understanding the users needs and defining the key features, I sketched the paper prototypes

Wireframes

Created wireframes to develop the understanding about features and the structure of the experience. We also used these wireframes in our UX research

Organizer Wireframe

Attendee Wireframe

User Feedback and Iterations

We conducted user interviews with six participants whom we asked to perform two tasks: (1) setting up an event through the organizer flow and (2) responding to an event invitation. We asked them to think aloud as they moved through the flows.

Some key themes arose across our research:

Prioritization

Finished this round of User feedback/ testing with a long to list and only three days left in the project. We used a prioritization exercise in Miro to determine our next move.

We ultimately got to all our mission-critical items and our nice-to-have items, but organizing our work in this way kept us focused on a tight timeline.

Design System

Following the development of the high-fidelity prototype, I further developed Pachanka’s visual identity. The Design System showcased below features the collection of reusable components used in designing the interface.

Hi-Fidelity Screens

After receiving the user feedback and concerns on the wireframes and Ideating the solutions, I finalized the look and flow of the app by designing its high-fidelity mockups.

Organizers flow

Attendees Flow

Key Learnings

  • Designing an event risk analysis app requires a lot of critical data-based information to be presented to the user in a quick and easy-to-scan format using data visualization.
  • The project helped me learn how to define the scope before solving a problem, and defining the JTBD helped me remove the biases and make user-centric solutions.
  • User feedback and interviews gave me insights on eliminating unnecessary steps and simplifying the app's user flow. It also helped me understand how to leverage human visual perception while designing interfaces using data visualization techniques.

Future steps

  • How might this app work in a business context? In the future, I want to design an enterprise version of Pachanka.
  • Design a web version of the app. I have worked on one of the core features, i.e., the risk screen interface, you can see here.

Why AppStore ?

AppStore is a platform owned by Apple.Inc for mobile apps on its iOS and iPadOS operating system. The store allows users to browse and download various valuable apps. As of the first quarter of 2021, the Apple AppStore has roughly 2.22 million available apps for iOS users, and it caters to about a billion users around the globe.

Apple is known for its beautiful and intuitive design sensibilities. I love the brand because of its unique identity in the tech world, and that's also one of the reasons I choose AppStore for the case study.

User Journey 1: Search and install an app from App Store

For my first user journey, I chose to install an app for organizing my bills.

User Journey Map
User Journey Map (Screenshots)

Heuristic Evaluation

A) Poor Grouping: A critical relationship is not obvious or is incorrect.

While browsing in the AppStore, I found three apps named Bill/Bills Organizer at different intervals. That could confuse the user and increase the cognitive load. (Fig.1)

Proposed Solution:

Apple is known for its creative interfaces and customizing options, so they can provide a filter option under the search bar at the top that could allow users to browse based on ratings, reviews and keywords.

B) Distraction: Something appears in the UI unexpectedly or draws the user's attention in an unhelpful way, pulling them off their task

The first thing that came up is an advertisement that can be misleading for the user.(Fig.2)

Proposed Solution:

To promote best practices showing unrelated advertisements at first can be avoided for a better user journey experience.

C) Uncomprehended Element: A critical element is difficult/impossible to understand.

The sort feature in the review section is helpful, but it's hard to differentiate between the options- "most helpful" and "most favorable."Both the areas have similar results, and this could be confusing for the user.(Fig.3)

Proposed Solution:

"Most helpful and Most favorable" are catering to a similar problem hence can be combined. An addition of upvotes on reviews like on Amazon and Expedia could make them more authentic and support the user's mental model.

D) Gratuitous Redundancy: The system presents duplicate cues for the same action on the same level.

The Latest release section and the Apps section shows the same information about the app.(To confirm if this issue is there across all the AppStore applications and not this particular app, I cross-checked with WhatsApp).(Fig.4)

Proposed Solution:

I would propose to add a small icon for the "Latest Release" and to remove the latest release section to avoid duplication.

Fig1. Poor Grouping
Fig2. Distraction
Fig3. Uncomprehended Element.
Fig4. Gratuitous Redundancy

User Journey 2 : Subscribe for Apple Arcade and download a game (multiplayer)

For my second user journey i decided to explore apple arcade in the App Store.

Apple launched Apple Arcade in September 2019. It's a game subscription service that allows exploring the curated collection of multiple games across all Apple devices. (much similar to Netflix for movies)

It is always a treat to look at and explore the new sections they create because of their attractive and creative interfaces.

User Flow Map
User Journey Map (Screenshots)

Heuristic Evaluation

A) Captive wait:  User is prevented from achieving a goal promptly because the system deliberately prevents them from advancing or backing out of a process to show how to achieve a goal.

The search navigation bar is missing inside the game category that can restrict the user from searching for games promptly, and the user will have to go through the entire list. (Fig.5)

Proposed Solution:

There should be a separate search button at the top or a sticky navigation bar at the bottom with a search button.(like in other pages of the app store)

B) Invisible element: No visible cue (label, icon, affordance, prompt) was provided to show how to achieve a goal.

The size of the game is 1.7 GB, and in few developing countries, the download might take more time due to the wifi speed. The user should get an indication of how much time the download would take. (Fig.6)

Proposed Solution:

An estimated download time for an app can be placed under the loading icon, if the app size is more than 1 GB.  

C) Inconsistent Appearance: Visual appearance for a cue for a given action varies across the UI

The interface of arcade game section looks inconsistent and random. For instance, the "top arcade games"does not have a "see all" option like other sections. There is also random placement of categories, videos, and images throughout the interface. (Fig.7, Fig.7.1)

Proposed Solution:

The category section can be at the top instead of being randomly placed at the center Videos and photos can be grouped and placed uniformly. The top arcade games section can also have a "see all" option like other categories.

D) Gratuitous Redundancy: The system presents duplicate cues for the same action on the same level

The heading "Arcade games for you" and the text "apple arcade" at the top of each game heading are repetitive information for the user. It's also looks crowded visually. There are two ways to see the games in the specific game section; one option is to slide right, and the other is the "see all" link. Both these options show the same information that is causing redundancy. (Fig.8)

Proposed Solution:

I would propose just having Apple Arcade as a header and removing the "apple arcade" text, placed above all the games, to avoid repetitive information. The right slider could show a few recommended/most liked games, and the "see all" link can show the range of games available.

E) Poor Grouping: A critical relationship is not obvious or is incorrect

The information on the arcade homepage is hard to differentiate or seems to overlap. For instance, angry bird reloaded is there under "unforgettable character" as well as "collections" section. (there are multiple games like that) (fig.9)

Proposed Solution:

I would propose to trim down the numerous categories into a small number of groups like the "unforgettable character" section can all the famous characters instead of dividing them further.

Fig.5 Captive wait
Fig.6 Invisible Element
Fig.7 Inconsistent Appearance
Fig.7.1 Inconsistent Appearance
Fig.8 Gratuitous Redundancy
Fig.10 Poor Grouping

Accessibility Assessment

A) Contrast and legibility: Text and other meaningful information can be easily distinguished and read by users of the system.

There is a legibility issue at various places in the App Store. For instance, the number of reviews on apps are nearly invisible because of the tonal grey color and small font size.

Proposed Solution

Increase the text size to 16px at-least and reduce text opacity for better visibility.

B) Images with text: Use descriptive ALT tags for hyperlinks, icons, images, videos, and other media types

Screen readers can't read text inside the image, creating problems for a visually impaired user.

Proposed Solution

Alt text attribute can be used for images so that users with visual impairment can understand it easily.

Fig.10 Contrast and legibility
Fig.11 Images with text

Just Curious !

A) Why does Appstore purchase history does not show the arcade download history?

Ideally, all the purchases should be included in the App Store purchase, even from the Arcade section, as that is part of the App Store itself. (Fig.12)

B) There is no option to delete an app from an AppStore directly unlike the Google Play Store in Android.

Will it be a good idea to have an option to delete an app from the App store like the update or open the button? (Fig.13)

A) Arcade download missing from AppStore purchase history
B) "Delete" option like "Update" (for deleting aap directly from app store)

Reflection

Conducting the Product Quality Assessment on App Store introduced me to the heuristics and the accessibility assessment tools that can help identify and solve problems efficiently. In this project, I worked on two user flows and identified the issues that might increase the users' cognitive load while using App Store.

For the design recommendations, I tried to create inclusive solutions that can serve all the users. However, further testing will be needed to verify the findings and ensure if the solutions are helpful.


Problem Statement

___________________________

University of Washington’s CommLead program advisers are burdened with the task of addressing queries from prospective students, resulting in a high workload and delayed response times.

Design Thinking Process

__________________________________

My Client’s Pain Points

________________________________

Conducted interviews with clients to refine project requirements and tailor the chatbot design to meet the specific needs of program advisers and prospective students.

Goal of the Project

___________________________

Target Audiences

_________________________

Market Research - Comparative Analysis

________________________________________________________

Final Choice - Tidio

Chose Tidio as our chatbot platform after analyzing various options against our requirements, user needs, and budget. It was the best choice due to its exceptional user experience, cost-effectiveness, and alignment with our project goals.

User research - potential students

_______________________________________________

5 domestic and 5 international students were interviewed separately by quantitative methods

User Persona

___________________

User Journey Map

__________________________

Ideate Phase - Content Design

___________________________________________

User Flow

_______________

Here is one of the main user flow, which is when Li ( international student) applying Commlead program, she would like to know if he qualify the minimum requirements.

Design System

______________________

Voice and Tone

Typeface

Brand colors - “The brights”

Logo

Chatbot Screens

________________________

Demo

__________

Click below to experience the chatbot, live on the client website.

Future Steps

___________________

  • Conduct more usability testing with prospective students to gather feedback and improve user experience
  • Implement basic navigational changes such as "Anything else?" option and the ability to return to the main menu
  • Expand chatbot categories to include more specific information such as upcoming events, fee breakdowns, and department-wise contact details
  • Add live agents to the chatbot for real-time assistance
  • Develop the chatbot to allow students and faculty to tailor the content and make it more relevant and accurate

Learnings

_______________

  • Conducting stakeholder interviews to gather insights helped ensure that the chatbot aligned with their needs.
  • Prioritizing user needs and keeping them at the center of the design process was crucial
  • Choosing an existing chatbot platform saved time and provided easy backend access for non-technical stakeholders
  • Booking demo sessions to evaluate and compare features, functionality, and ease of use was beneficial
  • Testing and iterating on the chatbot with real users ensured it met their needs and solved their pain points
  • Incorporating natural language processing enhanced usability
  • Providing 24/7 chatbot service improved user experience and reduced the workload of program advisers

Note

________

Please note that due to a non-disclosure agreement, I am unable to showcase the projects that I have worked on as they are not yet launched. However, I would be happy to talk about it briefly !

Logo Concept and Design

_______                                                   _

Concept: The ADI Month (accessibility and disability inclusion) logo aims to artistically showcase accessibility and inclusion by portraying different types of disabilities within its design elements. This was achieved by creatively manipulating the typeface of the logo "ADI month". In the logo design, 'A' integrates a hearing icon (depicted by two lines placed on the right), 'D' embodies a wheelchair user, and 'I' creatively represents the face of a wheelchair user through a dot.

Regarding 'Month,' 'M' emphasizes simplicity, symbolizing adaptability. 'O' blossoms like a sunflower, symbolizing cognitive agility. Notably, 'N' signifies Braille language as it's written in Braille, and 'H' communicates gracefully through the depiction of sign language.

The artistic representation within the ADI Month logo serves as a visual celebration, seamlessly blending diverse elements of abilities and disabilities, promoting awareness, and championing inclusivity throughout ADI Month.

Illustration Graphic

_______                                 _

To emphasize the logo and add a fun touch, I incorporated cheerful elements like confetti, colorful rainbows, party hats, and lively music trumpets. These playful additions create a festive and joyful atmosphere, enhancing the celebration of accessibility and inclusion during ADI Month.

Although the illustration was much appreciated by the stakeholders, I received feedback to further simplify it. I also realized the necessity of simplifying future designs particularly for individuals with neurodiverse needs who might find intricate designs overwhelming. This simplification will also help focus on the central logo design, ensuring its prominence.
First Version of the Illustration

Final versions: Logo design

_______                                                   _

Here are the final designs with a sampled background that's cleaner, more accessible, and places greater emphasis on the logo itself rather than the background.

To ensure adaptability across diverse platforms, the product logo has been created in different ratios and formats

Design Process

_______                          

1. Research Phase:
Conducted stakeholder interviews and market analysis
Engaged in user interviews and heuristic evaluations to understand user needs and identify usability issues

2. Design Phase:
Developed user flows and information architecture based on insights
Created wireframes on Figma for visual representation.Prototyped designs and gathered client feedback for validation

3. Implementation Phase:
Refined visual design elements, including color, typography, and visual
Executed the final designs on the Wix platform for implementation

Outcomes

_______               

Enhanced Website Flows: Successfully revamped website flows and navigation, resulting in a 36% decrease in misleading customer queries and a substantial increase in overall traffic

Research and Testing: Executed comprehensive secondary research and evaluative testing involving 8 participants. Synthesized findings to propose innovative designs that significantly reduced bounce rates and contributed to a noteworthy 20% increase in online sales

Improved Information Architecture: Developed a new information architecture, meticulously researching user flows and implementing easily discoverable call-to-action elements. Crafted a website that strikingly balances the artist's personality with user-friendly design for an engaging user experience

Live Website

_______                   _

Click to view the live website below

Design Process

_______                          

Research and Development: In-depth research based on existing design patterns, coupled with rigorous testing of new prototypes, guided the development of appropriate design patterns and guidelines focused on enhancing accessibility and user-friendliness

Component Creation:
The design components underwent thorough user testing and reviews involving stakeholders to ensure their effectiveness and alignment with user needs. Additionally, collaborative workshops with various stakeholders from reading and speech teams facilitated a deeper understanding of their problem-solving goals, leveraging their domain-specific research insights.

Implementation and Utilization: Refined design components are been integrated into key Google products such as Google Assistant, Lookout, Chrome Reading, and Android Reading Mode, enhancing their functionality. Furthermore, these components are set to play a vital role in enhancing various other Google reading and text-to-speech first products, including the generative AI.

Centralized Resource:
The finalized design components and guidelines were curated into an internal Google website. This platform serves as the primary reference hub for designers, fostering consistency and alignment with Google's brand principles in reading and speech functionalities.

Impact

_______    _

Consistency and Accessibility: The initiative facilitated a unified and accessible experience across diverse Google products, fostering consistency in design language and user interaction.

Empowering Designers: The centralized Carbon website served as the single source of truth for designers, empowering them to create user-friendly, consistent reading and speech interfaces while adhering to Google's material guidelines.

Enhanced User Experience:
Through these standardized components, users encountered enhanced experiences within Google's reading and speech-driven products, contributing to heightened user satisfaction and engagement.

Reduced Learning Curve:
The establishment of consistent design components across reading and speech-related products minimized the need for users to relearn interfaces. This standardized approach allowed users to navigate various Google products seamlessly, utilizing familiar design elements. Consequently, users encountered reduced cognitive load, enhancing their overall experience and encouraging prolonged engagement with Google's reading and speech functionalities.

Explorations

__ ___.               ___

Explorations showcasing diverse creative concepts for the magnifier icon. These iterations illustrate the creative evolution that culminated in the selection of the final, distinctive icon.

Logo concept and final design

__ ___.               __                                            _

The Magnifier for Pixel icon adopts a minimalist approach, featuring a magnifying glass positioned above an expanding square. This design succinctly represents the app's core functionality—magnification and enhanced visual clarity. The magnifying glass symbolizes precise magnification, while the enlarging square signifies the detailed view of real-life objects. This minimalist yet intuitive design aligns seamlessly with Google's product icons, combining simplicity with advanced functionality.

Application Examples

__ ___.               __                       _

Problem Statement

My client aims to improve the online booking experience on their website for mobile users. The current website is inaccessible does not have a streamlined booking process, which is inconvenient for the client and the end-users.

Solution

To make the salon online booking experience easy and accessible for mobile users, I thought of coming up with intuitive solutions that save their time and give users the ease to book an appointment according to their preferences.

Design Thinking Process

The design thinking process I followed for the project

Understanding User Experience

I surveyed around 20 people who prefer to go to the local salons and book appointments online to learn about their demographics and pain points while navigating a salon website/application.

The survey identified that the target audience is 26 - 44 years old, are full employed/masters students, visit salons occasionally (because of a pandemic),74% book appointments online. Upon asking about the essential features, 84% voted for information about rates and time required for the service, more than 60% voted for convenient and easy booking, and approximately 55% voted for reviews and easy cancellation. Regarding the challenges faced,63% of the participants mentioned the slow booking process, and 42% said there was a lack of reviews from other customers.

User Interview

To learn more about people's salon experiences, I conducted interviews with 6 participants. During the interview, the participants expressed that they:

  • Want to be aware of the services provided and the approximate time required
  • Find it a burden to call or text to book/confirm a salon appointment
  • Want to be aware of the hairdresser's work or customer reviews
  • Want a quick way to book a salon appointment online via mobile

User Persona

After the interviews, I was able to build a persona that matches the target market.

Card Sorting

Performed the card sorting exercise with 9 participants to avoid biases and understand the user's perspective.

Define User Needs

Sitemap

With the help of card sorting, I was able to define the information architecture of the website's features as per user’s mental model.

User Flow

I created a simple user flow of the booking process as I am concentrating on simplifying the online booking process for the user's.

Ideate

Lo-Fidelity Paper Prototypes

After understanding the user's needs and defining the key features, I sketched the paper prototypes.

Paper Sketches

Initial Feedback

I took a couple of feedbacks at the paper prototype stage.

  • The text was too small and hard to read.
    (I then referred to material design and iOS mobile design guidelines and increased the font sizes for the final prototype)
  • The hero images on all the pages seem like a distraction
    (kept the hero images only till the onboarding screens and not on all the pages)
  • No exit strategy at the last appointment confirmation page for the users
    (gave an exit strategy to view the appointment and edit it and also provided an option to contact in case of cancellations)

Wireframes

Before starting UI design, I worked on the wireframe to understand the website's user flow and structure. I also tried incorporating the feedback I received at the initial prototype stage.

Design

Design System

After the wireframing, I then worked on the design system. I could not make many changes as the brand already has an established identity.

Hi-Fidelity Mockups

After working on the wireframes, I finalized the look and flow of the website by designing
high-fidelity mockups.

Testing

I conducted testing with five participants for effective initial testing results on prototypes. I asked them to perform booking an appointment while explaining what process they thought each screen led to.

As a result, I made iterations on the hi-fidelity mockups shared earlier in the design section based on these key findings:

  • The drop-down feature for services looks congested and inaccessible
  • User shared that she would want to have an option to go back and cancel the appointment
  • User mentioned it would be great to have an option to get an event reminder
  • White Outlines on the interface look too stark

Learnings

My key learnings throughout the project

  • Designing a solution for the online booking appointment for a local salon needs a lot of information to consider. Understanding the target audiences at first through an initial interview helped me understand the areas that need to be fixed for a better user journey.
  • Focusing on the web page's mobile design version helped me understand the key UI elements used for mobile design and the importance of accessibility. I also had an opportunity to learn about the design system and its role in UI design.
  • Last but not least, the feedback on every stage helped me better my design decisions to make the users' booking process easy and convenient.

Why Zara ?

Zara is a Spanish apparel brand. It belongs to Inditex, one of the largest fashion retailers around the globe. Zara is known for its fast-fashion and includes clothing, shoes, accessories, fragrances, and beauty. It currently has more than 2,000 stores around the globe and is the most significant contributor to the Inditex group.

We chose Zara because, being from a fashion background in the past, I realized a lack of intuitive and practical online user experience in this sector of society.

At this time of pandemic when we are in this new digital world, the intent was to observe Zara’s online user experience and see whether it’s at par with their in-store experience, which is highly appreciated in the fashion retail world.

Understanding The User

Survey

At the start of the project, we conducted the initial survey with 40 participants to understand users. According to the survey results, most of the users fall into the age group 16 - 25, are fully employed and shop from Zara every month. The survey also indicated that one of their pain points while shopping on zara's website is slow checkout process.

Find the complete survey report here.

User Persona

Heuristics Of Concern

Conduct a heuristic assessment for the Zara's website and detect any problems or contradictions to improve the overall usage of the website and provide a better user experience.

The task was to see the user experience when a customer wants to search for an outfit and buy it. However, other tasks a user may need to do on the website are also there as examples.

Accessibility, aesthetic and minimalist design

Application aesthetics are crowded and unpleasant. The primary navigation bar overlaps with the web page content because of its transparent background. Product information is also not visible due to the choice of font and its size. (a)

a) Aesthetic and minimalist design

Flexibility and efficiency of use

Certain design elements on the website, like the view icon to change the page layout, make the web interaction difficult for novice users. It is inconsistent and unresponsive as after scrolling it towards the extreme right, the interface shows thumbnail size product images without description.

b) Thumbnail view not showing product description

Recognition and Recall, Match between the system and the real world

There is a lack of clarity in the filter feature. The random placement of the 'Filter' feature on the extreme right under the cart makes it invisible and difficult to use while performing a task (c).The filter side sheet has checkboxes that are not visible until you click them,making them ambiguous and unfamiliar (d).

c) Filter option
d) Filter side sheet

The visibility of system status

The checkout process seems unclear.  When a user does the payment process, it is unclear how many more steps are ahead. Since it looks like there is only one step, "Payment," within this step, there are more steps than one (e). A user should be notified about these multiple steps.These two can be easily combined in one step/page. Goal Gradient effect also states that the tendency to approach a goal increases with proximity to that goal, which is violated due to 5 steps in checkout.

e) Payment steps

Error prevention

There is a lack of error prevention. In the Summary section (image f) at the last step, users cannot see detailed information about their order; they can only see images of their purchasing items.Therefore, if they make a mistake (for example, in size), it will be hard to correct the error before buying.

f) Summary section
Find the complete heuristic report here.

Usability Testing

Goal

For the usability test we took the specific task of discovering the Filter, View feature and Checkout process. We conducted a usability test and interviewed a total of 12 participants who matched our user persona.

Find the usability script and results here

Participants Demographics
  • Gender : Female (10) Male (2)
  • Age : all were under 25
  • Occupation : 6 students, 6 working professionals
  • Favorite Shopping sites : H&M, Zara, Mango, Banana Republic

User Interview Tasks

Task 1. Discoverability (filter + View)

Put together an ensemble for an upcoming college event.

  1. a) Participants were asked to choose preferences for the outfit like color, size, price etc?
  2. b)Demonstrate how would you see the products in a different layout?
Task 2. Check-out process

Now that the participants choose the items to purchase, they were asked to checkout.

  1. Participants were asked about the number of steps in the checkout process?
  2. Rate your check-out experience in terms of simplicity and easiness?

Usability Test Results

Filter Option (Task 1a)

According to the interview, most of the participants discovered "filter" in a short amount of time or stumbled on it by accident.

Users mentioned that the feature is hardly visible/ understandable.

View Option (Task 1b)

We applied Time to measure discoverability of view. 50% of the participants took 10 - 29 seconds, 25% took 30 - 59 seconds, 17% took 5 - 9 seconds and 8% took 4 seconds.

Users mentioned that the option was too far fetched for them to notice.

There were three options to view the products; default view, grid view and thumbnail. Upon asking which one is the most convenient, 83% of the users liked the grid view, 17% liked the thumbnail view and no one like the default view.

The three view layouts: Default, Grid and Thumbnail
Checkout Experience (Task 2)

We used customer sentiment to measure the checkout experience for the Zara website, where users indicated that they found the process lengthy and confusing. This was also addressed in the heuristic report. 67% of the users feel ok, 16% feel nice, and 17% feel frustrated about the process.

Legibility

The heuristic report indicated that the text on the website is low on legibility, so we asked our participants to read out loud each of the given paragraphs of the Zara and H&M website. We measured it by calculating average reading speed (words per minute).

General Evaluation

On a scale of 1-5 stars, with 5 stars being “best” or “strongly agree” and 1 star being “worst” or “strongly disagree,” how much do you agree with the following statements about Zara.

Key Quotes

Usability Testing

Goal

For the usability test we took the specific task of discovering the Filter, View feature and Checkout process. We conducted a usability test and interviewed a total of 12 participants who matched our user persona. Find the usability script and results here

Participants Demographics
  • Gender : Female (10) Male (2)
  • Age : all were under 25
  • Occupation : 6 students, 6 working professionals
  • Favorite Shopping sites : H&M, Zara, Mango, Banana Republic

User Interview

Task 1. Discoverability (Filter and View)

Put together an ensemble for an upcoming college event.

  1. Participants were asked to choose preferences for the outfit like color, size, price etc?
  2. Demonstrate how would you see the products in a different layout?
Filter and View option on zara website
Interview Result : Filter option discoverability (Task 1a)
According to the interview, most of the participants discovered "filter" in a short amount of time or stumbled on it by accident.

Users mentioned that the feature is hardly visible/ understandable.
Interview Result : View Option discoverability (Task 1b)
We applied Time to measure discoverability of view option.
50% of the 12 participants took 10 - 29 seconds to find the view option.

Users mentioned that the option was too far fetched for them to notice.
Most convenient View option
There were three options to view the products; default view, grid view and thumbnail. Upon asking which one is the most convenient, 83% of the users liked the grid view, 17% liked the thumbnail view and no one like the default view.
The three view options on Zara's website Default, Grid and Thumbnail
Task 2. Checkout Process

Now that the participants choose the items to purchase, they were asked to checkout.

  1. Participants were asked about the number of steps in the checkout process?
  2. Rate your check-out experience in terms of simplicity and easiness
Interview result - Checkout experience
We used customer sentiment to measure the checkout experience for the Zara website. Out of the 12 participants interviewed Most of them found the process lengthy and confusing. This was also addressed in the heuristic report.
Legibility
The heuristic report indicated that the text on the website is low on legibility, so we asked our participants to read out loud each of the given paragraphs of the Zara and H&M website. We measured it by calculating average reading speed (words per minute).

Participants took around 40 seconds more to read a paragraph from Zara's website in contrast to H&M.
Key quotes from participants

Issues And Design Recommendations

Issue : Navigation bar

Participants reported the legibility issue while navigating the primary navigation bar as it overlaps with the other content because of its transparent background.

Zara navigation bar (current)
Solution for White Theme

Removed the transparency from the navigation bar and gave a white color similar to the background. It would make the options more visible for the users and would also increase the aesthetic appeal.

Proposed solution option (Navigation bar)
Solution for Black Theme

Proposed a black background for the navigation bar. Zara used a black background for the navigation bar in the catalog section on the website, and it looked neat and went with the aesthetic personality of the brand.

Proposed solution option (Navigation bar)

Issue : Filter feature and side sheet

Most users said that the current filter option is hard to navigate and is not very useful. The filter side sheet shows too many options at once, and it seems overwhelming for the users and doesn't match Zara's design sensibilities of a minimal design approach. Participants also expressed that there should be a sort option for customizing the preferences, especially price.

Zara's current "Filter Option" and "Filter Side Sheet"
Solutions for Black Theme

Changed the placement of the filter, making it more visible and consistent by placing it on the left side below the navigation bar

Added a drop-down for the options in the filter side sheet for a sleek and clean visual look. Incorporated the slider icon (like view icon) for the filter feature and price option to maintain consistency

Added a "sort" drop-down feature with options like trends, recommendations, lowest and highest price

Used the black background for the primary navigation bar as suggested earlier for navigation bar design recommendations

Filter drop-down proposed solution
Sort drop-down proposed solution

Solutions for White Theme

Aligned the filter icon on the left with the rest of the interface to give a more consistent look.

I compressed the filter side sheet by adding a "+" icon to elaborate and "–" to compact the options.

Added a "Sort by" dropdown with customization options based on trend, price,newest, A-Z, Z-A.

Filter drop-down proposed solution
Sort drop-down proposed solution

Issue : View feature

The “view option” placement was on the navigation bar, and it was too small in size. Most of the participants expressed that they didn’t even notice the option until asked.The view option show three layouts – Default with single product image, Grid with four product images, and thumbnail view with multiple small photos with no product information. User testing indicated that the participants found the defaultview and thumbnail view challenging to use.

Three "View" options on Zara's website
Solutions for Black Theme

Changing the placement of the view icon from the navigation bar to the right side on the top of the product gallery for better visibility. Placing it near the product gallery will make it more accessible for the users.

Added the product description in the thumbnail view. It can be seen on hovering the productimage.

Most of the participants felt more comfortable with the grid view during the user interview; hence I propose to use that as a default setting on the interface.

Proposed solution for "grid view"
Proposed solution for the "default view"
Proposed solution for "thumbnail view"
Solutions for White Theme

I propose two layout options instead of three one with four product images and the other with a single product image. I kept the one with four product images as the default view as 83% of the participants preferred it during the user interview.

Changed the view icon from slider to square button view options to avoid the cognitive load for naive users. Also changed the placement of the view icon from the primary navigation bar to the left side on the top of the product gallery.

Proposed solution for "grid view"
Proposed solution for "default view"
Prototype for Black Theme Solutions : Navbar + Filter + Sort + View
Prototype for White Theme Solutions : Navbar + Filter + Sort + View

Issue : Checkout Process

The checkout process is quite lengthy and has unnecessary steps that could affect the conversion rate. The breadcrumbs “shipping, payment and summary” are not clickable, which doesn’t support the user's mental model. There is a bad use of whitespace, and content is low in readability and legibility. The summary page does not show information about the products which violets the error prevention heuristic.

Solutions for Black Theme :

Made the breadcrumbs  (shipping, payment, summary) clickable, placed them on the body of the interface instead of the topnear the Zara icon, and increased its size. It would enhance visibility and help in fast navigation.

Added the "view shopping bag" dropdown list on the left side at the eyelevel to keep the user informed about the purchase at all levels.

Minimized the steps by combining them for a fast user journey. For instance, the shipping method and address are on the same page, payment method and payment details on the same page. It also allows the user to make changes, if required, without going to a different interface.

Incorporated the product details on the summary page, which comes on hovering on the productimage. Participants mentioned in the interview about the inconvenience of going back and forth to cross-check the product information.

Changed the summary information from the right to the left side above the "continue"call to action for consistency and improved user experience.

Zara - "Shipping" Page
Zara - "Payments" Page
Zara - "Summary Page"
Solutions for White Theme :

Made the breadcrumbs  (shipping, payment, summary) clickable, placed them on the body of the interface instead of the topnear the Zara icon, and increased its size. It would enhance visibility and help in fast navigation.

Reduced the steps/pages from five to three by keeping one page for one section. For example, "payment" has one page instead of two. Zara believes in a minimal and clean design approach, therefore, used the dropdown list feature to avoid excessive information on the interface.

Increased the size of the buttons and placed them on the left side under the products for a clear call to action.

Added"show order summary" with the total price on the extreme left at theeye level to keep the user informed about the purchase amount at all times.

Added the product details under the product image on the summary page to maintain consistency and error prevention.

Zara - "Ship Or Pick Up" Details Page
Zara - "Payment" Page
Zara - Payment "Summary" Page

Prototype for Black Theme

Prototype for White Theme

Learnings And Future

Limitations :
  • Usability Study on only 12 participants
  • Time Constraint
  • Virtual Project
Reflections :
  • A design that cannot meet basic needs is simply not a good design.
  • Brand Halo Effect
Next Steps :
  • Further usability testing on prototypes
  • Iteration as per feedback & usability tests
  • Widen scope of research