UXDI PROJECT 2 E COMMERCE DESIGN & UI

CLIENT: DEXTER

29 YEAR OLD SCRIPTWRITER

CARES ABOUT: AUTHENTICITY, EXCLUSIVITY,

AND SHOWING- OFF PURCHASES

Profile: Dexter likes to cooke and entertain with friends , and is a big fan of ‘Redo-chic.’ Since he does not yet have a family of his own, he only buys gifts for his friends and relatives over the holidays. He considers himself a digital native and a smart consumer. He loves to share unique New York City culture with people “back home,” and show off his purchases. As a writer, he has a keen eye for sharp copy and likes brands who express their personality through their words.

Tech Empathy: HIGH

Purchase Cycle: SHORT

TECH PLATFORMS: MacBook Pro, iPhone, Ipad

FAVORED BRANDS

MailChimp, Uber, Urban Outfitters

FAVORED CHANNELS

Mobile, Twitter, Instagram

NEEDS FROM ONLINE STORE:

• Knowledge and authority on product inventory
• Regularly updates inventory
• Fast shipping
• Able to purchase from mobile
• Able to submit product reviews

PAIN POINTS:

• Poorly-written website copy
• Too little choice of Retro stuff
• Lengthy checkout process
• Services that don’t work on mobile
• Wants to be sure of small product details

HOW WE CAN SERVE

• Characterful copywriting
• Efficient checkout process
• Multiple/large product photos
• Ability to submit review of products

1. Research my business

Learn your business and brand goals through a variety of research methods:

• Visit the current website to understand how the company is presenting its brand and business

*Note: While a current website for my retailer does exist, we are not treating this assignment as a redesign project. Refer to the existing website for the sole purpose of understanding the brand and business. Your IA should be based on your sample product inventory of 100 items, not based on the existing site’s organization.

• Visit the physical store (contextual inquiry)
• Generate user flows (e.g. product discovery, checkout) based on three competitor/comparable online experiences
• Perform a heuristic evaluation of the three user flows

2. Create a navigation sitemap

In addition to the 90 products you have been assigned for your retailer, you will choose 10 more products for a combined total of 100 products.

• Using 100 products as a guide, you will each organize the site into logical and meaningful categories which help customers to find what they need, and understand what they have found.
• We’ll be covering a few types of sitemaps. At a minimum, you are responsible for creating a navigation sitemap (using a digital drawing tool of your choice Sketch, AI, Omnigraffle) that shows how your sample products would be found by a user.

3. Create wireframes

Wireframes communicate relative priority and layout of page elements to provide a general sense of how a page may look. Your wireframes should be made using Sketch or Axure or prefered design tool, and be inclusive of your primary persona’s path from home to checkout, including:

• Global elements (appear in the same place on all pages), such as the header and the footer
• Common elements (appear contextually on certain pages), such as secondary navigation, page titles, breadcrumb navigation, pagination controls
• Custom elements (appear uniquely on specific page templates), such as product photos and descriptions, calls-to-action, pricing and sizing options, forms, related content

Specific wireframes must include:

• Home page: Establishes the site proposition, brand personality, and global navigation, and offers new and returning users enticing calls-to-action to tempt them further into the site.
• Product category page: Showcases all available products in a category (such as ‘board games’) and allows for filtering of results where appropriate.
• Product detail page: Describes a specific product and provides options to purchase.
• Shopping cart: Details the products a user has chosen to purchase, allows for some editing of those products, and for the user to proceed to the checkout process.
• Checkout pages: A linked series of form-based steps focused on successful completion of the transaction, including capturing personal details, card details, delivery options, and account creation.

4. Create a clickable prototype to test with as many users as possible

• Using InVision (or Marvel), link your wireframes together to allow a test participant to complete the journey from home to checkout (based on your primary persona)
• Conduct usability tests with as many users as possible
• Iterate on your designs (and be able to communicate what you changed and why)

5. Create User Flows

• Using Sketch or Drawing Tool of your choice, create 3 user flows (annotated based on heuristic evaluations) showing how users (based on the three given personas) would move through your site, including product discovery, checkout, and a 3rd flow of your choice
• Your deliverable should compare your new annotated user flows with the ones you researched and annotated in Step 1.

6. Tell the story of my design process

• Create an 7-minute presentation as if you were presenting to your “client”
• Tell the story of your design process, making sure to frame your decisions through the lens of the business goals, brand goals, personas, and your testing findings
• Your presentation should include demonstration of how one of your personas would use your website (using your prototype)

ASSIGNED BUSINESS: PARAGON SPORTS

Who are the competitors?

What do we need to know ? Things that can work better-

Pop-up shops ( they have a larger inventory: taking the store all of their contents- and designing it specifically for that particular user) Subject target — A pop up shop- specialty store- for the persona given problem need opportunity, in order to do the research to back the research.

Its the experience of going to a particular place that is special- the things we can take and translate into physical space.

Understanding why people would shop there- would resinate the digital experience.

Your design should afford for all 3 of the users- but you should be designing specifically for that one user.

What should be working the navigation- concentration is one flow- your ‘primary persona’

Based on persona — locate that product, add that product to the cart, and check out.- successfully- user flow straight to the point.

Understanding stake holders- and landscape

Question is: What do you need to find out?

Why do people physically go to sport stores to buy merchandise?

Who is my user? and what are their goals-

Question: what is paragon business goal?

What is the goal of the brand.

COMPETITOR RESEARCH ANALYSIS

REI — MISSION STATEMENT:

WE BELIEVE THAT A LIFE OUTDOORS IS A LIFE WELL LIVED. WE’VE BEEN SHARING OUR PASSION FOR THE OUTDOORS SINCE 1938.At REI, we inspire, educate and outfit for a lifetime of outdoor adventure and stewardship.

EASTERN MOUNTAIN SPORTS:

EASTERN MOUNTAIN SPORTS:

MISSION STATEMENT: OUR HERITAGE ISN’T JUST ABOUT WHAT WE SELL, IT’S ABOUT WHO WE ARE.

COMPETITOR COMPARISIS

COMPETITOR ANALYSIS- INSTAGRAM

IMPRESSION OF E-COMMERCE SITES: E-COMMERCE DESIGN- INITIAL CONTEXTUAL INTERVIEWS

PROFILES- AMY : 25 YEAR OLD- Account Service Rep. at Turner Broadcasting

PARAGON

• Immediately I see no flow to the first page
• What is their logo? It feels old school
• I notice immediately 2 sections of social media presence- I don’t need it twice, I got it the first time

REI

• Just about the people- When I think REI I think customer loyalty because its a CO-OP
• Example- Their Standard to their Black Friday approach of for the people- and opened at normal hours
• Even though Black Friday is one of my favorite things
• I like how the company sticks to their beliefs. This day in age- it shows the company holds the importance of customer loyalty highly
• UI- not entirely user engaging- Not everyone is going to scroll down like this- the way the site is forcing me to navigate.
• You are going into an experience
• Buying lifestyle- not just a product

EASTERN MOUNTAIN SPORTS

• Immediately notice little cart- which is fine; but I don’t like the increase in value $- I don’t want to constantly be seeing the dollar sign in my cart.
• I would be more inclined to remove items out of my cart if the exact $ sign is always there.
• Social presence: ‘I know where to go to find it- its at the bottom.- How? social media tier at the bottom is much found as company standards in the format

REI OUTLET-

• “They are not going to put time and effort into UI- just want and pushing to sell the product.”
• Knowing I am giving % back- and being apart of the community and loyalty program
• I like shopping at places good causes offers more than just my money- but drives me to want to be apart of the community and life style that the company supports

JACLYN — 25 YEAR OLD PERSONAL SHOPPER- CARES ABOUT: FAMILY, LATEST TRENDS, SOCIAL NETWORKING

PARAGON

• Are you professional or not?
• Feels like they’re lacking- somethings missing
• If they want to engage people, they need to ENGAGE people- I want to see people in their photos- doing things in New York. not just anywhere- but putting the idea in my head — starting in new York- buying in new York- and new Yorkers taking it into action
• Then I see the user wearing the product
• Again, I want to see customers- more specifically New Yorkers.
• Ugh, this makes me irritated with the PR, and marketing, and company mission statement
• Wait, really I cannot even shape this as personal as the company is by the instagram- they need to update for sure
• The company should have some sort of company hashtag is they need to get more attraction
• they need more followers- 2,854 followers ? Not impressive

REI

• Showing the people
• Relatable people- that look it looks like that could be my friend holding up that rock heart, I wanna be there right now.
• Connectable — By the people= community
• First of the three that I find myself scrolling to the bottom to load more
• I like how there is usually a figure in each shot
• Not just natives, or experts in the sport
• Relatable people
• Giving me the impression- the want- the desire to be shown- to see that- you don’t just have to see this place, you can go to this place
• I feel limitless: I can run, snowboard, hike, yoga apparently ?
• ooooh they have their own #HASHTAG
• Hashtag : #OPTOUTSIDE catchy I love it
• They wanted everyone to go outside; not to be inside, thats what a sporting store should be about. not the product but the people, the experience, the adventure, the immersive experience. I want to FEEL like I am there.
• I want to invision me being there, on that mountain, how does the air feel on my skin, what am I wearing, where am I going? endless possibilities
• Ugh now I want to go somewhere-and I know exactly where to go to get what I need. Its already in my head- REI- mission accomplished

EASTERN MOUNTAIN SPORT

• Very scenic visual landscapes- beautiful
• I feel inspired: ‘We want to inspire you to go to the places- where we will provide you the gear to get there
• I wish there were more people in the photos
• people, users- to make me relate more to the product their selling, the brand they stand for- the lifestyle they’re representing.

RYAN — 24 YEAR OLD FINANCE ASSOCIATE- FINANCIAL ANALYST- CARES ABOUT: FAMILY, CAREER DRIVEN

PARAGON: Instant cheap feel

Don’t like their adds- adds devalues the site- thoughts are very clean.

Font is quite fuzzy- pixalization; 1–800- number

Fonts are inconsistent

The color scheme is off

find a more uniform color scheme

find a more uniform font

don’t overwhelm the user with sales

very old e-commerce site- fonts are crummy-

when you click on something has to show a whole new page

-I like to be able to save time, there is a difference is

I am expecting the shirt to get larger

reloads the page, go to the shirt

I prefer to see the blown up version of the item- mouse hover blow up

Reduce number of products being view- if i click on something the first time and it opens a whole new page- I’m less inclined to continue to do that to other products.

Not an innovative modern company

Definitely just trying to target- at least thinks they’re

REI:

E-Commerce: Has a nice clean aesthetic, modern UI — clean modern, logo looks clean, doesn’t look cheesy in any way. Melanie threshold- meets in terms of weather or not I’m willing to continue looking.

We have become very snobby with our UI

well

CON: I think its a little overwhelming on tabs- camp, and hikes, immediate overwhelming- a lot all at once.

Definitely isn’t ideal layout of webpage-

Scrolling threw tiers of three-

Quality information from people who have backgrounds of hiking, trials, get people who are knowledgable; information, brand association of the sport.

Frequent user of those items; person that will be using a variety of things for one particular adventure. Looking to buy the life style- cross grid selling at REI the person who goes their needs it- targeted consumer- drive home selling the lifestyle. Bringing elegance, they make hiking- oh why am i not doing that?

This is your entry point to buy this stuff; come through our doors buy these shoes and you can make that happen, because we will help you.

EASTERN MOUNTAIN SPORTS:

Cleaner than Paragon--here Logo isn’t as clean as it could be

Fonts are relatively nice

A little cramped- even how many pixels across- its kind of big and costumes a decent amount of size and space

Aesthetically- doesn’t look as clean as it would aesthetically all should be squared.

Overall analysis:

REI- HIGH Quality

Paragon- LOWER Quality

Eastern Mountain Sports — Medium