Top

UX/Product Designer in the Bay Area.

New-Era-Savant-4.png

New Era Savant

 

New Era Savant

How often do you go shopping for an exclusive item like limited edition shoes or another product and there are just no convenient places to look and you end up paying a premium for it on eBay? Well, this problem exists for hat buyers as well.

This project is an e-commerce website for desktop with clear ways of locating specific products, a product detail page for deep links, a cart and checkout flow, recommendations to cross-sell and up-sell, establish my brand and its points of difference with competitors, and a way to contact the business.

Role: Full Stack UX Designer
Time: Two Weeks
Tools: Sketch, Adobe Photoshop, Adobe Illustrator, Invision, Extensio, UXPressia, Gliffy.

 
 
 

Problem

Difficult to find region specific and exclusive New Era brand hats. High international shipping costs when you find hats from other countries. 

Solution

Develop an e-commerce website dedicated to selling hard-to-find New Era brand hats. 

 
 
 
If you would like to skip the research, you can jump to Designs.

 

 

How will you differentiate your store from the marketplace?

New Era releases region specific hats. You can only find certain hats in Europe, Asia, and America. The only way to get these hats currently is to find them on eBay. You have to pay a premium for the hat and high shipping charges.

 

 

Define your business/revenue model

Streamline the process. Allow users to view and search various region specific hats. Still charge a small premium for exclusive hats. People will be willing to pay the small premium for exclusive hats. Bulk ship hats from overseas to domestic warehouses. Shipping boxes with hats is light and the boxes aren't huge. Keeping a warehouse of hats does not require a large warehouse.

 
 

 
 
Foreign Hats Pay High 2.png

 

 

"I understand [these caps] were a Japan exclusive... these I absolutely need."

-Peter Malcolmson

 

"I'll pay HIGH for Buzz."

- Justin Matthews

 
 

 

Competitors

 

New Era Shop

Carries large variety of hats, but for some reason they don’t sell everything they make. Difficult to find Star Wars hats, Marvel/DC hats, other specialty hats. Website seems focused on sports team hats.

 

SuperHeroStuff

They sell all kinds of super hero apparel. Hat section is the best online for Marvel/DC hats. Also carries other franchises like Star Wars. Offers hats that are difficult to find elsewhere.

Lids

More focused on sports team hats. Difficult to find Marvel/DC hats, Star Wars hats, and other entertainment focused hats.
 

 

CraniumFitteds

Small selection of hats. Somewhat difficult to filter results to cater to specific buyers. Carries a few exclusives not found on other websites.

 

HatLand

Large variety of hats including exclusives. Fairly easy navigation. Probably main competitor. But they do not carry region specific hats.

HatClub

Small variety of hats. But they have color combinations for sports hats that are difficult to find. They also have other exclusives like the Voltron hat and Playstation hat. But very limited selection.

 

eBay

Very difficult looking for hats, must type in specific search inquiries and hope that the seller posted using the same keywords. Prices and shipping vary wildly. Come across usual pain points like untrustworthy sellers, bad pictures, bad description, etc. 

 

 
 

Branding Guidelines

• Find rare and/or exclusive New Era hats at one convenient location.
• Simple to use navigation and relevant filters.
• Lots of pictures from various angles of hats.
• Less focus on sports team hats, unless they are rare color combinations. 

 
 

 

User Journey Map

Journey Map.png
 

This is a journey map for a person trying to purchase a region specific hat online without the existence of New Era Savant website. The pain points were trying to find a website that sold the rare hat that the user wanted and then coughing up the large amount of money for exclusivity up-charge and international shipping. A point for gains is eliminating international shipping times since we'll be shipping from domestic warehouses.

 
 

 

Personas

Main user persona. He is an enthusiast. He knows what he's looking for and he's willing to spend money for it.

Secondary user persona. Someone who might wander onto the website, but is fashionable and wants a unique hat to stand out.

 

 

User Flow

 
User Checkout Flow Arrows.png
 

Main user flow where we see the user going through the entire checkout process.

 

 

Site Map

 
Sitemap.png
 
 

 

Sketches

 
 

Some initial design sketches for the website to flesh out some ideas. Took inspiration from Warby Parker, HatClub and SuperHeroStuff.

 

 

DESIGNS

Home-Screen.jpg
 

Home

The goal with the homepage was to make it as clean and simple as possible. You immediately go to a product catalog page when you click on any of the hat pictures in the middle. The same links are included at the top navigation bar which remains static throughout the website. The footer remains static as well. The banner features promoted products, clicking on them will take you to the corresponding product detail page.

 
 
Product-Catalog.jpg
 

Product Catalog

This is the product catalog page that shows when you click on "Fitted" from the home page. Every different product catalog page would have a different banner. Some pages show how the drop down menu functions and what they show. User research and competitive website research showed that these categories were the most used for filtering hats. They include Collection (i.e.: NBA, NFL, MLB, Marvel, DC Comics, Japan, Europe, etc), Color, and Size. In a previous iteration the prices weren't included on the product catalog page because I was following Warby Parker's format, but user testing showed that people wanted to see the prices on this page so they were added in.

 
 
Product-Detail.jpg
 

Product Detail

User and competitor research showed that users wanted high quality images of various angles of the product. User Testing showed that having a size chart would be helpful so a link to the size chart was implemented underneath the Size selection area. At the bottom of the page are suggested products to increase sales.

 
 
Checkout-Flow-1.jpg

Cart

Here is a clean looking cart with relevant information and a subtotal. It does not include taxes and shipping costs because we don't know address and shipping preference yet. There's also a box to add a promo code, perhaps influencing a user to sign up for the newsletter or an account to get promo codes. In a previous iteration the "Continue Shopping" button used to be a big red button that was identical to the "Checkout" button, after user testing it was changed to just text with an underline to encourage the user to checkout, but still giving them the option to continue shopping.

Checkout Options

User research showed that not all users want to register with a website to make a purchase. When Amazon added the guest checkout option it increased their revenue by $300 million. So of course the option was included on the website. User interviews showed that people really liked having a PayPal button for security and convenience.

 
Checkout-Flow-2.jpg
 

Guest Checkout

Research showed that having all information needed from the user on one page made checking out quicker and easier. If users wanted to check information they inputed, they wouldn't have to go to a previous page, it's all conveniently located on one page. Usually shipping address is the same as billing address so the screen is defaulted with "Billing address same as shipping address" box checked. If the user unchecks it, they can manually fill in the information. In a previous iteration, you could check a box for "I agree to the terms." but there was no implication that there was a link and the wording was inconsistent with other websites. After user testing it was pointed out and then changed to what it currently is, with an implied link and correct wording.

 
Checkout-Flow-3.jpg

Review & Place Order

User research showed that users wanted a page to review their order information before placing an order. Edit buttons were included in case they needed to change some information.

confirmation

Previous iterations of the Confirmation page did not include a confirmation number and personal email in the message. User testing showed that those would be useful and give them a more personalized experience respectively.

 

 

prototype demo

 
 
 

 
Computer-Mockup-2.jpg
 

reflections

I learned that it's really difficult finding the right people to interview for a niche website. I think given enough time I could have reached out to people in a Facebook group that I'm in with hat enthusiasts for interviews. Also asking the right questions to steer my design before I even had a website was difficult to formulate. Most of the insight I got from my user interviews were that people were willing to pay a premium for exclusive items, they would tolerate longer shipping times for exclusive items and they would like to have a PayPal or Apple Pay button on an e-commerce website they've never shopped at before. I would've liked to do more user testing in my two-weeks but I was simultaneously learning how to use Sketch and make wireframes so that took up the majority of my time. Thanks to that however, I'm confident in my ability to use Sketch now. Working on this project was also fun because I myself am an avid hat collector and wished a website like this existed.

 

Tools

Sketch, Adobe Photoshop, Adobe Illustrator, Invision, Extensio, UXPressia, Gliffy.