Redesigning a responsive website for a local boutique business
Horseplay Retail Redesign
Role: Lead Researcher & Design Generalist
Logo Design: Chris Flynn
Sector: Retail E-commerce
Time: 4 weeks
User group: Horseplay & Charmers Cafe customers
Focus: User Interviews, Prototypes, Usability Testing, & Iterations
Client: Horseplay Retail and Charmers Cafe
Overview ↓
Project Background
Horseplay Retail is the sister store to Charmers Cafe, both are owned by Carrie & Annie. The stores live across the street from each other in Jarvis Square, Rogers Park, Chicago.
Problem
How do we tie in the Charmers Cafe brand (to Horseplay Retail) that is physically across the street?
The aspect of creating a fun online store for Horseplay was an exciting opportunity to showcase the unique products & local art that’s sold inside the store. I wanted to help tie in Charmers Cafe as this is Horseplay’s sister store across the street.
KEY TAKEAWAY: Horseplay Retail is the lesser-known store of the two that Carrie & Annie own with less foot traffic than Charmers Cafe (a hub of regular local & non-local coffee & tea goers). Acquiring more of Charmer’s customer traffic (online and in-store) would bring exponential profit to Horseplay.
Peek At Final Solution
Overview of discovery & research↓
The hero image horse drawing could come across as disjointed from the typographic logo.
Horseplay retail is a vibrant space with hundreds of colorful, whimsical products and the current site feels stark, black & white, and minimal.
A customer is unable to see the “COMING SOON” message below nor the store’s socials as there is a lot of unused space in the middle of the landing page, making the breakpoints less defined. Customers need to scroll to see key details at any given time.
The link to Horseplay in upper right hand of the navigation menu doesn’t reflect the store’s consistent typeface and it stays visible within the menu navigation even after a customer is on the Horseplay Retail homepage.
Ideas
Redesign a fun and dynamic Horseplay Retail website that reflects the energetic vibe of it’s physical store space.
Create the tie in with Charmers Cafe.
Stakeholder Established Goals
The goals for these interviews was to gain qualitative shopper research for a deeper understanding of why these past Horseplay customers chose to stop into the shop, what drew them in again if they’ve frequented the store, and what these loyal or first time customers would like to experience if presented with an online Horseplay shopping scenario.
Talking to Horseplay Retail Customers
Commonalities Between Stakeholders & Customers
In my synthesizing process it was important for me to distinguish the commonalities of both the stakeholders and customers. Below are the five key themes that were the same motivations of both groups:
1. Tough Location
2. New childrens & baby section
3. Themed curation
4. Sister store link
5. Community unique items
Defining Horseplay Customers Through Storyboarding
These three shoppers would be primary local and non-local Chicago customers of Horseplay Retail’s online store. All are in their own age bracket, have different needs for shopping at Horseplay, and are excited about supporting independent businesses. A common theme of convenience and the appeal of a local distinctive store that these customers can also find online ultimately culminates much of my interview research.
Each of the three customers are also illustrated via storyboarding (shown below) with their distinctive personal motivations to reach for a digital solution for Horseplay.
Horseplay Retail Will Strive for Two Key Customer Experiences:
1.
Based on the pain points of customers who want a store website they can share with friends and also know immediately that Charmers Cafe is affiliated with Horseplay, the site will provide the ability for customers to check out both stores and learn about the sister store origin story.
2.
The second primary customer experience of Horseplay Retail is the capacity to shop online. The owners are interested in branching out to online sales but also wanting to start with a small online inventory. Starting out there will be five available products customers can shop from.
Customer Learns About Horseplay & Charmers Sister Store Connection
These five task flows were chosen to easily share Horseplay to friends (especially folks that don’t live close to the shop), the ability to follow along with upcoming events, purchase gifts online, and find when Horseplay is open.
Highlighting Key Feedback Through Task Flows
Low & Mid
Wireframes
Based on my research and user flows, I decided to focus on the main shop’s landing page, a product purchase flow, a user flow for discovering more about both Horseplay Retail & Charmers Cafe, and a gift card purchase flow. These flows were selected to address the top priorities of customers when interacting with a Horseplay Retail online store.
Landing Page
Landing Page Mobile
High Fidelity Design:
Solution
Landing Page for Mobile & Desktop
Mobile Navigation &
Product Screens
Product Purchase Flow For Desktop
Our Story and Hours & Location Screens
Changes and Iterations
The ‘Before’ screens are the screens that were tested within a prototype during usability testing.
The confirmation page needed a receipt integration and also a clear contact to the ladies at Horseplay
The product page needed thematic categories. There was also a need to make it clear that Horseplay Retail has MUCH more than just five products in their physical shop.
The bottom of the payment details page needed a few more details added - including the subtotal and preview of purchase before a user decides to place their order.
What’s Next?
Next steps would entail integrating the Horseplay UI assets to the current Charmer’s website. Making that transition from the current “coming soon” page for Horseplay Retail.
Revisiting the product roadmap with a wishlist feature and delightful feature ideas. I would be excited to play with horse button visuals.
It would be ideal to be able to add more products to the product’s page - in essence playing up the unique category distinctions that makes Horseplay Retail so fun!
Reflection Thus Far
This project has been a great deal of fun working with local businesses very close to my neighborhood. The ladies that run both Charmers Cafe and Horseplay Retail have such an impactful community vision in both their businesses and their free monthly artisan market.
The work I art directed, designed, researched, and created for the ladies was considered a creative direction they could potentially work towards - they are in the process of gauging whether or not they want to jump to online sales for Horseplay Retail or keep the shop a one-of-a-kind stop in physical space.
