Tirar

fragrance shop E-commerce

UX/UI design Wireframing Prototyping Responsive website

Prototype

Objective

The COVID-19 pandemic has significantly accelerated the growth of e-commerce, with online shopping becoming
the preferred mode of purchase for many consumers.
But online fragrance shops can be difficult to navigate because customers can't physically experience the scents.

The aim is to build a functional web shop that will earn customers' trust. In addition to serving its purpose, it also provides an aesthetically pleasing appearance that enriches the customer's overall shopping experience.

Goal

Establish an online fragrance shop that not only embraces
the accelerated growth of e-commerce,
but also lighten the challenges posed by the intangible
nature of fragrance in online shopping.

The goal is to create a functional and user-friendly web shop that inspires trust in your customers.
This includes seamlessly guiding users through fragrance exploration, ensuring a visually appealing and rich shopping experience, and fostering confidence and satisfaction in purchasing fragrances online.

Target audience

The target demographic comprises individuals aged 25 to 50 with a keen fashion sense.
Recognising their busy lifestyles, I value convenience and and meet the needs of customers who prefer the ease of online shopping over the traditional physical shop experience.

User stories

Job To Be Done

Story 1
I want to have access to advanced filtering options, so that I don’t have to browse through a lot of products to find what I’m looking for.

Tirar provides filter options based
on both scent and mood.
They categorised scents into five families. Within these families,
users can filter more detailed.

Story2
I want to see what other customers have said about products and how they have rated them, so I can better judge whether the item is right for me.

Users can check reviews on each product page and sort by rating
for a comprehensive view.
Additionally, the "Most Popular" section on the home screen provides easy access to
top-rated products.

Story3
As a returning customer, I want to see an overview of my previous activity, so that I can view previous purchases and search history.

The intuitive return process ensures a seamless experience.
Due to the sensitivity of fragrance products,
I have strategically placed reminders to review the return policy on every page throughout the process to ensure transparency and clarity for users.

User flow

I defined three key features- Filter products, See reviews, and Return item(s) for the web shop to enhance your experience.

Usability test

I conducted usability testing with fellow UI designers to assess the seamlessness of the flow experienced on mobile e-commerce websites.

Mid-fidelity wireframes

Mid-fidelity wireframes allow me to focus on the structure and functionality of the interface. It helps define the placement of key elements, such as navigation menus, content sections, ensuring a logical and user-friendly arrangement before delving into visual design aspects.

Responsive screens

In today's fast-paced lifestyle, mobile usage has surged significantly, becoming a go-to choice for users during commutes or lunch breaks.
Responsive design ensures that even on smaller screens, the user experience remains friendly and accommodating, meeting the demands of mobile-centric lifestyles seamlessly.

Style guide

In terms of typography, Chloe exudes elegance, yet the use of
uppercase letters imparts a more approachable and friendly vibe.
On the other hand, Diatype offers a neutral aesthetic with slightly spaced letters, contributing to a comfortable and easily readable experience.

For the primary palette, I chose a timeless black-and-white scheme to seamlessly complement the production images.
In instances where the two-tone approach might be less effective or when we require colours for social media or packaging, an accent colour comes into play. This refreshing lime hue adds a touch of vibrancy, creating a positive and invigorating experience for customers.