Paragon
PARAGON
Summer Sale E-Commerce Site
Class Project
The Challenge
Paragon Sports is a sporting goods store that has been a New York institution since 1908. I have been given the great opportunity to create a popup site for a conceptual back-to-school sale featuring 100 curated items. This was not to meant to be a redesign of the current Paragon website; it was a call to create new information architecture with a new set of categories and subcategories for the 100 items.
Aspects of this site that needed to be included were:
Clear ways of locating specific products
Must categorize all 100 products into the global navigation
Had to be a responsive site with states for each screen in desktop, tablet and mobile
An efficient means of purchasing one or more products
Steer customers toward popular products
Maintain consistency with the existing brand
Ability for customers to contact the business
UX/UI Design
Jon Gordon
UX Skills Used In This Project
Competitive/comparative analysis
Field research
Card sorting
Research synthesis
Information architecture
Sketching
Wireframing
Prototyping
User testing
Research
For competitive analysis I looked at other trusted and successful sporting goods stores with physical locations and ecommerce websites. Modell’s Sporting Goods, Dick’s Sporting Goods, and Big 5 Sporting Goods all fit within those parameters.
Modell's Sporting Goods
Modell’s Sporting Goods was founded in 1889 in New York City and has grown to become a regional presence on the East Coast from New Hampshire all the way down to Virginia. It has a large selection online but it’s website requires a lot of clicks to accomplish simple goals.
Dick's Sporting Goods
Founded in 1948, Dick’s Sporting Goods began as a single location bait and tackle shop. While it has no locations in Manhattan, there are stores in the outer burroughs and throughout the tri-state area. It has a huge presence in the US, with 675 stores and a massive online selection, but it’s website is hard to navigate and each page contains too much information.
Big 5 Sporting Goods
Big 5 Sporting Goods has no locations on the East Coast, but has 420 stores throughout the Southwest and West Coast regions. Big 5 has been in operation for over 60 years and features a big focus on fishing and hunting. The reason Big 5 is included is because it is a Sporting goods shop with a well-organized website that has a very natural feeling checkout flow.
Paragon is already ahead of the game when it comes to customer service technology. Paragon is the only one of the competitors listed here to include all of these features together: in-store pickup, free shipping, online live chat customer service, and a responsive website that works well on desktop, tablet, and mobile devices.
While Paragon is ahead of the curve in many ways, there are opportunities for growth:
According to an in-store source that was interviewed during a field study, Paragon isn’t selling as many backpacks as they could be.
There’s no classification or rating system on the website to make it easier to choose what to buy.
It’s hard to shop by brand on the website.
There’s a massive footer when the website is viewed on a mobile device.
Persona
I was provided with a persona, Edda, a 47 year old with two teenage kids.
Edda tries to find the “coolest” clothes for her children but has a lot of trouble figuring out what to buy. She desires ease of use from a mobile site and loves good customer service.
In order to design for Edda I needed to include:
A simple layout she could understand right away
A product rating system that would help her figure out the best items on the site to buy for her two kids
The ability to shop by brand
The live chat that makes the customer service so great on Paragon’s current site.
Design Phase and User Tests
I wanted to create something that included the best aspects of Paragon’s current site but with a different look and feel, as well as some great new features. The biggest differences would turn out to be the inclusion of a Shop By Brand section, and the addition of a ratings system. Mobile wireframes were created in Sketch and placed in Invision for prototype testing.
During the first round of user tests some testers were unclear which company owned site they were on, so there needed to be a definitive header that stated plainly that this was a Paragon site. Other testers felt the scale was off and that the header was taking up space that would be better served by page content. Changes were made and the header was redesigned to show more information in less space.
Another big takeaway from testing was that testers were annoyed that the image in the Product Details page was partially bellow the fold on mobile devices. This was because there was too much information above the image and it was pushing down everything else. The product info and image were switched to reveal a full image right away, something that testers in the next round appreciated.
Once the first round of testing was complete on mobile and a 2nd iteration was designed, the next step was to design wireframes for tablet and mobile. This was done by continuing the order of information from the mobile version –– elements ordered from top to bottom could also be ordered from left to right.
