The Problem
Kiaura Eyewear's business has blown up over the past 6 months. In order to keep up with orders and further expand the business the owner wanted to rebuild and rebrand his site in time for the upcoming holiday season.
The Solution
My goal is to update and redesign Kiaura's website, meet the business goals, make ordering easier and showcase the brand's values. This solution would help attract more customers and increase the conversion rate once guided to the site from marketing adds such as instagram and tiktok.
Process
Research
Understanding the market
The owner and marketing team presented some preliminary research findings when I joined the project. Although I was not starting from scratch, I still wanted to conduct some competitive research to understand Kiaura's uniqueness and its positioning.
In order to learn more about the market and to cross-reference anything that may have been missed I looked at some other businesses that are operating in the same space.
Users trust the opinion of those around them, especially friends and influencers they follow, making reviews essential.
Users like to see their values represented in the products they are searching for. Ethically sourced, quality materials make a site more attractive to users.
Understanding how users find Kiaura Eyewear organically and through social media.
With the help of the marketing team I was able to understand the budget and effort they had through social media (instagram & tiktok)
This information gave us a baseline used later on in the design phase to understand where Kiaura was losing customers during conversion.
Ideation
Defining the persona
With the information I gathered during my research in mind, I created a persona: meet Parker!
Parker likes to shop online and is looking for a pair of sunglasses. He is often influenced by brands advertising on social media but wants a quality product.
Mapping Parker's success
How should the information and products be categorized?
I identified common patterns within some e-commerce online shops, and created a site map detailing how all of the products would be categorized.
Wireframes
After defining Kiaura's key pages and their content, I created the wireframes that would structure it. By referencing the websites of some competitors, I was able to apply industry-standard design patterns wherever possible.
Design
A Refreshed Online Experience
Following, I moved onto the UI; I made sure to keep in mind the words the owner of Kiaura used to describe the brand (retro, stylish, and old Hollywood) and sought to showcase that into the website. I also analyzed some competitor websites, like Rayban, Blenders and a few other online companies.
By testing their user flow, I was able to understand the journey of their users, see the conventions in e-commerce websites, and determine areas that I could improve over the competitors.
Here are some key points that I gathered through those evaluations and observations:
Simplistic and updated retro styled UI with neutral or pastel colors.
Photographs with models to give a more realistic and relatable result.
Visual elements and high quality photos are mandatory.
Detailed information about materials, care & product description.
Having those elements in mind, I was able to start working on the UI. The aim: Give Kiaura's website an updated yet retro look.
Original Home Page
Original Shop Page
Original Shop - Hats Page
Updated Home Page
Updated Shop - Bundles Page
Updated Shop - Hats Page
Original Product Page
Updated Product Page
Validation
Prototyping & Testing
In relation to information architecture, content strategy, interactions, and visual design, I wanted to make sure that Kiaura's target audience could easily understand and use these choices. To evaluate the new design, I conducted remote usability tests.
Checkout
How to streamline checkout
While there was emphasis on the restructuring and visual design of the site, our main focus was to update and optimize the checkout process. Kiaura was looking to boost their conversion rate from social media marketing through to checkout.
Below you can view the changes that were made.
Original Website Checkout
Updated Checkout
Confirmation Page
