Shopwest4th.com
UX Design — Webapp
Locals helping Locals
West 4th is Vancouver West Side’s preferred shopping destination. The Kitsilano West 4th Business Improvement Association is a non-profit group that has been responsible for the neighbourhood’s marketing, promotions, and operations since 2001. It is made up of 240+ business members and more than 150 commercial property owners. In order to keep up with the popularity of online shopping, the neighbourhood’s ShopWest4th website was updated to include a personalized shopping webapp.
Business Objective
Promote increased sales in West 4th boutique stores by leveraging the popularity of e-commerce to deliver a customized online experience.
Secondarily, generate interest in shopping local and create a sense of community around this experience.
Understanding the problem
As a part of my user interviews, I was interested in understanding whether the problem was directly associated to competition from online retailers. Or, was it a result of the general perceptions people had about the neighbourhood. When asked to describe the neighbourhood, some of the words that came up included: yuppies, unaffordable, health conscious, organic, yoga, expensive real estate, inconvenient, and lacking. Local or unique were not concepts that were top of mind when describing this neighbourhood. I created an affinity diagram to help me distill all the information from my user interviews into a three key themes.
While all of my respondents were strong supporters of local businesses, they didn’t think that West 4th offered anything that was worth going the distance for. There were shopping districts that were more conveniently located and that were more affordable than West 4th.
They were frequent online shoppers. But, when it came to local they liked to browse online, and almost always went in-store to make the purchase. They expressed that the nostalgia of being in-store was a part of the whole experience. Being able to learn about the products and the people who made or curated them was an important and enjoyable part of the process.
Fit and product quality were also important factors in the consideration process. My users expressed that they would be more inclined to purchase from a specific brand online when they were already familiar with the quality and fit. Their opinions on quality and fit for a particular brand either came from personal experience or friends of similar style and frame. The most disliked part of the shopping process also happened to be trying on clothes.
Understanding the User
Scenario
Cynthia was invited to her a friend Craig’s birthday party. She decides to buy a birthday present him. Cynthia loves to find unique gifts at local stores. But, with her busy schedule, she cannot always take the time to hunt for the perfect gift. With limited time, she was forced to go the mall. Unfortunately, she was unable anything. So, she opted to buying him a mall gift card instead. Cynthia shows up at the party and Craig is unimpressed with her gift. If only there was an easy way for Cynthia to find unique local products.
Considerations
Time — the timeline to complete the research, planning, design, and testing of this web app was two weeks.
Budget — given that the Kitsilano West 4th BIA was a non-profit organization I was conscious of including features that were feasible within an assumed small budget.
Discovery
I chose to focus on providing a personalized experience for Cynthia, much like how you would expect a personalized experience in-store. After experiencing West 4th for myself and discovering the local products hidden amongst the layers of each retailer’s website, it was clear to me that the lack of local or unique products was a misconception. A number of store carried products from local designers and unique brands that couldn’t be easily found elsewhere.
I asked myself whether a standard e-commerce website would solve the problem for West 4th. For the user to want to visit the West 4th site, it would be because they already believed that it carried a unique item. But since the perception is that West 4th has no local or unique items to offer, it seems that the website would need to work even harder to bring these feature items to the forefront. What if there was a way that we could deliver the exact types of products our user is looking for in an effortless way?
Features Prioritization
Before designing the digital experience I identified three key features that would be crucial to my user in achieving her goal.
Design
To create my wireframes, I first created a sitemap to help me visualize how the user would move through the site. The use case that I developed involved the user signing in to create a personalized profile and proceeding to buying an item.
Step 1 — Personalize Your Feed
I encountered my first UX decision upon the the first frame of my website. Given that users are more wary of providing their personal information and/or just lazy, I had to decide how I could encourage users to login/sign up. Upon entry to the site, I decided to implement a login/sign up modal that the user had the option to bypass. To promote login/sign up I provided a one liner explanation of the enriched experience and presented it in a multistep interactive format. The purpose of this step was to learn more about the products that the user was interested in to curate a personalized feed.
Step 2 — Search
The personalized feed also featured a search function that allowed the user to filter through their feed. A “popular” tab would also be displayed on this same page which would allow the user to see the products that are trending in their social network.
Step 3 — Pay
The last step is to process the transaction. The steps are broken down into separate pages with the option to go back to edit previous steps at anytime. What sets this payment process apart is the option to either pay online and have it shipped to you or reserve it online and pay for it in-store. The user can also select which store they want to purchase the product through. To help the user make this decision, a modal is shown which provides information about the business.
Prototype
Click on the link below to view the InVisionApp prototype for ShopWest4th.
Conclusion
The ShopWest4th e-commerce webapp is aimed at bringing people back to West 4th and keeping the neighbourhood top of mind as the first choice for local products. With this web app, Cynthia can count on her personally curated products list to help her find unique products that are relevant to her. The ability to connect with her friends in her social networks also provides a sense of community and a source for recommended products from like-minded people. Most importantly, it allows Cynthia to support the local businesses that she cares about and to experience the nostalgia of an in-store experience.
Further Considerations
The features presented were prioritized given the timeline. With additional time and budget, the following features are worth considering:
Blogger Curated Lists — each week a blogger creates a list of their favourite products
Gift Guides — users can shop for gifts based on the receiver’s personality, interests, role etc.
Product Reviews — to further build a social community, users can read and submit product reviews
Mobile App Integration — create an accompanying mobile app so users can bring the experience with them when they go shopping on West 4th