top of page
Introduction
Oro Apothecary
A brand and responsive website redesign for a small e-commerce business that sells apothecary items and vintage goods.
Duration: February 2023 - April 2023
Timeline: 80+ Hours
Client: Evy Orozco
Company: Oro Apothecary
Tools: Figma, Maze.co, Canva, Google Meet, Google Forms
My Role: Product Designer
Skills: User Research, Wireframing, Prototyping, UI Design, Usability Testing, Logo Design
Background
Oro Apothecary is a local business based in Chicago, Illinois. Initially starting off as an eco-friendly custom soy wax candle business, it has since expanded into selling air fresheners, wax melts, and vintage clothing and accessories. The owner prides herself in living an eco-friendly lifestyle and wants to be as resourceful as possible. By recycling, thrifting, and refurbishing items, she’s able to breathe new life into secondhand goods. Goods are sold predominantly online and through local pop-up shops. It’s been a little over 2 years since the website first launched, so the owner is looking to update the company's website and create a better overall user experience.
Objective
Redesign a responsive website that meets the client's goals and improves the overall user experience.
Scope
Create an MVP within an 80 hour time constraint over 4 weeks. Include a case study presentation and high-fidelity prototype to hand off to developers.
Devices
Desktop
Mobile
Discover
Discover
Why
-
Learn about Oro Apothecary as a business and compare alongside its competitors
-
Identify specific pain points, challenges, motivations, and needs when shopping for candles
-
Determine the client's business goals and vision for the redesign
-
Determine what is needed to provide a better shopping experience for users
How
-
Client interview
-
Screener survey
-
Competitive analysis
-
User interviews
-
Affinity mapping
Client Interview
-
Met with client, Evy Orozco, to determine her business goals and vision for the redesign.
Goal of Redesign:
-
Drive traffic to website.
-
Increase sales.
-
Fresh look and design.
-
Improve shopping experience.
-
Redesign logo so that it's more aligned with future of brand.
Takeaways:
-
She used a developer to build her current website.
-
The website was built on Shopify.
-
She manages minimal updates on her website, so she would prefer to stick with Shopify since she already knows how to use it.
Screener Survey
-
Created a screener survey using Google Forms.
-
Gained preliminary research, such as demographic information for individuals who are interested in candles and how they prefer to shop for them.
-
Identified the target audience for my user interviews.
Takeaways:
-
100% of participants identified as female.
-
90% of participants like online shopping.
-
80% of participants shop for candles online and in store.
Competitive Analysis
-
Determined current competitors - direct and indirect.
-
I wanted to focus on bigger companies that sell candles (Bath & Body Works and Etsy), as well as smaller businesses too (Chicago Candle Co. and 10 Acre Farm).
-
Identified their strengths and weaknesses, what type of shopping experience they have, and how they display their products for sale online.
Takeaways:
-
In order to increase user engagement and improve the overall user experience, my design must:
-
Provide lots of high-quality photos
-
Product reviews
-
Detailed scent description
-
Have an easy browsing and shopping experience
-
User Interviews
-
Interviewed 5 users within the target age group of 25 - 34 years old that was conducted either in-person or via Google Meet/FaceTime.
-
Empathized with their pain points and challenges when shopping for candles online and when using the Oro Apothecary website.
-
Identified their motivations and needs when shopping for candles online and when using the Oro Apothecary website.
Takeaways:
-
Pain points from Oro Apothecary website:
-
Non-visible CTA buttons
-
Non-responsive links
-
Confusing "vintage" section
-
“A link not working can be irritating as a consumer because you can’t view or shop.”
- Molly (Female, 31 years old)
-
Motivations when purchasing candles online:
-
Easy to browse and shop
-
Convenience
-
Availability of products
-
“It’s the convenience of just clicking what you want, adding it to the cart, and doing a breeze checkout.”
- Elaine (Female, 34 years old)
-
Needs when purchasing candles online:
-
Product photos
-
Detailed product information
-
Scent information
-
“If it’s a product I haven’t tried before, I don’t know if I’ll like the scent or not. That’s what’s hard about buying candles online.”
- Marla (Female, 28 years old)
Define
Define
Why
-
Define the problems users face when purchasing candles online
How
-
POV statements
-
HMW questions
-
User personas
POV Statements
-
Actionable statement that is addressing the problem we're trying to solve
-
I’d like to explore ways to help individuals better visualize the products they are browsing prior to purchasing on the website.
-
I’d like to explore ways to help individuals better interpret the scent of each candle prior to purchasing on the website.
-
I’d like to explore ways to help individuals have more access to detailed product information so they can make informed purchases on the website.
HMW Questions
-
Reframe question in a way that will help us generate solutions to the problem
-
How might we help improve the browsing and shopping experience for candles and vintage clothing and accessories in order to purchase the product?
User Personas
-
Identified user's goals, motivations, needs, and frustrations when purchasing candles online.
-
Created a fictional character that represents the target audience and helped me further empathize with the user and the problems they're facing.
Ideate
Ideate
Why
-
Brainstorm ideas and develop solutions to help solve our problems
How
-
Feature set
-
Sitemap
-
Task flows
Feature Set
-
Brainstormed possible features to include in the product.
Takeaways:
-
I kept my user persona in mind and thought of what features to include and separated them into 4 separate categories based on level of significance:
-
Must have
-
Nice to have
-
Surprising and delightful
-
Can come later
-
-
I prioritized what was needed to deliver an MVP and focused on including those in the final design.
Sitemap
-
Created an updated roadmap of the website, while still keeping elements from the old sitemap and ensured priority features were included.
Task Flows
-
Followed a user's journey through 4 specific tasks.
-
I discussed with my mentor and we decided to design flows that will show a user's shopping experience from beginning to end, while also highlighting the different products that Oro Apothecary has to offer.
-
Task #1: Browse all candles then view the Spring Collection. Add 1 candle called “Lavender Haze” to cart.
-
Task #2: Search “Vintage” and add 1 vintage purse to cart.
-
Task #3: Customize a #3 special occasion candle that is gold with glitter. Add 2 candles to cart.
-
Task #4: Remove all special occasion candles from the cart. Then complete checkout with items in cart as a new guest.
Design
Design
Why
-
Establish structure, determine flow of design, and validate prior to applying UI design
How
-
Low-fi Wireframes
-
Mid-fi Wireframes
-
Logo Redesign
-
UI Kit
Low-fi Wireframes
-
After developing my task flows, I sketched out key screens for each flow using my iPad.
Mid-fi Wireframes
-
After receiving feedback from my mentor, I proceeded with developing my low-fi sketches into mid-fi wireframes using Figma.
Logo Redesign
-
During our client meeting, we discussed redesigning the logo to fit the future needs of the business.
-
Evy plans to expand the business by including other apothecary items, such as air fresheners, wax melts, custom candles, and more. She also plans to include more vintage goods and accessories. It was important to her to keep the brand name as "Oro", which derives from her last name, and to also keep the same brand colors of pink and gold.
-
After showing her a couple of different designs, we finally decided on a logo that highlighted "Oro", included what type of products the business has to offer (apothecary items and vintage goods and accessories), incorporated the brand colors, and also showed that the company was eco-friendly.
-
Using Canva, I was able to design a new logo for the business.
Before:
After:
UI Kit
-
I compiled a UI Kit, which contained all the elements that I applied to the UI of my high-fi wireframes.
-
During our client meeting, the client expressed that she still wanted to keep the brand colors as gold and pink. I incorporated lighter shades of each color to function as neutrals and secondary colors.
-
She wasn't too concerned about typography and gave me freedom with this, as long as it was clean and easy to read. After researching different typography combinations on Pinterest and other e-commerce businesses, I decided to use a serif and sans-serif combo of Lora and Lato. They were both simple, fun, easy to read, and paired well together at different weights.
Test 1
Test 1
Why
-
Validate product by testing mid-fi wireframes on potential users prior to applying visual design and refine based on any feedback that was received
How
-
Usability Testing
-
Priority Revisions
Usability Testing
-
After receiving feedback and performing any necessary iterations to my mid-fi wireframes, I tested my flows on potential users to make sure they were easy to navigate before moving on to designing high-fi wireframes.
-
I performed un-moderated usability testing using Maze.co for all 4 task flows on 3 users.
Task #1: Browse all candles then view the Spring Collection. Add 1 candle called "Lavender Haze" to cart.
Takeaways:
-
CTA button wasn't clickable.
-
Fixed by making it clickable.
-
-
Filter button was confusing to filter through to “Spring Collection”.
-
Fixed by creating a side navigation bar to access different collections, as well as a top navigation bar.
-
Task #2: Search "vintage" and add 1 "vintage purse" to cart.
Takeaways:
-
Straight-forward and easy to complete this task.
Task #3: Customize a #3 special occasion candle with glitter and gold. Add 2 candles to cart.
Takeaways:
-
Difficult to exit drop down menu for color and embellishment.
-
Fixed by removing extra step to close drop down menu.
-
Task #4: Remove all special occasion candles and complete checkout with items in cart.
Takeaways:
-
Straight-forward and easy to complete this task.
-
1/3 users had difficulty checking out.
-
Fixed by making sure all target areas were clickable.
-
Prototype
Prototype
Why
-
Create a model that simulates how a user will experience the product
How
-
High-fi Wireframes
High-fi Wireframes
-
I used the UI Kit to adapt my mid-fi wireframes into high-fi.
-
After receiving feedback and performing any necessary iterations, I created a prototype using my high-fi wireframes that will be used for usability testing.
-
In order to showcase that the product was responsive to different devices, I designed 3 flows in desktop and 1 flow in mobile.
Desktop:
Macbook Pro 16
Desktop 1_V1
Describe your image
Special Occassion_Mockup
Macbook Pro 16
1/15
Mobile:
iPhone 14 Pro
iPhone 14 Pro-2
Mobile_Mockup 13
iPhone 14 Pro
1/13
Test 2
Test 2
Why
-
Validate product by testing the high-fi prototype on potential users and refine based on any feedback that was received
How
-
Usability Testing
-
Priority Revisions
-
Final Prototype
Usability Testing
-
I tested my high-fi prototype on 5 users within the target age group of 25 - 34 years old that shop for candles online.
-
I performed moderated usability testing that was conducted either in-person or via Google Meet/FaceTime for all 4 task flows.
-
Success metrics were determined by:
-
User successfully completed each task.
-
User was satisfied with interface of product and found it easy to use.
-
User had minimal to no errors while completing each task.
-
User was able to complete each task within 2 minutes.
-
-
Task flows:
-
Task #1: Browse all candles then view the Spring Collection. Add 1 candle called “Lavender Haze” to cart.
-
Task #2: Search “Vintage” and add 1 vintage purse to cart.
-
Task #3: Customize a #3 special occasion candle that is gold with glitter. Add 2 candles to cart.
-
Task #4: Remove all special occasion candles from the cart. Then complete checkout with items in cart as a new guest.
-
Takeaways:
-
5/5 users were able to compete each task successfully.
-
5/5 users found that the interface was simple and easy to use.
-
5/5 users completed tasks with minimal errors.
-
5/5 users completed tasks quickly under 2 minutes.
-
5/5 users were very satisfied with their overall use of the product to complete each task.
-
Errors:
-
3/5 users had a hard time clicking the text field within the search bar.
-
Priority Revisions
-
After collecting feedback from users, I prioritized what was important to improve the usability and interface of my product then made iterations to my high-fi wireframes.
Before:
After:
Iterations:
-
Decreased size of banner.
-
Adjusted text sizes of headings in hero.
-
Decreased size of hero image.
-
Adjusted height of navigation bar.
Before:
After:
Iterations:
-
Adjusted text sizes of heading.
-
Adjust size of product images.
After:
Iterations:
-
Made search bar more clickable.
Before:
After:
Iterations:
-
Added “Add to Cart” button to add item directly to cart.
-
Displayed products by “Best Match” under sort.
-
Center aligned name of product and price.
-
Updated side navigation menu to display categories and other filters.
Before:
After:
Iterations:
-
Added “Add to Cart” button to add item directly to cart.
-
Displayed products by “Best Match” under sort.
-
Added another pathway if user decided to use one of the categories to filter.
-
Right aligned name of product and price.
-
Updated side navigation to display categories and other filters.
Before:
After:
Iterations:
-
Removed filter icon and kept sort by category for customer reviews.
-
Displayed reviews by “Most Recent” under sort for customer reviews.
After:
Iterations:
-
Added hover over numbers.
After:
Iterations:
-
Increased weight and text size of “OR”, above contact information.
Final Prototype
Conclusion
Conclusion
Conclusion
-
Overall, I believe that this prototype was a success because all users were able to successfully complete each task and found the navigation to be easy and familiar. I also learned a lot and was able to identify areas of improvement for further testing and development of my design. I kept the user's needs at the forefront, while also keeping the client's business goals and vision for the redesign in mind too. Evy was a pleasure to work with and enjoyed seeing the final product. I hope that we can connect again in the future so that I can complete the design and pass it along to a developer once she's ready to fully redesign her website.
Future Considerations
-
Due to the 80 hour time constraint over the course of 4 weeks, there were a few things I would do differently if given the time and resources:
-
Interviewing a larger and more diverse group of individuals, especially more of her customer base if possible, so that I can gain more insight.
-
Conducting usability testing with more people to get more feedback.
-
Continuing to build out the remaining flows.
-
Continuing to iterate and improve the overall functionality and interface of the product.
-
Working with a developer to finalize the product and bring it to life.
-
bottom of page