Case Study
SimplyKaiJewelry
E-commerce Responsive Redesign
Overview
This project focused on reinforcing design concepts and best practices around user research, information architecture, wireframing, and interaction design. The goal of this project was to choose a small e-commerce business and improve the online shopping experience from the perspective of a predetermined persona. I chose to improve the visual interface, information architecture, and overall shopping functionality of SimplyKaiJewelry’s website. SimplyKaiJewelry is a Hawaii-based jewelry brand that offers handmade jewelry inspired by the ocean. All pieces are made with handpicked shells and beach glass found on the beaches of Hawaii.
the challenge
- Redesign SimplyKaiJewelry’s online shopping experience to improve usability.
- Enable users to easily browse products and purchase items in the fewest possible clicks.
- Create a responsive website for desktop and mobile tested by users and modeled after information architecture heuristic best practices.
my role
I was the sole UX designer of SimplyKaiJewelry’s website and responsible for the development of the desktop and mobile interface. I conducted user research, addressed users’ pain points, and created an interactive prototype to enhance the functionality of the e-commerce shopping experience.
Client: SimplyKaiJewelry
Role: UX Researcher, UX/UI Designer
Tools: Sketch, InVision, Zeplin, Trello, Whimsical, Optimal Workshop
scroll to see the research ↓
The Process
RESEARCH
Competitive Analysis
Upon first impression it is clear that SimplyKaiJewelry’s current website reflects the brand’s oceanic image with a large banner featuring hand picked shells necklaces with starfish charms. However, the current landing page is not a homepage, but the product listing page instead. The top navigation includes a “Shop” and “About” tab, and the bottom navigation bar includes a contact link and shipping information. Users can select a jewelry category from the floating dropdown menu, however they are not able to sort products by feature or hierarchy.
Element Analysis
My process began with doing background research on SimplyKaiJewelry’s competitors. The purpose was to gain a better understanding of what makes for an enjoyable online shopping experience.
Below is a competitive element analysis looking at the website layout of three jewelry brands: Mejuri, Olive + Piper, and Alex and Ani.
For more visual inspiration, I also performed a comparative element analysis for the brands: Bliss, Fronks, and ETQ.
These element analyses gave me a good starting point to narrow down on some of the features I found beneficial on e-commerce sites selling jewelry. The feature inventory below lists those important features and shows which ones Mejuri, Olive + Piper, and Alex and Ani offer.
Feature Analysis
User Interviews
I interviewed five users to gain insights on their online shopping experiences and how they shopped for jewelry in particular. In order to synthesize my research, I created an Affinity Map →
Key Takeaways:
- Users are frequent online shoppers.
- Photos are essential. Photos should be of the item itself and how it would look on a person.
- Good UI is essential for a good shopping experience. This includes good navigation, quick and simple check out, thorough filters, and easy cart access.
- Items are hard to find if they are not categorized properly.
- Jewelry should be categorized by type, material, color, and style.
SYNTHESIS
User Personas
Emily's Task Flow:
Ordering Custom Jewelry
Olivia's Task Flow:
Ordering Bangles
User Flow
Throughout the project, I paid close attention to these needs and pain points to deliver a product concept that both Emily and Olivia will enjoy using.
IDEATION
Information Architecture
Card Sort
In order to improve SimplyKaiJewelry’s information architecture, I conducted an open card sort with six users to discover how they interpreted and categorized the items on SimplyKaiJewelry’s website. I asked participants to arrange the items into groups and assign their own labels to each group. Users were generally consistent in organizing products into jewelry categories such as “necklaces” and “earrings.” However, the key takeaway from this study was that half of the participants labeled bangles as its own category, while the other half considered bangles as bracelets putting both of them under the category “Bracelets.” Since SimplyKaiJewelry specializes bangles, I decided to list bangles as its own category as seen below.
Site Map
I then designed a general site map to organize the content of the site and understand the most efficient way to navigate through the experience in as few clicks as possible.
Initial Sketches
Upon completion of my proposed site map, I began sketching the website interface and formulating the layout for my redesign. I referenced back to the element analysis I created in the research stage of the process and pulled inspiration from brands such as Mejuri and Olive + Piper.
Starting with pen and paper I created the main screens included in Emily’s and Olivia’s task flow. I tried to keep the layout simple and intuitive. In this phase I focused on creating fewer screens that captured the content and structure of the page over quantity.
Mid-Fidelity Wireframes
I translated my sketches into digital wireframes using Sketch creating one wireframe per page in Emily’s and Olivia’s shopping journey. During this phase I wanted to focus on ease of use and creating a seamless flow from screen to screen.
For Emily’s mid-fidelity wireframe, she starts on the home page and logs into her account. She then uses the “Shop” tab in top navigation panel to access the custom jewelry product listing page. Emily wants to design a custom bangle so she clicks on that item, which takes her to the product description page where she can select the metal, size, add-on charms, and engrave text. She then adds her custom bangle to her cart and inputs her shipping, delivery, and billing information during the checkout process.
For Olivia’s mid-fidelity wireframe, she lands on the homepage and wants to create a new account. Once she creates he account she uses the “Shop” tab as well to find the bangle jewelry category. Olivia is looking for bangles for her bridesmaids and sees the Tahitian pearl bangle that would be perfect. She goes to the product description page and adds five Tahitian pearl bangles to her cart and goes through the checkout process.
TEST
Usability Testing
I created a test script and conducted three usability tests with my prototype. The tasks and findings are described below:
User 1
Task: Navigate through the wireframes using the prototype and provide feedback on the user interface and navigation.
Takeaways:
- I did not include a “Continue to Checkout” button on the cart pop-up, only a “Your Cart” button.
- One of the category headers was duplicated.
User 2
Task: Shop for a custom bangle and go through the checkout process. (Emily’s task flow)
Prompts:
- Sign In
- User was able to sign in with no issues.
- Customize a Bangle
- User was unsure how to get to the customize page. I realized I forgot to link the “customize” button in the top navigation bar. I only linked the button on the homepage.
- Add to Cart & Checkout
- No problems with checkout.
- Suggested adding the order details to the confirmation page.
User 3
Task: Shop for bangles and add 5 to your cart. Go through the checkout process. (Olivia’s task flow)
Prompts:
- Create an Account
-
User was signed up with no issues. She suggested having both the Log In and Create Account options on one page instead of having the default page be Customer Login.
-
- Order 5 Tahitian Pearl Bangles
- User was able to add the bangles to the cart. The default quantity on my page was already set to 5, which caused a bit of confusion.
3. Add to Cart & Checkout
- User was able to add the bangles to the cart. The default quantity on my page was already set to 5, which caused a bit of confusion.
- User added the bangles to the cart and made no errors while doing so.
RESPONSIVE DESIGN
My next task was to create responsive designs for desktop and mobile. Using the feedback from my usability testing, I worked to enhance the UI and add images and text to mirror what the live website would look like. I conducted more usability tests with the same users after creating my high-fidelity wireframes and received positive responses. They reported that the changes and improvements that were made, improved the overall shopping experience. Check out my high-fidelity mockups below!
High-fidelity Mockups
Home
Login
Product Listing Page
Product Description Page
Checkout
PROTOTYPE
High-Fidelity Prototype
Design Handoff
Click below to explore the project handoff to developers using Zeplin.
Next Steps?
With more time, here are some of the things I would address:
Create a High-Fidelity Prototype
My next step would be to build out my responsive website pages and bring the rest of my desktop and mobile pages into high-fidelity wireframes. Using these wireframes, I would like to create a high-fidelity prototype and perform more usability testing.
Explore Native App Design
Designing a responsive desktop and mobile website is just one aspect of the design. I would like to explore how I could create a native app for SimplyKaiJewelry by following both Human Interface Guidelines and Material Guidelines for visual and navigational patterns. The app will incorporate SimplyKaiJewelry’s style guide and be compatible across all iOS and Android devices.
Usability Testing
As always, more usability testing will be needed to improve the overall functionality of the website. I was only able to conduct three usability tests with my mid-fidelity prototype and three more using my high-fidelity wireframes while making changes along the way. Securing more users would help to support stronger trends in data, and provide stronger justification for design decisions.
See more of my work:
Tot Squad
Client Website Redesign
Shazam
Music Identifier App Redesign
Design Challenges
Explorative UI