Party With Me is a fictional eCommerce website
Role: Solo Project
Timeline: 2 week sprint March 2022
Type: Website
Tools: Figma, Zoom, Optimal Workshop, Slack
1 x User Survey
6 x User Interviews
3 x Mid-Fi Prototype Testing
The Problem
Party With Me’s eCommerce website has plenty of visitors, yet very few completed purchases.
The Solution
A more streamlined navigation, and a reduced number of clicks from adding an item to basket until completing the purchase.
THE PROCESS
UX Skills
Discover: Competitive & Comparative Analysis, User Surveys & Interviews, Affinity Map
Define: Card Sorting, User Persona, User Journey
Develop: User Flow, Wireframing, Sketching, Prototyping, User Testing
Deliver: Mid-Fidelity Prototype, Presentation (10 mins)
The Brief
Party With Me wanted an improved eCommerce website to showcase their products whilst maintaining their brand image “small shop” appeal and great customer service.
Some prioritisation work had already been done, and the website must:
Have multiple clear ways of locating specific products.
Include a product description page.
Have an efficient way of purchasing one or more products.
Steer customers towards popular products.
Allow customers to contact the business.
Overview
My second UX Design project at General Assembly, I was tasked with creating a mid-fidelity prototype for a fictional e-commerce site called Party With Me.
This was a solo project where all that I had previously learnt was to be implemented here.
Once upon a time, long ago in 2017, in a far away land named “Ley-ton-stone” a local business specialising in party supplies was established in the heart of the community.
Things were good for “Party With Me” but they could be better, their eCommerce website got the hits but very few completed purchases.
They needed help, and in sheer desperation they turned to me.
Competitive Analysis
It turns out there are quite a few online party shops out there and the majority of them have an e-commerce site very similar to that of “Party With Me,” quite dated and liable to give you a headache if you stare at them for too long!
The exception being “Party Delights” the Rolls Royce of online party shops, I was starting to get an idea of the industry.
What works: Clear and tidy navigation bars.
What doesn’t: Busy and overwhelming homepages.
Research Screener Survey
But this isn’t about me, it’s about the users, so the next step was to conduct a quick survey to find more general trends.
With 29 responses I thought I’d done rather well, however it became pretty clear that my demographic was quite narrow, mostly women between the age of 25 and 34 without kids.
So I narrowed it down even further to find interview contenders, specifically the ones who:
Visited party shops on more than just the special occasion.
Who shop online.
Who would choose to buy from a local business.
Interview Results
After some careful narrowing down, I conducted 5 user interviews over Zoom with some open questions on their party store habits but more specifically:
Why are people not buying products online despite visiting the website?
Can you give great customer service online?
How can we show we only source quality products?
Stephanie
AGE: Early 30’s
LOCATION: East London
WORK: Small Tech Start-up
“Work hard, party ..if I have to”
User Persona
Meet Stephanie, or Steph as she prefers. We all know a Steph, perhaps you even are a Steph!
She’s the kind of person who is forced by her friends to attend fancy dress parties, reluctantly buys a costume at the last minute, says to herself “I’m only staying for an hour” but ends up having the time of her life!
When it comes to party store shopping her goals are to get something as quickly as possible.
She's a busy woman who doesn’t have the time to peruse websites all day.
She needs next day delivery as it will most certainly be a last minute purchase
and if it's a local business she’ll soften as she understands that struggle.
Her pain points are clear. She hates when there’s no next day delivery or click & collect, and demands good customer service for any information she requires on an item.
If it’s 100% polyester Steph’s not buying, not after last Halloween.
Problem Statement
“Stephanie needs a more simple way of browsing party supplies so that she can find what she wants and complete her purchase”
The How Might We’s
HMW show we’re a local business with an emphasis on customer service?
HMW simplify our user’s experience so more purchases can be completed?
HMW notify customers of fast delivery availability?
User Journey
A user journey was created for Stephanie to truly understand her struggle with online costume shopping. With any luck we’d understand her hatred a little better, and who knows, some opportunities might arise.
Opportunities
Create a simplified homepage with fewer navigation options and a semblance of a colour palette.
Keep size options within the product page.
Keep the navigation steps to a minimum.
Add description of product, materials listed and additional photos. Customer reviews would be very helpful with their images alongside.
Give relevant delivery options on homepage. E.g. Order by 3pm for next day delivery.
Information Architecture
An inventory list was then given, thankfully there were fancy dress costumes on it as this was the direction we were headed regardless!
But how could all 70 odd items be sorted into user centred categories, I know how I would sort them, but I’m not like Stephanie, fits of rage aside!
A hybrid card sort was sent out in a similar fashion to the surveys except this time the users chose how they would categorise the more relevant ones and a secondary navigation bar was born!
Sketching & Wireframing
How should this website look?
I was a little scared after Steph’s original journey I must admit.
So I crazy 8’d some ideas down that I hoped would solve the problems, then turned the best of them into slightly more coherent sketches, highlighting the navigation, which played a big part in the original journey.
Homepage v1. Wireframe
A more simplified homepage with just 5 headings in the primary navigation allowed for a large hero image and “About us” section which was highlighted in the brief.
Homepage v2. Wireframe
A second homepage wireframe was sketched with large imagery as that was something that came up in the interviews.
Ultimately the decision was made to stick with the original wireframe as the “About us” section allowed Party With Me to reinforce their “we’re a local business who cares” ethos.
Mid Fidelity Prototype Walkthrough
User Testing
Next up was User testing, how would others fare with my website, ultimately I would like them to be able to find their desired costume, select the right size and checkout all under 5 mins. Seems simple enough.
Logistically, as this was a remote course and time was an issue, the testing was done over a moderated Zoom chat. Where the user would use Figma to click through the prototype on their shared screen.
The Task
“I would like you to find a Wonder Woman costume for halloween, it’s very last minute and you need this by tomorrow!”
Testing results
They were in, and it wasn’t quite as confusing a site as I had thought, as long as they only followed my happy path … And shopped with Mastercard!
Entire list of navigation steps taken in the breadcrumbs bar, helps the user identify where they are more clearly.
More product materials information requested by 2/3 users, if they’re unsure what it’s made from they won’t buy it.
Image zoom icon feature was missed 2/3 times, so the image now enlarges when you click anywhere within the frame and gives a more detailed view.
Show the full list of breadcrumbs so the user knows how many steps are left in the checkout stage.
Delivery info stage is unclear even if you select the “same as billing address” option, drop down menu now included.
Moving Forward
Due to time constraints and the brief demanding mid-fi only the prototype was never developed any further than this. However, I created a concept and style guide for a high-fidelity version of the site.
Colours
So on to moving forward, a colour palette was selected with purples and golds given off party vibes and the opacity toned down to 50% as it was quite a harsh colour palette.
Typeface
For the typeface I chose “SignPainter” for my headings as it has a fun party style to it!
For the subheadings Avenir was selected for its ease of legibility for the large bodies of text.
High Fidelity Mock Up
Now this I what my Hi-fidelity site would look like when all those factors are combined with the goals to be moving forward including:
Smaller navigation buttons.
A clickable breadcrumbs bar.
An accessories carousel with similar items relating to the one on the product page. And who doesn’t love to accessorise. Steph, Stephanie doesn’t like to accessorise.
Conclusion & Key Learnings
This was my second ever UX project and my first attempt at working with eCommerce and I guess the only way from here is up!
The research side was thoroughly enjoyable having friends, and friends of friends regaling me with their own nightmare stories when it came to shopping for party supplies.
Once it came to the sketching and prototyping phase though it became a whole different ball game! Still a relative newb to Figma I’m not going to be too critical of myself, but there’s a lot of things I’d have done differently.
“Borrowing” ideas from my favourite eCommerce sites during the competitive analysis phase would be one.
The checkout phase could be made a whole lot more simple and streamlined, a notion that was brought up during the user testing phase but was too late in the day to implement.
Check how the site would look on a normal laptop screen and not my giant monitor is a huge lesson that luckily I learned at this stage and not further down the line! Checking on various screen sizes is something I’m constantly doing now. Who knew you could actually learn from your mistakes!
So there it is, my first attempt at eCommerce. I can assure you I’ve improved a little since this project, and I’ll never look at my local party shop in quite the same way again.