My first step was to check out the shop and the website, to see what they could tell me about the brand and their clientele.
From the homepage, I began to see how I might improve the design so that it would better connect with their brand. I continued browsing the rest of the site to see what else I would find.
I knew it would be important to understand what customers expect and experience online, so I continued to peruse the rest of the site and took screenshots of each page to reference for the redesign.
Although they have a large inventory and many category options on their site, merchandise presentation and text overlays were inconsistent and difficult to read. Additionally, many links were broken and pages on services and sponsorship had information with no way to take action.
My first goal was to create an updated UI that reflects the brand and all products and services.
After seeing the website, I went out to meet the owners and staff at the store, as well as other roller skaters and potential skaters to understand what they are all about. I did this in two parts.
Next, I set out to meet the girls behind the brand and those who skate with them. When I visited Sin City Skates' shop I spoke with the staff to learn more about who they are, and observed their customers as they shopped. I did the same at their local competitor's roller skate shop, and rounded out my contextual research by attending a roller derby training at a skate park that evening.
I supplemented this with virtual one-on-one interviews with participants in various stages of their skating journey, including those who skate competitively, those who skate recreationally or just began skating, and those who don't skate at all but are interested.
This fun-loving group of girls is all about staying active and getting outdoors, bonding with and empowering other women, and most of all, just enjoying themselves--expectation and obligation free--with others who want same.
Meeting these women was an eye-opening experience. Read the full story.
"...when I say that I had absolutely no idea what I was getting into by entering into this subculture, I mean it. Walking into this very specialized arena like a baby deer in the headlights was daunting, to say the least."
I created 2 personas based on the most common skater types that frequent the shop. My primary persona, Eleanor, represents a seasoned roller derby skater, and my secondary persona, Brooklyn, represents a new recreational skater. I defined their user journeys through a likely scenario based on the real experiences of my interviewees, which helped me prioritize which content to work on first.
My second goal was to update the content to give online shoppers the same options as in-store.
I took the research data and existing site screenshots and updated their site map to make things easier to find. I tested the new sitemap with a tree sort, which mimics the way users typically navigate in order to produce more authentic results. With a few minor adjustments, I was able to reduce the number of main categories and add more products under each based on items I saw in store and on what my interviewees expressed interest in finding.
The original site had six main navigation categories and several levels of sub categories. Many of these pages did not lead to working or up-to-date content. In addition, some of the items in store were not represented in any category.
On the new site, Search and Home were removed from the navigation bar, as these would be represented in the logo and menu icons. Each navigation level was renamed and organized based on feedback from the tree sort, and pages for contact, events, and social media were added.
With the pages now clearly defined, I began to sketch the layout and implement these in wireframes that would contain all of the site information that was important to my personas. I decided to focus my attention first on the homepage, and then sketched the additional pages I felt were needed for my wireframes to to test a flow for navigation/search and for custom skate ordering in my UI.
Homepage Variations
The homepage focused on skates by style, custom orders, and new skate tips.
My homepage sketches explored different layout options for prioritizing information based on what skaters look for most.
The wireframed homepage prioritized new arrivals, items by category, skate tips, shop favorites, and store and event info.
Product Page Variations
The product pages reorganized existing content in an easier-to-read format.
After the homepage, I sketched a search results page and product information page with key info and filtering options.
The wireframed product pages mimic the current design with a modifications such as customer reviews, stock levels, and a custom skate ordering option.
Custom Skate Page Variations
The custom skate pages reorganized existing content and added new options.
Last, I sketched a few custom skate order options pages that I wanted to conduct user testing with.
The wireframed custom order page includes a custom shoe option currently on the site, as well as an a-la-carte build option which is available but not on the site today.
To test the prototype, I set up virtual calls with individual participants and one call in a group setting. I prompted participants to select a specific skate and size, and then order a custom pair if it showed out of stock. I asked them to click around the site, had them share their thoughts and questions while navigating, and asked them to provide feedback for any problem areas or opportunities for improvement.
During the group call, I gave participants the prompt and allowed them to self direct through the site before sharing my screen and showing the flow as it was intended.
I asked questions on each screen to uncover any areas which may have caused confusion or had unclear action steps.
Now, with an understanding of the culture and attitude infused into in this industry and the company, I set forth to design a site interface that would match the energy and enthusiasm of the inspiring women I had met. I chose imagery and descriptors to define a brand personality that was reflective of the store itself and the women who work and shop there.
Seeing the store adorned in graffiti, I wanted to recreate that look and feel on the site. I wanted imagery that was edgy, powerful, fun, and leaned female but not your typical "girly" vibe. The graffiti image I chose was a variation of Tristan Eaton's "Audrey of Mulberry". She perfectly encapsulates the beauty, power, and edge of the women I met. This artwork was added to the design in the margins and background, and the color pallet used throughout.
The UI screens I created look and feel more like the store itself: vibrant, edgy, energetic, free, & industrial.
I made sure the products stood out by removing any background images which could be distracting.
The language I chose was casual and friendly, similar to what I myself experienced in the store and during my interviews.
To verify whether options were logical and easy to follow, I created a prototype flow to test a custom skate order.
Overall feedback was positive, however there were still a few areas that needed to be tweaked to improve visibility and readability.
Product Details Page:
Changes included variations in emphasis on buttons and copy.
Sincityskates.com existing product details page showing multiple views and an info block
Version 1 of the product details page with original site info in a new, cleaner format
Version 2 with disabled buttons, emphasized stock levels and simpler link verbiage
Custom Skate Page:
Changes included comprehensive, well-organized information.
Sincityskates.com existing custom order page showing custom order info in a long paragraph
Version 1 of a custom order option with original info in a new, easier to read format
Version 2 with icons, a new font, and expandable details to improve readability and hierarchy.
Search Filters:
Changes included a simple and consistent presentation of options.
Sincityskates.com existing filter options which include Sort by, Skates, and Safety Gear
Version 1 of the search results page with site's original info, cleaner images, and a hidden filter
Version 2 which uses similar, easy to locate dropdowns for filtering and sort options
Below is the completed design with the custom skate order flow I tested. I have learned much about this niche group and it has been an amazing journey! If you enjoyed the story, please take a moment to drop me a line below.
Having previously no involvement in the skate industry, I wasn't sure how I could speak to this niche group of individuals, however after meeting them, it was impossible not to catch their enthusiasm, passion, and love for the sport.
Although e-commerce sites can have much in common, each one has it's own unique vibe with a need for equally unique solutions to meet its challenges. This site redesign taught me to fearlessly approach a challenge with the same fervor of the roller derby girls I designed it for, and to shake it off and get back on my feet whenever I feel I've fallen short, just as they get up and shake it off each time they take a hit on the track.
I am proud that the results of this project were wholly inspired by and equally embraced by the women who own the shop, and I happy that I will be continuing to collaborate with them to complete the rest of the site in the coming weeks.
I am currently pursuing new opportunities and would love to meet you! Drop a line to find out what we can accomplish together.
