Product Design
Velouria E-Commerce Experience
Challenge
Take an underperforming webshop serving a thriving local business and improve online sales performance. Identify customer base, user pain points and help increase cash flow.
Solution
Optimize and overhaul Velouria's online shopping experience: address webshop usability, information architecture, cart abandonment and create a delightful, on-brand customer experience.
Client: Velouria
Velouria Context
Context
Research: Survey
Customer insights from research/problems
Competitive analysis
Site audit
SWOT analysis
See/think/feel/do
Personas
Customer journey
Button colour coding
New site: home, many, single
Context
Velouria sells an expertly curated selection of USA and Canadian-made goods, focusing on women's fashion. Velouria also sells jewelry, housewares, art books, and textiles for the home. Operating since 2002, the shop has a loyal clientele base that followed them to their new location downtown. The shop is a unique destination that has a reputation for great customer service, but their webshop has been underperforming through several redesigns, and could be the key to improving the shop's recent cash flow issues.
User Research
Survey
Working with market research expert, John Koblinsky, and Cat Wilcox, of Velouria, we iterated on a survey to gather essential information on our users.
Building on basic demographic information, we went deeper, learning where, how often and why our users currently purchase items from Velouria. With this information, I forged ahead to create user personas to work from in the UX process.
Key Observations
Users are shopping at Velouria because it is a local small business, owned by women.
Velouria's users almost exclusively women who are shopping for themselves.
Users are visiting the webshop in large numbers and not purchasing.
Site Audit
I closely examined the user interface features at shopvelouria.com and identified several key areas of potential improvement: information hierarchy, navigation, eliminating parallax, duplicated information and increasing brand consistency.
Site Map &
Information Architecture
Keeping in mind the goal of simple access to the user's primary goals: purchasing a product, finding information on visiting the shop. I reduced the primary navigation from 12 links to 6. Optimizing the navigation will go a long way towards improving the user experience and increasing traffic to shopping pages.
User Journey
Site Map & Information Architecture
SWOT Analysis
Strengths:
Instagram marketing
Well-chosen selection of quality goods
Fun items at lower price points
Great location in walkable neighborhood
Well-known in Seattle, loyal customers
Strong ties to local maker and artisit scene
Provide excellent customer service
Can pivot & make decisions quickly because of small business size
Weaknesses:
Webshop experience
Expensive shipping
High price point
Quality of photography used online
Difficulty reaching sports fans who frequent neighborhood
Opportunities:
Improve webshop experience
Create customer reward programs
Broaden customer base
Capitalize on feminist resurgence happening in 2017
Improve shipping options
Threats:
Other shops opening in neighborhood, carrying same goods
Cash flow issues
Vulnerable to staff illness & departure because of small number of employees
Maintaining a shop in an increasingly expensive city (Seattle)
Confusion about joint space with Cone & Steiner
Interview Highlights
"When we met we fell in dog love."
"The good dogs go fast, you have to visit a lot."
"Looking for a dog kept me going through grad school, I would just look for fun."
"Getting a dog symbolized freedom for me: choosing what I want in life."
Observations into actions
Next, after developing empathy for my users and gaining and greater understanding of their desires, I broke down how to use these insights to cue certain user emotions, and behaviours from within the app.
Desired Behaviour: Adoption
Trigger
Attraction
Approval & Confirmation
Competition
Strategy Implemented
Show large, friendly images of animals
Facilitate social sharing
Create method to 'reserve' pets via donation
Show already adopted pets
Wireframes
Sketching out the initial wireframes, the taskflow became:
Choose pet > Select Constraints > Confirmation > Results > Profile.
Assumptions:
Logged-in state
Interstitial screens to be factored in later
Instructions for user omitted here (teaching swipe, shake gestures & settings)
Paper Prototype: User Testing
"I just want to see the dogs, already!"
-User
User was able to easily navigate through the entire flow, however there was strong feedback the flow was too long.
Branding and Visual Identity
The Paws Up Brand is warm and welcoming, inviting users to feel safe and comfortable to connect deeply with an animal in need of adoption.
The colour palette is earthy, quiet and delicately cheerful, like a nursery where a parent bonds with their newborn child. The custom icons are open and soft.
User Interface Design & High Fidelity Prototyping
Initial User Flow
To begin, the user selects a pet category, next, the user can swipe up on the pet photo to see more images of this pet. The pet profile features stated project match parametres: breed, age, lifestyle, size, sex and health status. Here is the the first oppotunity for the user to reserve the pet for 24 hours, directly from this profile, through a donation to the shelter.
Browsing User Flow
User begins swiping behaviour. If a user swipes right, a cheerful yellow confirmation screen tells the user the selected pet as been added to their Pet Picks, and offers the option to reserve pet immediately, or continue browsing.
Settings User Flow
By clicking the menu icon, you can see your search settings. I chose to feature only the top three types of pets up for adoption at shelters, Paws Up could easily be expanded to included more types of animals.
If the users wants to refine or further constrain their search, they may select their constraints on the settings menu. The keyword search is an input field with a blinking cursor prompt, with a suggested search term. This avoids a long list of breeds or other more complex constraints that would limit user ease of use.
Prototyping and User Testing
Proceeding in a rapid, agile workflow, I put my assets to work in a Marvel prototype with simple animations, ready for user testing.
Project Conclusions
Through my research, I identified the key questions surrounding this project. Next, I built the answers to those questions into a mobile app, accessible from anyone’s pocket, anytime. The happy task of connecting people with pets they can adopt and love begins with creating an experience where they can find what they are looking for in a fun, shareable way.
Finally, adding a bonus pet reservation feature where prospective adopters can connect with the pet they are looking for more easily, and increase financial support for shelters is a win-win for everybody.
Time spent: 24 hours over 6 days