Case Study: ShopMain
Since Canadian online shoppers spending is expected to increase by 50% between 2014–2019, Main Street is planning on preparing digitally for this significant change in customer behaviour.
The Opportunity
ShopMain would like to:
- bring the Main Street shopping experience online to enable customers to shop from home
- build an increased interest in shopping local
- increase community engagement
Along with these, they require specific features on a web-based tool that anyone can access:
- an e-commerce store for Main St shops
- a checkout process where all shops can integrate
- a tool that will provide users the ability to define what their interests are in shopping
- recommended products will be customized based on several factors
- shipping considerations, given the different type of model
- progressive flow — taking the user step-by-step in determining their shopping needs
…and more underlying opportunities!
Through organizational research, I’ve found that ShopMain:
- Lacks of online presence
- Exhibits unappealing layout and content
- Provides limited information on Main Street’s directory
I explored the domain as well…
…and have found that:
- ShopMain is so far behind compared to nearby neighbourhood pages
- An updated, revamped site can potentially increase community engagement & neighbourhood attraction
User Research
To delve deeper, I prepared sets of questions for an online survey, and shared them on Facebook, mainly targeting people who shops on Main St or frequently shops online.
Out of 20 survey responses, I contacted 5 of those responders for user interviews. After gathering all research information, I organized those data into an affinity diagram.
Eventually, I was led to create the persona of Jennie Lyons who sums up all the data I’ve collected.
To round up the research process, I brought about use cases based on other potential users I’ve found through the survey responses. This in turn helped me create a features list for ShopMain’s website.
Planning
During this stage, I mapped out flows on how users are going to achieve their goals using ShopMain’s website.
Then, I drafted a site map, so I have a clear idea on the website’s hierarchy.
The Solution
So, how can we bring Main Street to our users?
Design + Usability Testing
Now that I have a framework for ShopMain’s website, I quickly drafted UI sketches as my paper prototype for usability testing.
Based on my research, most users want this tool to be mobile-optimized and straightforward, hence this design is built with a mobile-first approach, clean and minimalistic.
After having this tested among a few users, my findings and changes were:
- there were no filter for stores/styles = updated filter options to have Stores & Styles
- there were many layers of navigation to get to product page = changed from a Broad to a Deep hierarchy
- unrelated navigation/options can be distracting to the shopping experience = created a clickable dropdown menu to hide navigation on the left hand-side
- The About page isn’t relevant to the shopper, and may only be to business owners = hidden the About navigation item under the main drop-down menu
Prototype
Requirement: Mid-Fidelity Prototype | Tools: Sketch, Invision
After completing the flow for my persona’s main goal and adding in screens for the secondary goals, my digital prototype is now ready. Here are scenarios to keep in mind when navigating the website:
You are a first-time ShopMain guest who wants to purchase a little black dress. As you’re searching, you find a red polka dot dress that you’d like to purchase as well. Have these items delivered to you using your Facebook account.
You are a foodie who only visits Main Street for its eclectic cuisines and craft beers, because you rarely have the time to check out anything else in the area. You know that you’ve been missing out on the whole Main Street experience, so on your next venture out, you’d like to find nearby shops close to a restaurant you haven’t eaten at.
Summary
The recreation of ShopMain into an online shopping experience will very likely, if not surely, supplement sales of Main St shops.
Creating a website that is clean and simple will provide the customer more time to find what they want with no hassle, so they have more room for other things in their busy lives.
Final Iteration
I decided to apply what I’ve learned about UX Design over the last 10 weeks, so I made a high fidelity version of my ShopMain website. Through more testings as well, I figured to change a few things, such as:
- The hidden menu might get missed as the clickable arrow isn’t a standard convention. So, I decided to have them under a hamburger menu.
- I made use of the concept of progressive disclosure to show/hide icons that are only relevant during the specific time in the user’s journey.
- I broke down the About page into a carousel of images on the homepage, because a dedicated page for it was never valuable to the user based on testing.
- My colour choices were based on Main Street’s vibe which is rich, bold and vibrant.
Now, without further ado, here’s my finished product! Click on the image below to access the prototype.
