Fairfax Surf Shop

Board-Based Mobile E-Commerce

Fairfax Surf Shop tablet prototype mobile application.

Board-Based Mobile E-Commerce

Fairfax Surf Shop (FSS) is a mobile e-commerce application designed for a sports equipment 'brick-and-click' small business. This particular shop focuses on all of the major board-based sports (e.g. surfboards, skateboards, snowboards) and lifestyle clothing. FSS started as a catalog ordering company and was looking to expand into e-commerce with a simple mobile application. I was approached in 2014 to help design a user experience (UX) that would allow FSS customers to buy sports equipment using a mobile device.

Gathering Customer Data

I talked to several FSS customers about their shopping experience in the store and online. Many of these customers talked about two main reasons they come to Fairfax Surf Shop. The first was the atmosphere the created a safe place for people who understand board sports. Unlike other sports equipment stores, FSS specializes in just boards, and their employees all ride, surf, or grind. This allows employees to communicate with customers using slang or jargon related to their sport that is missing from big-box sports equipment retailers.

The second was inventory. FSS only stocks the boards they sell via their catalog (a weekly newspaper flyer showing existing inventory). If it's not in the flyer, then it is most likely not in the store. However, many customers felt that a more up-to-date inventory online would prevent the pain of getting the flyer late and missing the opportunity to buy a particular product or take advantage of a sale. They felt that an FSS application on their mobile device could give them near-real-time access to their inventory.

Finally, I took a look at three of the online competitors that came up when customers asked about what they considered to be good online e-commerce sites for their sport.

These competitors included Tactics Board Shop in Eugene, Oregon, Dogfunk in Salt Lake City, Utah (acquired by Backcountry), and BC Surf & Sport in Fort Lauderdale, Florida. While researching these competitors it became clear why FSS customers like them: they included a robust online inventory. Even though their e-commerce websites were plain and only one of them was responsive, they were light years ahead of FSS by having it online. If FSS could launch a mobile app that showed their inventory without having to use the browser, they could reach their audience overnight.

Mapping and Persona Creation

• 'I see something I want, but it's always gone when I call them or show up.'
• 'I always miss the sale.'
• 'I love going into the store but they never have what I want.'
• 'If I could buy something using my phone, I would.'
• 'The sale flyer seems so old school. I like it when I can find it but getting into Fairfax is tough.'
• 'I moved away but I would still like to support the store.'

The main observation made while crafting an experience map of the problems encountered was access. Customers wanted access to FSS when they were away from the store. This also resonated as the main goal for addressing the top pain point all customers had: wanted to know what board designs FSS had in stock.

This manifested into four (4) key personas for the project:

• Inventory Tony -- He wants people to buy his boards so he can stock and sell new ones.
• Discount Drew -- He wants a cool skateboard but is waiting for it to go on sale.
• New Board Nancy -- She doesn't know what she wants but will know it when she sees it.
• On-The-Move Matt -- I want to see what they have without leaving the skate park.

These personas highlight the repeated comments from customers looking for online and up-to-date inventory with a majority of the minimal requirements centered around a common theme:

Provide customers with correct and timely inventory information when they need it no matter where they are located to help the business sell boards.

This resulted in the creation of scenarios that explored six (6) key features: Categories, Search, Details, Events, Cart, and Check-Out. Each of these features provided the groundwork for a mobile application that would simplify FSS inventory search using both smartphone and tablet applications.

Paper Prototyping

The first paper prototype focused on what the customer would need in order to find a product, or categories of products, with minimal effort. I sliced many of the paper prototype features down into three categories: Essential, Maybe, and Nice-to-Have. Because the primary need was to find and sell boards, categorization resonated most with how customers prioritized their searches:

• Categories -- Customer can use to serach categories (e.g. Skate, Snow, Surf, Style)
• Search -- Customer can use keywords to search
• Details -- Customer can see the product and understand what it for
• Events -- Customer knows when there are sales
• Cart -- Customers can save products they want to purchase while shopping
• Check-Out -- Customers can decide which products they want to purchase

On the Maybe and Nice-to-Have list where the UI elements from their website that were not part of inventory:

• Live Events -- Skate Camps, Skiing/Snowboarding Trips, Competitions
• Customer Photos -- Instagram photos of customers using FSS purchased products
• Accessories -- Accessories products like ramps, benches, pads, and helmets

Next, I took what I had created in the Experience Mapping and Scenario sessions and organized all the outputs from the consolidated Story Map. This helped develop a draft user flow to diagram out how each feature would fit together.

Fairfax Surf Shop application scenario user flow diagram for purchasing a product.

The FSS Story Map took all the best ideas from the scenarios and applied them to each of the six (6) features. The map also identified core functionality that was explored in earlier concepts but not included in the feature list. This included the typical application patterns such as Accounts, Authentication, Setup, and Help/Contact. These were all consolidated under one global feature called My Account.

• My Account -- How do I control all this chaos within the app?

The final FSS feature list included a UX design that had roughly 80-percent of the UI features targeted towards inventory with the remaining 20-percent (with some overlap) useful to customers interested in live events and social media content.

Prototype Iteration - Smart Phone Wireframes

I utilize my UI design skills (Adobe Illustrator and Photoshop, Marvel POP) to start wireframing a smart phone version of the paper prototype from the paper version:

Fairfax Surf Shop prototype wireframe for smart phone homepage.

Prototype Iteration - Tablet Wireframes

I took what I had already designed from the Smart Phone Wireframes and created a larger screen version of the paper prototype that would work for both tablet and desktop screen sizes:

Fairfax Surf Shop prototype wireframe for tablet homepage.

The final prototype wireframes were demonstrated to the client in 2014 and received excellent feedback. Seeing the application go from a paper concept to wireframes was exactly what the client needed to see.

It also set the stage for usability testing. Volunteers that were close to the personas provided invaluable feedback to FSS. They pointed out what worked well, showed me what looked confusing, and what might be missing.

Medium Fidelity Mockups

I synthesized all the information I learned from the client and usability feedback session into a medium-fidelity mockup. The initial UI wireframes that featured only placeholders now showed images of products in use with clear descriptions:

Fairfax Surf Shop prototype mockup for smart phone detail page.

This version benefited from using Marvel POP to animate the transitions and show how the application moved from page to page. This iteration of the FSS application was cleaner, easier to use, and removed much of the friction experienced in early prototype designs.

Fairfax Surf Shop prototype mockup for tablet homepage with menu shelf.

The final version of the FSS medium-fidelity prototype included a sidebar menu shelf and a detailed page mockup:

Fairfax Surf Shop prototype mockup for tablet detail page.