Juni Home + Ceramics is a local home living and ceramic shop in Iowa City, Iowa, looking to expand nationwide with a website.
The home decor innovators asked me to develop their brand identity and apply it to a design prototype, then improve the website's functionality through user evaluations. This website would include a whole e-commerce shopping experience, from selecting to view a product, adding the item to the shopping bag, and entering payment and shipping information.
Client: Juni (2024)
Deadline: 10 Weeks
What I Accomplished:
-UX Design
-User Evaluation
-Brand Identity
Software Usage:
-Figma
-Adobe Illustrator & Photoshop
-Microsoft Word
-Google Forms
Juni’s
Branding
Juni’s brand identity expresses modernism, boldness, cleanliness, friendliness, and an ecology representative that carries a cohesive nature to the products designed by their in-house artists. In order to maintain a clean and non-loud interface, I created a graphics and iconography library with solid colors and a minimal style to prioritize the primary hierarchy of promotional and product images.
Click here to view Juni’s brand guide.
What Was The Thought Process Behind The Design Wireframe?
Organization, intuitiveness, and uniqueness were the aims of this design wireframe, as these qualities are always needed for e-commerce websites. There is an emphasis on uniqueness due to e-commerce layout and aesthetic saturation, and my idea was to create small details that differentiate this website, such as an interesting entry point into the categories webpage with the beginning modular for each category as users typically read from left to right.
Final Design Prototype
Click here to view and follow Juni’s website user flow.
User Evaluation
Click here to view the full user evaluation report for Juni’s website.
For effective user evaluation results on Juni’s website, the D.E.C.I.D.E. evaluation approach was most helpful in completing each phase with user participants: (D)etermine the goals, (E)xplore the goals, (C)hoose the evaluation appraoch and methods , (I)dentify the practical issues, (E)valuate, analyze, interpret, and present the data. Check out the overview of the user evaluation below:
-
Goals:
The top-prioritized goal of this user evaluation is to understand the current usability and user experience proficiency through user flows embedded into Juni’s website.
An additional goal of this user evaluation is to analyze whether users feel secure, relaxed, and confident engaging with Juni’s website. There are anxious-related responses processing payments and sharing personal information with websites, and it’s Juni’s goal to put users at ease using the website.
Approach:
Pre-Usability Test Interview
Usability Test Observation
Post-Usability Test Questionnaire
-
User 1
Female
Age - 47
Occupation - Education Consultant
Related Experience? - Yes
User 2
Female
Age - 22
Occupation - University Student
Related Experience? - Yes
User 3
Female
Age - 21
Occupation - Lab Research Assistant
Related Experience? - Yes
User 4
Male
Age - 20
Occupation - University Student
Related Experience? - No
User 5
Male
Age - 23
Occupation - Military Solider and Mechanic
Related Experience? - Yes
User 6
Female
Age - 22
Occupation - Pharmacy Technician
Related Experience? - Yes
-
A pre-usability test interview will be conducted to learn more about the user and their previous experience using e-commerce websites. The following questions will be asked during this phase:
What is your common goal when visiting an e-commerce website? Is your intention only to browse for inspiration or entertainment, or does browsing lead to purchasing a product?
Have you used a home decor or ceramics website before like West Elm, Magnolia, IKEA, Wayfair, or similar websites?
How did you feel about browsing, locating, and checking out of a previous related e-commerce website? Was it a good or bad experience, and why?
As an estimate, how long does it typically take to complete a checkout process when your payment is not already pre-saved?
Are there any final questions before we begin this usability test of Juni Home Living + Ceramics?
-
During this usability test observation, the user will be instructed to think out loud while engaging with the website to understand what the user feels and thinks while performing tasks. The user will then be asked to perform five tasks to measure whether Juni meets its usability goal benchmark set by its competitors, such as West Elm, Magnolia, IKEA, or Wayfair. The five tasks will be asked on a begin, perform, and completion basis to reduce task confusion or feeling overwhelmed. For instance, the user will be instructed to begin task one, perform, complete, and then ask for the next task while being observed. The usability tasks are stated by the following:
Beginning at the homepage, find where to purchase a ceramic planter named “Takai Ribu” and select the product once you locate it.
Ensure that you choose the red color of the “Takai Ribu” planter, add it to your bag, and locate the checkout bag to begin the checkout process.
Review your bag. Is it correct? Do the product color, quantity, and prices all align? If so, continue to checkout.
You will choose to have your order shipped standardly free and paid by a credit card. With that information, complete the rest of the checkout information and place
your order.Once the order is placed and confirmed, return to the homepage.
-
This post-usability test questionnaire will provide honest, non-pressured feedback from user participants about their experience engaging with Juni's online presence and answer the questions explored in the evaluation's goals. It consists of 13 questions written in a first-person perspective to ease the decision-making process on the strongly disagree (1) - agree (5) scale:
It was straightforward to locate the “Takai Ribu” ceramic planter going from the homepage to the category’s webpage.
Adding the “Takai Ribu” ceramic planter to the bag and then locating the checkout bag was straightforward.
The order summary to the right in the checkout bag webpage was easy to understand. I knew what every label was asking or telling me what to do.
I was confused or overwhelmed during any phase of the checkout process (Shipping -> Payment -> Confirmation webpages).
It was straightforward to know what shipping and payment information to enter into each fill-in box on these webpages.
It was straightforward on which button to choose to continue to the next webpage in each checkout phase (Shipping -> Payment -> Confirmation -> Home webpages).
In a scenario where I was not paying with a credit card, there were enough other payment options to pay for the product (PayPal, Apple Pay, etc.).
It was straightforward to get back to the homepage from the order confirmation webpage.
I felt like this website was legitimate and sold high-quality home decor and ceramic products.
I felt secure and relaxed while using the website and did not feel like this website would steal my personal and payment information.
The website branding and aesthetics helped the website feel more legitimate.
I would come back and use this website again based on my finding a product and checking out experience.
This website was as high-quality as the competitors, such as West Elm, Magnolia, IKEA, or Wayfair.
What Improvements Were Made on the Interface Based on Evaluation Results?
(Before User Evaluation)
(After User Evaluation)
(Before User Evaluation)
Firstly, users were having usability issues finding the most efficient approach to locating the “Takai Ribu” ceramic planter from the homepage. The solution to making the call-to-action button more noticeable was changing the color of the button to a bold orange to catch the attention of the user from the promotional section.
(After User Evaluation)
Secondly, a common pain point of the payment webpage was users overlooked the first step of selecting a payment option and trying to complete payment information selecting to the terms and conditions. The solution was to change the color of the button to green to catch the user's attention and stay consistent and cohesive within the webpage.
(Before User Evaluation)
(After User Evaluation)
Thirdly, user participants found returning to the homepage challenging. To make the returning home process less confusing, a bold green “Back to Home” button was included that takes users directly from the confirmation page to the homepage.