top of page
#003.jpg

Kalliaras Sunglasses

The Challenge

Design a mobile online shopping experience for a fictional e-commerce brand.

For a UI/UX design course, I designed a website for a randomly generated product and persona. Assigned the task of creating a sunglasses brand targeting trend-conscious females in their 30s with ample disposable income and a preference for influencer-endorsed products, I introduced Kalliaras Sunglasses.

Deliverables

Task flows, Wireframes, Design System, High-Fidelity Prototype.

Timeline:

Two Months

My Role:

UI/UX Designer

Platform:

Figma

Who's doing the shopping?

For the purpose of this assignment, I was asked to utilize a random persona generator so I could create a hypothetical target audience.  While the image below represents the generated persona, I advocate against including demographic details in personas, as they can perpetuate stereotypes and result in superficial user understanding. 

Persona details

Exploring other e-commerce websites for inspiration

Sketching was an efficient and costless way for me to start thinking about how an e-commerce business website usually flows. 

 

After reviewing some of my own personal favorite websites to shop on, I noticed they all had a similar flow in common:

  • Homepage (drawing attention to a new product, that season's release, best sellers, etc.)

  • Product pages

  • Check out

With that insight, I started sketching out simple frames for Kalliaras Sunglasses.

Initial paper Sketches
Initial paper sketches

1:1 Interviews reveal gaps in original design

After transforming my sketch into a digital low-fidelity wireframe, I conducted initial usability testing by interviewing a sample of five friends and family members, who navigated the prototype and provided feedback on the flow. Given the project's nature as an independent case study with a fictional brand, I utilized the resources readily available in my personal network for research. However, for future projects I will aim to conduct user testing with a larger sample size and a more relevant audience to simulate real-user reactions accurately.

Some questions I asked in the interviews:

  • Does this flow make sense to you?

  • What do you wish was here that isn't?

  • Is there anything that feels half-baked and can be expanded upon?

The feedback from the interviews revealed the necessity for additional supporting pages within the original design to enhance the flow. For instance, users expressed the need to access individual product pages to preview various color options and additional details for each pair of sunglasses. 

Low-fidelity wireframe

Homepage

Product Details

Check Out

Confirmation

User flow provides insights to overlooked online shopping habits

After conducting user interviews and realizing the gaps in my original design, I opted to create a user flow. This allowed for a more comprehensive visualization of user actions during website navigation, and uncovered additional interaction possibilities previously overlooked in my designs. I acknowledge that this user flow lacks research data or testing, which are essential in a real UX project.​

Given project time constraints, I prioritized essential features for a user-friendly design flow, leaving non-essential ones for future iterations.

Added:

  • Ability to read customer reviews for each product 

  • Option for account sign up/log in

Backlogged:

  • Advanced account features (ex: displaying past order history)

  • Ability to save items in the shopping cart while browsing or when leaving the website

User Flow.png

Adding to the design

01

Create Account

The addition of pages for the user to either log in, sign up, or reset their password so they can create an account with Kalliaras Sunglasses. Having an account with an e-commerce brand has benefits such as a faster checkout process, a more interactive experience, and can make repeat purchases easier. This enhances the customer experience and fosters loyalty, meeting the business's objectives as well.

Log In.gif
apple-iphone-13-pro-max-2021-medium.png
Click into each product gif.gif
apple-iphone-13-pro-max-2021-medium.png

02

Product Details

Users found the original design overwhelming with all products and specs on one page. I simplified it by allowing users to click into each product and view specific details like price, colors, and reviews on a separate page. 

03

Customer Reviews

Users expressed interest in knowing others' opinions about the product. I iterated on the design, adding the ability to view reviews on each product's page.

Customer Reviews.gif
apple-iphone-13-pro-max-2021-medium.png

Design System

How can my brand evoke feelings of relevance and belonging?

When selecting fonts and colors, I considered the persona's description and what they value (trend-following, influencer-oriented, and financially comfortable) to ensure the brand resonates with them. In consideration of this, I aimed to evoke feelings of relevance and belonging for the consumer.

 

To achieve this, I focused on two current trends: embracing femininity and environmental sustainability. Using muted earthy tones and a touch of pink, I portrayed elements of nature and femininity. Additionally, I opted for an elegant Serif font to further accentuate the brand's feminine appeal.

Colors (4).png

A user - friendly online shopping experience

Homepage.jpg

If I had more time. . . 

would like to enhance the prototype further by:

  • Choosing a different color palette with accessibility in mind

  • Enabling users to save items in the shopping cart upon leaving the website

  • Advanced account features (ex: displaying past order history) ​

  • Allowing products to be viewed in each available color.

  • Implementing a predictive search bar.

bottom of page