Design an e-commerce website for a local party supply store
Taking Razzle Dazzle’s store experience online.
Timeframe: 2 weeks solo project
My role: UXUI Designer
Methodology: Stakeholder Interview, Requirements & Constraints, Compeitive Analysis, Information Architecture, Card Sorting, Prototyping feedback & testing,
Tools: Adobe XD & Axure
The challenge
Design an e-commerce website for a local party supply shop.
The business
Razzle Dazzle is a small local party supply shop in the central area of the city. There is only one outlet as they are a small local business. It sells a wide range of products from a variety of suppliers at competitive prices. Customers include those planning birthday parties, wedding,s and event planners.
The brief
Design Razzle Dazzle’s e-commerce website so that it incorporates their business goals and values:
- Maintaining brand image and shop appeal
- Providing great customer service
- Offering the best range of reasonably priced products from a variety of suppliers
Some prioritization work has already been done with the client. The website must have the following:
- Clear ways of locating specific products
- An efficient way of purchasing one or more products
- Steer customers towards popular products
- Product descriptions for each item
- Allow customers to contact the business
Discovery & Research
Competitive Analysis
Selecting 3 other similar-sized party stores and 1 big e-commerce business, I analyzed the 4 competitors’ websites and compared their strengths and weaknesses in order to identify opportunities where Razzle Dazzle could thrive and areas that needed to be worked on.
The objective
A website for customers to easily order products online and pick them up at the store or have their orders shipped to their work/home address.
Focus on user-centered design methods that would result in an increase in sales and great customer service.
Considerations for designing Razzle Dazzle’s e-commerce platform:
- Focus on flexibility and providing an easy-to-use navigation system.
- Provide an efficient checkout process to save users time and allow for the easy purchase of products.
- Build on their small-shop brand image and appeal.
- Provide detailed information to ensure proper product selection.
- Include a product search bar to easily find specific products.
- Ensure that customers can easily contact the store.
The problem statement
Need — Rachel wants to host a unicorn-themed birthday party for her daughter.
Goal — That her daughter has the best time ever.
Task — Buy unicorn balloons and garlands in time for her 4th Birthday party in 7 days.
Solution statement
Rachel needs to buy unicorn balloons and garlands for her daughter’s birthday so that she will have a great time and a memorable day.
Information Architecture
Moving on to IA, which is the structure of the website, I started by carrying out 2 Open card-sorting tests (the user names the categories) and followed that with 1 Hybrid card-sorting test (named categories were given). This allowed me to have a better understanding of what the hierarchy of the categories might look like.
My participants created a total of 30 categories, with a median of 6 categories each. I was able to narrow it down to 4.
Finally, I did a Tree Testing to confirm the 4 categories appropriate for the website.
Visual designs
Comparing the websites of similar competitors:
- The sites appeared rather “kiddish” and didn’t feel professional.
- Most were messy looking with different sections “screaming” for attention all at once.
- There were too many “fancy” fonts that were hard to read.
This is probably why party supply consumers don’t spend more than 10 minutes browsing for what they need before making a purchase.
Site map
To work out how the site map would look, I started off by looking at my user flow and listing what needed to show up on the screen as well as what the user would need to see on every page, such as the product categories created earlier in the card-sorting exercises, to move through the site easily.
Ideation
Key features to focus on:
- Top navigation bar — to appear on every page
- Search bar
- Logo & Contact us — for both the user and the business
- Product categories — including a new in or popular section
- Cart
- Quick checkout
- Footer — With contact details, help section, FAQs, and Ts&Cs appearing on every page to ease navigation
Wireframes
At the beginning of my design process, I started with mid-fidelity wireframes on Adobe XD. To showcase the colourful party products, I went with a white background with a 4-column grid and kept every element simple.
Then I used Axure to prototype it for testing. I really disliked Axure at this point — and it didn’t help that I didn’t understand the tutorial. Attempting to prototype this website in 2 days was a very steep learning curve. Of course, I made it to the testing stage weeping tears of joy — literally!
Prototyping & Usability Testing
Carrying out usability tests allowed me to practice my facilitation and observation skills, and understand how users would navigate the prototype as well as recognize the problems that might occur. Some of the criteria for testing included learnability, efficiency, memorability, error handling, and satisfaction.
Key insights from Usability testing
- 2/5 testers wondered if buntings should fall under Decorations or Party Accessories. Need to re-label for clarity.
- 4/5 testers felt that “Contact us” should be at the top of the website.
- All the testers found the checkout page confusing; the order of its appearance wasn’t right.
- No one noticed or really read the ratings and reviews on the site.
- The grey navigation bar needed to be more visible; 2/5 of testers felt it was hard to read.
- No one was interested in a loyalty programme as they only visit the store once or twice a year.
With these insights in mind, I went back to fix the wireframe and prototype. In the new iterations, I removed the ratings and reviews and renamed the two confusing categories for clarity.
Responsive adaptation
Since it’s a small local shop, they don’t have the budget for a mobile app at this point, so we have to make some responsive adaption for users who will be shopping on the go.
On the mobile site, I switch to a 2-column grid from the 4-column grid for better visibility. The rest of the content reflows while the columns are stacked vertically.
The navigation bar is now compressed into a multi-level toggle (hamburger) at the top right and the search button now takes a more prominent position. Buttons are bigger for ease of use on the mobile site as well.
Next Steps
- Do more usability testing with party store customers and surveys to measure success and points for improvement in further iterations.
- Provide a service page where you can fill in the number of guests and the kind of party you are planning. It should also advise users on the amount of partyware to order to minimize wastage as the client has commented that customers tend to buy too much.
- Also, provide a service to collect used decorations and to donate the surplus partyware to the community or a charity — a voucher/discount is given to customers for future use.
Note: I did this UX study as a student at General Assembly in Singapore (September to December 2020). I enjoy solving problems by seeing from the eyes of users with their needs, and designers with their limited resources. I believe that only through such empathy, can one be a good User Experience Designer.
