Designing Paragon Sports E-Commerce Site

The task was to design an e commerce design for Paragon Sports. The outcome would be a mid fidelity prototype based on extensive prior research.

“THE PROBLEM/OPPORTUNITY

With large retailers like Amazon breathing down their neck, smaller retailers have to make some changes to

keep up! Your e­-commerce retailer is looking to design a new version of their site.

PROMPT

You will be designing a clickable prototype around an online shopping experience. Your design should meet the goals of the users (represented by the 3 given personas), the goals of the business, and the goals of the

brand. Your designs should be tested by users and follow IA heuristic (best practices).

You will be provided with:

● A retailer you are designing for (your “client”)

● 3 Personas

● An inventory of 90 products specific to your retailer

You will be responsible for choosing an additional 10 products from your retailer, for a combined total of 100 products.”

To explain to you how I got to my final product, allow me to take you through my though process in simple short points.

Contextual Inquiry

I started with research on Paragon Sports. Both online and physically to get the vibe they are trying to convey. They say the future of design is emotion. Form and functionality are the building blocks but emotion is what will allow you to keep your users connected to your brand. To make them feel part of the family.

From my research I instinctively knew that they were reaching out to young and adventurous at heart who wants to try new things and push themselves to the limit. They try to create a community of likeminded people to encourage and advise.

Heuristic Evaluation

Context. Everything in life is about context. It might sound socially unacceptable to run around naked but if its part of a formally organised event, its fine. To better understand how to approach the website, I scoped out similar sites to see what problems they were facing and why and what they were doing well and why. Some pain points are similar throughout all e-commerce sites so there must be a business reason they still exist.

I used the Abby Covert, “Does it have legs” method (http://www.slideshare.net/AbbyCovert/information-architecture-heuristics) to asses three sites as I tried to locate girl’s exercise pants and check out. I choose Bloomingdales, Sports Authority and Sports Direct to see what patterns emerged within a sporting company and what was similar across all e-commerce sites.

The surprising thing I found was even though Bloomingdales required the most “clicks” to check out, the experience was the most pleasant because of their visual design. It was clean and clear as opposed to Sports Authority and Sports Direct who had messier and louder designs.

Sometimes emotional connection and easy viewing can negate a longer user flow.

Information Architecture

Once I found out more about Paragon Sports, I went into sorting the 90 products given to me. Everyone perceives objects and groups them differently. Hopefully with the internet becoming slightly repetitive (Just look at every other e-commerce site), it would be easier for users to group products similarly. They would be used to certain phrases and terminology.

I started out by trying to sort them myself. I was struggling which only made me wonder how others would find it.

Interestingly, I got a variance of results. I used card sorting with four users, which is to get users to group the products up themselves and to label it. Clothing items were quite clear as most split it up by gender. The tricky situation was splitting the gear up. Some split it up by sport while others split it up by type (e.g. Electronic, Gear). I ended up sorting the gear by type and adding a filter function to my search capabilities.

10 Extra Products

Part of the project was to add on ten projects to the 90 that was given from the client. I decided to add the 10 based on missing categories, incomplete sports sections and missing sports sections.

By missing categories, I refer to the Kids section which did not have any products in the “Jacket” and “Inners” categories. Instead of taking them away, I wanted to fill them and keep them to accommodate for future potential buys.

Incomplete sports sections is when a certain sport only has the clothing for it and not the equipment or vice versa. This is to maintain Paragon Sports and a one stop shop for all sporting needs.

Lastly, I included products from sports I felt that Paragon Sports featured greatly in their store but was not in the 90 produts given to me.

Personas

I was given three personas, John a single dad, Dexter a trendy millennial and Edda a devoted grandmother. I decided to make the site primarily based on John as he just wanted to spend more time with his daughter and I felt sports would be a perfect activity. I still incorporated needs and wants from my other personas but I prioritised John.

Wireframing

Based off my research on Paragon Sport’s three competitors and John’s needs, I created a user flow to start creating the website.

Home Page and Product List
Product Page and Checkout

User Testing and Iterations

I tested the prototype with three different users and made two iterations. I got very interesting perspectives from my users and one of them never buys anything online (except for flights and hotels) so the e-commerce flow has very foreign to him. He didn’t understand why you would only be prompted to log in after you hit checkout instead of when you first enter the site. This is where I had to use my profession judgement. Having someone with fresh perspectives is refreshing as they can shed light on details you felt were routine but it should be taken with a pinch of salt. I ended up not making an iteration based on his advice as I could justify the business means of having the login after (Users are more likely to log in when they know for sure they are getting something).

An example of my iterations is my home page. Initially, I had my logo above my navigation bar. As I was focusing heavily on the marketing/ad space for additional revenue when pitching it to the client, a user pointed out that wasted white space is a more marketing space lost.

He also noted that the design did not draw his eye to the navigation bar but to Account (John Doe), Contact Us and Shopping bag as the icons are significantly bigger than the text. I took his valuable feedback and incorporated it into my design.

Initial home page wireframe
Final home page wireframe

Prototype: https://invis.io/8D6UY1CNY#/149000053_1_:_Desktop

Next Steps

I would user test the prototype with the stakeholders involved in the day to day operations of the website (IT, Marketing, Customer Service) to see if it truly suits the needs of the customers and if it is manageable for Paragon Sports to run it themselves after I hand the project off.

After that, I would start high fidelity wireframing as the website would be heavily dependent on imagery to create the emotion that will keep customers coming back for more.

Like what you read? Give Elizabeth Nair a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.