Party Supplies E-commerce — UX Case Study
--
2 weeks | Solo Concept Project
Challenge
Design an e-commerce website for a local London business.
UX tools used: Contextual Inquiry | Site Visit | User interviews | Competitive Analysis |JTBD| User flows| Card sorting| Site Map| Paper prototype | Usability testing | Wireframes | Hifi Interactive Prototyping
The Business
All That Glitters is a party supply store located in Hackney, a part of a dynamic community since 1998. They sell a wide range of products from a variety of suppliers at competitive prices. Customers vary including locals, event planners and small businesses.
Brief
Design All That Glitter’s e-commerce website with consideration to their business goals, values and brand personality:
- Showcase highly-curated products
- Focus on hand-picked quality over quantity
- Maintaining its brand image and ‘small shop’ appeal
- Great customer service
- Brand personality — playful, bright, friendly, affordable, informal
User Research
Contextual Inquiry
Starting off the project with user research, we carried out a site visit to a party supply store in Dalston (close to Hackney) called Party Party. There were a lot of similarities between All That Glitters and Party Party. They are both a local ‘small-shop’ party supply stores, who employ local staff and are great at face-to-face customer service.
During my time at the store, I was able to see the type of products that were sold there and spoke to staff members to better understand their business. Through user interviews and observations, I uncovered useful insights during this research process.
Insights
Observations
- Most shoppers were locals
- Products were arranged in clear categories in their aisles
- Staff were attentive and ready to help out
User Needs
- Last-minute shopping — for events happening on the day to 1weeks time
- The convenience of buying in person, it is instant
- Reasonable pricing
- A wide selection of products & availability
Pain Points
- Dealing with shipping delays & returns is not ideal
- Quality issues — in stores you get what you see, unlike online
- Lack of stock or sizes available in stores
Quotes
Competitive Analysis
To start the competitive analysis process, I brainstormed both direct and indirect competitors that would be beneficial to explore on this project. Selecting 2 smaller party stores and 2 big e-commerce businesses. I then analysed the 4 competitors websites and compared their strengths and weaknesses. In order to identify opportunities (green) where All That Glitters can thrive and threats (red) areas where they need to work on, as shown below:
Insights
Designing ATG’s e-commerce website, I must consider:
- Improvement of the navigation system, flexibility and ease of use
- Logistics — Offering fast deliveries, collection in stores and free returns
- Building on their ‘small-shop’ brand image and appeal
- Offering a relevant amount of information on products online eg. more photos and details
The Opportunity
A website for customers to be able to order products online and get their orders shipped to their work/home address or picked up at the store.
- Focusing on user-centred design methods
- With a focus on great customer service
Solving the Problem
Using the Jobs To Be Done framework to help with my design process by clearly identifying the purpose for the customers who are buying the products on the website. It helps me clarify the functional, emotional, personal and social aspects related to the goal of the user.
Situation — When it is my daughter’s 4th birthday.
Need — I want to host her a pink and hearts themed party.
Goal — So that my daughter will have the best time on her birthday.
Task — Buy your child a pink heart-shaped balloon in time for her 4th Birthday party in 2 days.
Job Statement
When it is my child’s birthday, I want to host a party for her, so that she will have a great time and a memorable day.
User Flow — Happy Path
To design the user flow, I’ve picked a scenario to work from
“A parent is planning to host a party for their child this weekend and wants to make sure all of the supplies, including decorations and paper plates, are ready to go.”
The user flow helps identify the process the user needs to go through to fulfil a task. And the happy path indicates the easiest route that the user may take. This is important for me to pinpoint the minimal amount of screens I’ll need to design for the website, for it to work. It also builds on the basis of navigation for the website.
Information Architecture
Moving on to IA, which is the structure of the website. I started by carrying out 12 open card-sorting tests (the user names the categories) and following that with 3 closed card-sorting tests(named categories were given). This allowed me to have a better understanding of how the hierarchy of the might look like.
Open Card-Sorting
- 42 unique categories were created!
- I was able to narrow it down to 8
Closed Card-Sorting
- 8 categories given to users
- I narrowed this down further to 6 categories
Finally, I then tested with 3 more users to confirm the 6 categories were appropriate for the website.
Site Map
Working out how the sitemap would look like, I started off by looking at my user flow and listed every screen that is needed. With consideration to the hierarchy of information, the global nav and what the user would need to see on every page, to allow them to move through the site easily.
Using the categories created earlier in the card-sorting exercises, I’ve included them in the products category.
The Solution
Now working on the prototype, I started off the process by researching design patterns in other reputable e-commerce websites. Looking at their use of hierarchy, placement and iconography.
Ideation
Sketching my ideas on paper allowed me to better decide where things would go on the prototype.
Key features
- Top navigation bar —which will appear constant on every page
- Search bar
- Logo & about section — for the user to get to know more about the business
- Product categories — including a new in or popular section
- Cart
- User details — Log in / Register
- Footer — including contact details, help section, FAQ and t&c’s, appearing on every page to ease navigation
Prototyping
Paper Prototype
First, I produced a low-fidelity paper prototype to test the website through my happy path (user flow) before moving on to wireframing digitally.
Usability Testing
Carrying out usability tests allowed me to practise my facilitation and observation skills. Most importantly to understand how users navigate through the prototype and where problems may occur. Some of the criteria for testing include — learnability, efficiency, memorability, error handling and satisfaction.
Insights
- 5/5 found it easy and straightforward to find a product and purchase it
- 3/5 found the check out page slightly confusing, the order is not right
- 4/5 wanted to see a confirmation once the purchase was made.
Wireframes
Iterations
I went through 3 rounds of iterations with my mid-fidelity wireframes, plus 1 for hi-fidelity. After every round of usability testing, key insights were found and improvements were made to the prototype to enhance the user experience.
Insights key:
- Green — positive
- Red — problem (to change)
Home page
Product Description page
Check Out page
Prototype
View my interactive prototype → here ←
Hi-fidelity
With the limited time I had on this project, I only managed to finish the homepage in hi-fidelity. Adding some colour, imagery and type to give a better sense of what the All That Glitters brand is about.
Next Steps
- Focusing on higher fidelity prototype, adding UI elements to effectively showcase brand values, through the use of colour, imagery and copy
- Usability testing with party store customers and conducting surveys to measure success and points for improvement in further iterations
- Think about how this desktop design may look like on other devices. eg mobile or tablet, as the number of users shopping through these devices, are continuously growing
Learnings
- I started this project assuming that it would be a breeze, as I have experience working at multiple e-commerce businesses, however, I was very wrong and it was a lot more complex than I originally thought!
- Good navigation is well thought through and a very difficult job. Doing the card sorting exercises made me realise how differently people choose to categorize things and this is such a big consideration when building the structure of the website, the sitemap.
- Good design is good business — it is so important that an e-commerce website works VERY well (also, Thomas Watson)
Thanks for getting this far! Any questions feel free to get in touch or check out my website. ✨Kiki
