Adrienne Yapo d - Sweet Gum Studio - Home · 2019-10-24 · ADRIENNE YAPO | USER EXPERIENCE PORTFOLIO | 4 UX DESIGN / Process sketches Sketching and low-fidelity prototypes enable

dAdrienne YapoUSER EXPERIENCE PORTFOLIO

d

ADRIENNE YAPO | USER EXPERIENCE PORTFOLIO | 2

ABOUT MEI’m a creative, versatile, and collaborative user experience and visual designer with more than 10 years of broad industry experience in telecommunications, education, public relations, non-profits, start-ups, small businesses, and retail. Highly organized and driven, and passionate about user-centered design, information architecture, and interaction design, I specialize in building intuitive, compelling, and easy-to-use design solutions.

• Bentley University MS, Human Factors in Information Design (12/2016)

• Massachusetts College of Art & Design BFA, Graphic Design

• Boston University BA, English Literature

Experience• Harvard University, UX, Visual, & Digital Designer

• Adrienne Yapo Design, Principal & Owner

• BT Conferencing, Senior Graphic Designer

• Harvard Medical School, Communications Manager

• MediaMap, Media Research Analyst & Associate Editor

Skills.

UX DESIGN

USER RESEARCH

INFORMATION ARCHITECTURE

VISUAL DESIGN

CONTENT STRATEGY

Education

http://www.adrienneyapo.com


UX DESIGN / Concept PrototypesConcept prototypes help to communicate the flow of a user experience and to think through a design problem. The examples below demonstrate the proposed experience for SpeechTrainer, an app to improve public speaking skills.

Storyboards Information diagrams

Concept prototypes for SpeechTrainer, an app and wearable sensor solution to improve public speaking



UX DESIGN / Process sketchesSketching and low-fidelity prototypes enable rapid prototyping and ideation and can be beneficial in early formative design.

Low-fidelity interaction prototype Hand-sketched wireframing

Low-fidelity paper prototypes for SpeechTrainer captured interaction states quickly and inexpensively

Wireframing with pen and paper enabled rapid exploration for many potential design solutions for a website and communications redesign for Harvard’s Memorial Church



UX DESIGN / Wireframes IWireframes demonstrate hierarchy, structure, layout, navigation, and the organization of content. Perhaps more importantly, annotated wireframes communicate clear explanations for design decisions and can illustrate the benefits to the user. ROCHE BROS MOBILE APP WIREFRAMES

Notes: Notes: Notes:Notes: Notes: Notes:Notes: Notes: Notes:Notes: Notes: Notes:Notes: Notes: Notes:

SPLASH SCREEN0.1 Only shows while app loads home screen, no user interaction.

HOME1.1 Global Flyout Nav — tap to view

1.2 Search — tap to enable search input box, also includes barcode scanner search and cancel search

1.3 Cart — tap to view

1.4 Personalization — welcome message dis-plays after user creates an account

1.5 Featured specials — specials that are displayed here are personalized based on prior purchases

1.6 Large sized buttons make it easy to access most used features

GLOBAL FLYOUT NAV2.1 Global Flyout menu, top level navigation, Tap to navigate, tap “X’ to hide.

SHOP BY AISLE LEVEL #13.1 Left arrow navigates back to home screen, page title is shown to orient the user where they are. “Beverages” is underlined to indicate flow I developed. Tap on item to navigate to that product category.

SHOP BY AISLE LEVEL #24.1 “Beverages” tapped, reveals product sub-categories.

X

VIEW WIREFRAMES IN AXURE SHARE http://127.0.0.1:32767/start.html#p=iphone_frame_for_desktop_view

1.1

1.2 1.3

1.4

1.5

1.6

2.1

3.1

4.1

PROPOSED WIREFRAMESAnnotated wireframes for a grocery delivery app for a local grocery store chain



UX DESIGN / Wireframes IIWireframes demonstrate hierarchy, structure, layout, navigation, and the organization of content. Perhaps more importantly, annotated wireframes communicate clear explanations for design decisions and can illustrate the benefits to the user. ROCHE BROS MOBILE APP WIREFRAMES

Notes: Notes: Notes:Notes: Notes: Notes:Notes: Notes: Notes:Notes: Notes: Notes:Notes: Notes: Notes:

PRODUCT CATEGORY5.1 Left arrow navigates back, page title is shown to orient the user where they are.

5.2 Filter button allows user to further filter and sort through product subcategories.

5.3 Larger product pictures help user to quick-ly identify products. Sale items are shown in red with crossed out original prices to the right. Tap on product image for more detail.

FILTER & SORT6.1 Tapping Filter button pulls up faceted search options.

6.2 & 6.3 Cancel or reset filters

6.4 User can view All items or just items On Sale. User can sort by Popularity, Price, and Brand, filter for only Organic, Kosher or Vegan items within the product category, or filter fur-ther by Type (variable by category) or Specific Brand.

6.5 To apply filters to current product cater-gories, tap Apply.

PRODUCT DESCRIPTION - DETAILS7.1 Product description page displays large im-age, multiple views (dots indicate how manyimages. User can either tap circles to see more images or swipe on image to view more).

7.2 Details shows product description infor-mation. See 7.5 for explanation Nutrition & Related)

7.3 To add or remove item from cart, tap – or +; number between will change ac-cordingly. Cart total at right will also update to cue the user that item has been added.

7.4 Tap cart icon to access My Cart

PRODUCT DESCRIPTION - NUTRITION7.5 Nutrition information displayed. “Related” will display related products to the one shown—in this instance, would show all of the other kinds of Starbucks chilled drinks.

MY CART8.1 Left arrow navigates back, page title is shown to orient the user.

8.2 User can empty entire cart

8.3 Each item in cart is shown. Sale items shown in red. To add or remove items from cart, press – or +; Subtotal will update accord-ingly.

8.4 Press checkout button to begin checkout process.

5.1 5.2

5.3

6.1

6.4

7.5

6.2 6.3

6.5

7.1

7.2

7.3 7.4

8.1 8.2

8.3

8.4

PROPOSED WIREFRAMES

Annotated wireframes for a grocery delivery app for a local grocery store chain



UX DESIGN / High-fidelty PrototypesHigh-fidelity interaction prototypes are powerful tools that communicate form and function better than low-fidelity prototypes. They can be especially persuasive to clients and stakeholders, as they can more easily understand layout, navigation, and other interface elements.

Speech Trainer App Wells Fargo Redesign

A detailed Axure prototype for SpeechTrainer’s speech review screen. A redesigned Account Summary page in Axure for Wells Fargo Online.



UX DESIGN / FlowsSite and user flows are maps that help to define everything from big picture site hierarchy and process to low-level microinteractions.

The flow for SpeechTrainer’s responsive, mobile, and wearable sensor.

A proposed redesign for Wells Fargo Online’s Make a payment flow.

Proposed Make a Payment flow

To view clickable / annotated prototypes: h_p://qzpt6y.axshare.com/#p=account_summary Password: bentley

9 Adrienne Yapo | adrienneyapo.com | sweetgumstudio.com



INFORMATION ARCHITECTUREEffective information architecture helps users to efficiently find information and complete tasks. Organization, structure, navigation, labeling, and search systems are all crucial components of a successful information architecture.

Tasks User #1 Results User #2 Results User #3 Results1. Hear a sermon. Media but would probably hit Worship Listen (or Worship). Would also want to see a link on

Sermons page to this.Media

2. Find out what organ recitals are happening next week. News & Event and Music Music or Events Music3. Find out when Appleton Chapel was built. About About > History About4. Book a wedding. About? Religious Life? Not totally clear About Contact5. Find parking for Sunday Services. Visit Contact > Would expect to see maps & parking info,

directionsWorship? Not totally sure

6. Email the finance office to check on your donation. Contact Contact > then look for finance office Contact or Donate7. Download last Sunday’s bulletin. User confused. "Programs" thinks Sunday Programs.

Worship & Media?Worship, by list of Services. Doesn't think publications is good place to put this.

Media? That's where I'd go from experience

8. Find out what the church offers for Harvard students. Programs & Religious Life Unclear relationship between Programming & Religious Life. Might be in either place

Religious Life, Programs

9. Find last month's newsletter. Hestitiates. Media? Publications? Doesn't think this is good term for this. More in blog section.

News & Events

10. Find out if Memorial Church has church school for kids. Religious Life or Programs (Religious Education?) Programs or Religious Life Programs

11. Make an appointment to talk to clergy. Contact Contact Contact12. Sign up for the newsletter. Subscribe Subscribe Subscribe13. Find out about interfaith initiatives on campus. Religion@Harvard Religion@Harvard Religion@Harvard14. Make a contribution to Memorial Church. Donate Donate Donate15. Find out about the Organs. Music Music Music

Home

News & Events

Calendar News

Newsle3er Archive

Listen

Sermons Archive

Full Sunday Service Archive

Morning Prayers Archive

Worship

Sunday Services

Morning Prayers

Compline

Music

Harvard University Choir

Harvard Baroque Chamber Orchestra

Harvard Organ Society

About the Organs

Related Music at Harvard

Our Programs

For Harvard Students

Church School for Children

Faith & Life Forum

Grants Commi3ee

Lectures

About

People History Rentals

Weddings

BapJsms

Memorials

Contact

DirecJons

Parking

Donate Resources

Harvard Chaplains HDS HU Mental Health Services

Contact

MemChurch Website Redesign

For the redesign of Harvard’s Memorial Church website, I tested the proposed information architecture and revised based on user feedback through several iterations to find the most effective organization of content.



INFORMATION ARCHITECTURECard sorting is a user experience method to generate a category tree to better understand how users think about a particular subject matter, menu structure, or workflow.

Adrie

nne Y

apo /

Beet

hove

n Web

site R

edes

ign

Proposed site map – Beethoven Elementary School

Home

About

Why we’re special Meet our teachers

Upcoming open houses Awards

School photos Ra=ngs

School report card School climate survey

School facility environmental

report

Direc=ons & Hours

Calendar

Google calendar

Events descrip=on list

News (blog)

Categories

From the Principal

Parent Council

Site Council

Announcements

Fundraisers

Awards

Events

Press

Art Gallery

Parents & students

Before & AKer School Programs

Weekly Lunch Menu Art Gallery General School

Info

Food services

Breakfast & lunch menu

School Schedule

Absent or late students

Emergency dismissal or appointments

Emergency & inclement weather

School Uniforms

Normal school day

Gym day

Order form

GePng to & from school

Drop off & pick up

Transporta=on

Health & wellness

Nurse info

Sick policy

Medical forms

Report cards & homework

Cell phones Personal property

Tax ID# Student Handbook

Downloadable forms

Uniform order form

Decal order form

Medical forms

Other forms?

Useful resources & links

BPS links

First in Math

Scholas=c Book order website

Classes

K1

Mrs. Shields

Teacher photo & bio

Classroom photo

Class materials / curriculum

Supplies list

Student work

Contact info

Wish lists / Donors Choose

Mrs. Diaz

K2 1st Grade 2nd Grade Special=es

Get Involved

Parent Council Site Council Donate

Annual Appeal

Stop & Shop A+

Box tops

Donors Choose

Tax ID#

For Teachers Visit the Ohrenberger

Contact

Proposed site mapBeethoven redesign

Card sorting helped to develop the final site map for a redesign of The Beethoven Elementary School, a Boston Public School.



INFORMATION ARCHITECTUREFaceted navigation can help users to more easily find what they are looking for in large data sets. For the Roche Bros. Grocery Delivery App, I simplified and recategorized their full product categories and created a faceted navigation to allow users to quickly locate their desired product.

Weekly specials Shop past purchases Shop by aisleDelivery

CheckoutMy Account

ProduceMeat & Seafood Deli

BakeryDairy & Chilled

FrozenFresh prepared

foods BeveragesCooking & Baking

Condiments & SaucesGrains, pasta, &

cereals Canned goods & Soups

SnacksHousehold

Health & BeautyBaby

PetsFloral

Fresh fruitBacon

Deli Cold CutsFreshly baked breads & rolls Butter & Margarine Bagels

Appetizers & Snack Foods Bottled WaterBaking Needs

DressingsCereal & Granola Bars Canned Beans

Candy & GumInsect Repellent

Anatacids & Laxatives Baby Diapers Bird Food Accessories

Fresh vegetablesBeef

Deli FranksPackaged Breads & Rolls Cheese

Bread, Rolls, & Muffins CalzonesCoffee, Tea, Cocoa Desserts

Oil & ShorteningPackage Dinners

Canned Fish & MeatCheese Puffs

InsecticidesCotton Balls & Swabs

Baby Foods Cat Food Arrangements

Fresh juices & ciders BuffaloDeli Jewish Foods

CakesCreams

BreakfastChef Speciality Items Energy Drinks

International Foods Pasta Sauce & Pizza Sauces Pasta & NoodlesCanned Pasta

CrackersKitchen Gadgets

Cough & ColdBaby Formula Cat Litter Cut Flowers

Salads & HerbsChicken

Deli PicklesCookies

Desserts -‐ Refrgierated DessertsDesserts

FlavoriceSpices & Seasoning Peanut Butter / Jelly / Spreads Rice, Beans, & Grains Canned Vegetables

Corn ChipsLaundry Detergents Deodorants

Baby Needs Dog Food Plant Fertilizer/Soil

Tofu & Vegetarian Alternatives Hot Dogs & Sausages Deli SaladsCupcakes

DipsDinners & Entrees Entrees & Value Meals Juices

Stuffing & Breading Vinegars & Cooking Wines

Soups & BrothsDips & Salsa

Laundry Supplies Eye CareBaby Wipes Pet Food -‐ Other Plants

LambDeli Sandwich Spreads Danish & Pastries Dough Products

FishFresh Cold Soups

Milk Substitutes

Canned Tomatoes, Sauces & Pastes Dried FruitLight Bulbs

Feminie HygieneNutritional

Specialty / Seasonal

Tofu & Meat

Alternatives

Deli Uno PizzaHealth Conscious Eggs

FruitsIndividual Dinners

Milk Syrups

Granola / cereal / fruit bar Logs & WoodFirst Aid

MeatballsGourmet Foods

Jewish Speciality Items JuiceIce Cream

Packaged SaladsMixers

PopcornNewspapers & Magazine Foot Care

Pork

MuffinsMilk

JuicePizza

Non-‐Alcoholic Beer & Wine

Potato ChipsPaper Products

Hair Care

Seafood

PiesSour Cream

PastaPot Pies

Non-‐Dairy Beverage

PretzelsPesticides

Incontinence

Turkey

SconesWhipped Topping Pizza

QuichePowered Drink Mixes

Rice CakesPostage Stamps

Lip Care

Tarts & Mini Pastries YogurtSnacks

Sandwiches & SubsSeltzer

Single ServeRubber Gloves

Nail Care

ToppingSide Dishes

Smoothies

Snack PacksSponges & Scrubbers Oral Care

Vegetables

Soda

Snacks -‐ OtherStationery

Pain Relievers

Sports Drinks

Tortilla ChipsWater Purifiers

Shaving

Teas, Nectars, & Ades

Skin Care

Tonics & Mixers

Sleep Aids

SoapsSunscreen & Suntan Lotions

Vitamins & Supplements

Notes on changes:

Brand (A-‐Z)

• Reconsidered global navigation to be more appropriate for mobile app

Price (Low to high)

Popular

• Reordered the product categories into most used first, instead of alphabetical

Specials

• Dairy changed to Dairy & Chilled

Type (contextual to specific categories)

• Simplified Produce categories

Organic

• Simplified Meat & Seafood categories

• Renamed Home to Household for greater clarity

• Renamed Kitchen to Fresh Prepared Foods for greater clarity

HOME

• On the existing sitemap for the website Shop Online, the grocery section is much too

• Removed "Organic & Natural" category and created a "Filter & Sort" faceted search

available from any product category page that can filter for Organic products, as well as

Brand, Type, Popular, Price, & Specials

Filtering & Sorting for Shop by Aisle Product

Subcategories

Roche Bros Mobile Grocery Delivery App

Proposed site map

Shop by aisle structure (thru 3rd level)PROPOSED SITEMAP

PROPOSED SITEMAP

HOME



USER RESEARCH / Formative researchOne-on-one interviews yield incredibly detailed information into user attitudes, desires, motivations, and experiences. For the research study below, I interviewed Millennials about their attitude and experience with family ancestry and history. Through an analysis of the data, I devised potential personas and recommendations for further study and exploration.

Research study results

Adrienne Yapo/Sweet Gum Studio | Ancestry.com Research Study 11

• 2 out of the 4 mentioned Wikipedia specifically with relation to looking for historical information about people “When did Winston Churchill die?” or “Who holds the record for most goals in the Premiere (Soccer) League?” and the other mentioned Wikipedia in relation to looking for general historical information.

We observed two distinct research preferences/styles: “speed” and “relevance.” Speed When asked what is the most important thing when they are conducting a complex research process online, 2 out of 5 commented strongly and passionately about speed; the speed with which they can find information is crucial.

Relevance 3 out of 5 mentioned feeling overwhelmed by the amount of information available, and unsatisfied/frustrated with having to sort through irrelevant, misleading, dodgy, or repetitive information.

• Search term is too common or has other meaning • Many unreliable results to sort through — how do you know which is to be trusted? • The same source referenced over and over again > how get to the next level of information

Trusted Online Sources 4 out of 5 participants touched upon the idea of trusted sources on the web; they rely on these sources to help them feel confident about the quality of information they find. In some cases the trusted source was a specific website, in other cases, the trusted source was online digital libraries or databases. 3 of these participants — those might be categorized as more experienced researchers than the other 2 — rely on online digital libraries / databases sources to delve deep into a topic. Where do they prefer to perform complex research? 5 out of 5 participants would use desktop or laptop for complex online research. Reasons include:

• Large screen to have many windows open at once to focus in on detailed results or multiple tabs/sources • Navigate through results with ease • Online access is faster on desktop • Faster to operate equipment over tablet or phone, can type faster • Most websites work well on desktop/laptop, don’t always work well on tablets or phones • Would reduce frustration over mobile experience — eliminate trouble clicking on small links, dealing with

small screen, trouble scrolling through large data sets, ergonomically better option

“The speed at which I can get an answer at each stage, even if it’s not the right answer or the final answer…The fact that I can pursue paths very quickly and just move on to the next thing… Searchable databases produce answers quickly — that’s important to me. I don’t mind going down as many blind alleys as necessary, as long as it happens quickly. It doesn’t matter to me that the first things [aren’t right] — I work very fast. But every part of the process needs to go quickly.”

(Professional Topical Researcher)

“Being able to find something relatively quickly so you have a jumping off point — whether it’s finding out that I’m not going to be able to find out anything about this so I should revise my topic…or it’s like hey — this has already been done so don’t bother, or this is really going to help me. So just finding something so that I don’t get discouraged.”

(History Aficionado)

“Everybody has typed their last name into Google and sees what comes up. But my last name is very common so I get a whole bunch of stuff that never pertains to what I'm searching for. If there was an easier means than a broad search engine maybe there's something I'd use. Depends on what I'm searching for and what I'd need to do to get there.”

(Self Seeker)



USER RESEARCH / User modelingUser modeling techniques such as personas and key path scenarios can help organizations to understand the motivations behind user behavior and to develop products and services that best serve the user. The personas and key path scenarios below were developed for a Boston Public School to better understand parent communication needs and patterns.

Personas Key Path Scenarios

Adrie

nne Y

apo /

Beet

hove

n Web

site R

edes

ign

Site Objectives1. Content management:

Have an interface that makes it easy to create/update/manage new content and events.

2. Improve information architecture and site navigation: make content easier to find

3. Better communication / outreach with current & prospective families: Publicize school events, news & announcements more effectively, increase email communication, make it easier to connect with teachers & administrators

4. Enhance school’s reputation: Promote “green” & level one status and academic achievement, and make the site more useful to prospective parents

5. Enhance the classroom-parental connection: Develop a content platform for teachers to create their own classroom sites to better engage / inform parents of student work and learning

Jennifer It’s Friday evening and Jennifer is catching up with home stuff after a busy work week. The Beethoven’s International Night is coming up and Jennifer wants to volunteer for the event.

She remembers seeing a flyer about it come home in one of her kid’s school folders but she can’t find the flyer. Additionally, her son Joshua has been having trouble with his spelling lessons. She visits the Beethoven website to

find the teacher’s contact information and stumbles upon her son’s class website. She finds the spelling list for the upcoming week and helps her son to study over the weekend. Context of use: tablet/laptop at home

Scenario Step Functional Requirement Content requirement How this supports users goals

1. Jennifer visits the Beethoven homepage, looking for the date and time of International Night. She wants to volunteer for the event, but isn’t sure how she can help.

•Event calendar / Upcoming events list•News & Announcements widget•Search capability•Email subscription sign-up form•Informational text blocks•Embedded google calendar with map•Media > Photos / Video with clickable links to

relevant content

•Calendar events include date & time, location, description•News & Announcements - regularly updated•Email subscription sign-up form•Search query box•Contact info• Friendly, welcoming images•School address with google map

•Keep the site updated regularly so it’s useful and relevant

•Adding more content to the homepage makes it’s easier for parents to find what they are looking for without having to scroll down and down and down

2. She finds the event in the events calendar and after clicking on it, notices a volunteer sign-up sheet included as an attachment in the google event. She adds her name to the event set-up section and adds the event to her google calendar.

Event calendar easily updated through content management system. Must be free and regularly updated. Suggest embedding Google calendar. Use event attachment functionality to add volunteer sign-up sheet to events.

Calendar of events include:•Beethoven & BPS-related school events•Parent Council & Site Council Meetings•Parent Council sponsored events

— Events that require volunteers also include sign-up sheets in the calendar itself.

•Fundraisers•Children’s birthdays•Holidays & other important school district dates

•Detailed events calendar makes it easy for parents to find out what’s going on.

•Online sign-up sheets make it very easy to volunteer

•Helps to build community by making it easier for volunteers to communicate with event organizers

3. With that task complete, she looks at the navigation menu for contact information for her son’s teacher. She decides to click on the Classroom link in the navigation menu, and quickly finds the first grade classes / Ms. Davis’s class link.

•Dropdown horizontal menu must have submenu capability•Submenu could be vertical or horizontal•May depend upon content management theme

Intuitive hierarchy of information. Should easily indicate where parents should look for information regarding teachers / classes.

•Make content easier to find

4. She views Ms. Davis’s classroom page and finds her phone number and email address.

•Informational text- phone number & email address (mail to / mobile optimized)

Phone number and email address •Makes it easier to connect with teachers

5. She also notices that Ms. Davis has posted the lesson plans, including spelling lists, for every week in the marking period.

•Informational text•Photo gallery•Link to Donors choose•Downloadable pdfs / documents

•teacher photos, bios, & contact info•classroom photos•field trip information•supplies list / wish lists / donation requests•weekly lesson plans / curriculum / homework sheets•forms such as weekly reading contracts, permission slips,

•Enhanced classroom / parental connection. Teachers are able to better engage/inform parents in their child’s learning.

6. She downloads the spelling words list for the upcoming week and helps her son with his spelling list over the weekend.

•Downloadable pdfs / documents Lesson plans, curriculum materials, homework sheets, weekly reading contracts, permission slips, etc

•Enhanced classroom / parental connection. Teachers are able to better engage/inform parents in their child’s learning.

7. Her son gets 100 on his next spelling quiz! N/A N/A •Win / Win. Parent feels more involved with student’s learning, student gains confidence and gets better grade, teacher helped student learn better in a passive way —no need to schedule parent / teacher conference since parent “self-served” via website.

The Beethoven website redesign: Key Path Scenarios

Key Path Scenario

Jennifer is a busy working mom with 2 children who already attend the Beethoven. Joshua, age 6, attends first grade. Sophia, age 4, just started K1. Jennifer wants to be involved in her kids education but because she works full-time, she doesn’t have the opportunity to meet or talk to other parents after school on the playground, or the opportunity to do many activities at the school during the day. Jennifer feels disconnected from the school and wants to feel like she is part of the school’s community.

She tries to make it to the monthly Parent Council meetings, but isn’t always able to. She also tries to come to school events as much as possible, but because she isn’t sure when events are, she often misses out. The school does send home printed announcements in her kids folder’s, but because she’s often trying to manage her schedule from the office, she doesn’t have access to these printed papers when she needs to — or misplaces them among all of the other paperwork. The current website doesn’t have an events calendar, and she wishes there was a central location where she could quickly go online to see what’s happening every week and volunteer for events as her schedule allows.

She especially feels disconnected from the classroom. She wants to see pictures of what the kids are doing during the day, what activities the kids are working on, suggestions for extracurricular activities to enhance her kids learning experience, and a way to easily connect with her kids’ teachers and other parents. She wants to be able to go online to:

• Easily find out about what’s happening every week

• Find out what the Parent Council is up to and easily sign up to volunteer

• Connect with her kids teachers and other parents

• Enhance and augment her kids learning experience in the classroom with home activities

Age: 42

Occupation: Marketing manager for a large corporation

Family: Married, 2 children — Joshua, age 6 (first grade), Sophia, age 4 (K1)

Household income: $130,000

Technical profile: Constantly wired — very comfortable with technology. Uses laptop / tablet at home regularly, smartphone in constant use.

Internet connection: 15-20 hours per week online at homeInternet use: news, shopping, information, entertainment (i.e. Netflix), social media

Jennifer Current parent “ It’s important to me to be

involved with my kids’ school. But I work full-time and feel disconnected from the school. It’s hard to figure out what’s going on.”

The Beethoven website redesign: Personas Adrienne Yapo / Designing the User Experience. 11

Personas



USER RESEARCH / Competitive AnalysisUnderstanding user behavior, motivation, and needs through user research helps to improve usability and the overall user experience. A competitive analysis can be used to evaluate how the competition compares with a current product’s usability, usefulness, and user experience.

1 | Yapo — Competitive Analysis

EVALUATION CRITERIA

Information architecture Navigation structure Page layout Readability Breadth of information Meaningful flowOrganization & nomenclature is intuitive, particularly relating to product organiza-tion and categories

Easy to drill down or jump to areas of inter-est, particularly relating to appropriateness of mobile interface. (I.e. text lists are used for higher level IA and image grids are used for deeper level IA.

Pages are easy to scan and identify areas of interest. Product images and details are easily viewable and shopping cart is easily accessible.

Content is clear and unambiguous throughout the application — from prod-uct categories and descriptions to form labels and checkout process.

User can make decisions about products based on amount and relevance of infor-mation.

The browse, shop, and checkout process is linear and easy to follow.

RATING SCALE

Excellent Good Fair Poor Rated highly effective for this criteria

Rated mostly effective for this criteria but could be improved with minor ad-justments

Rated moderately effective for this criteria. Mid to major adjustments recommended.

Rated ineffective for this cri-teria — major adjustments recommended

SUMMARY OF FINDINGS

App Name Information architecture Navigation structure Page layout Readability Breadth of information Meaningful flow

Roche Bros. Current mobile app doesn’t allow grocery shopping / delivery — available on desktop-size website only. Competitive analysis will review current mobile app & parts of website shopping experience. See Roche Bros. review for detail.

Redmart

Peapod

Safeway

Amazon Fresh

GROCERY DELIVERY APPS — COMPETITIVE ANALYSISAdrienne Yapo | HF740 Information Architecture | May 11, 2015


Specials Specials > Top Specials Specials > Top Specials > Shop

Home Browse Aisles Browse Aisles (cont.) Aisles > Beverages Aisles > Beverages > Coffee Drinks Add to cart Product detail 1 Product detail 2

View Cart

Peapod DETAILED FINDINGS

Information architecture Navigation structure Page layout Readability Breadth of information Meaningful flow Excellent. Organization of product catego-ries is intuitive & clear. (1.0) Home screen gives user many options to organize shop-ping approach — Guess My Order, My Lists, Specials, Browse Aisles, New Arrivals. (2.0) “Browse Aisles” is particularly well organized.

Good. (1.1) Drop-down menu at top of screen makes it easy to navigate to major sections. App uses text-list menus for higher level IA (2.1), load-time very fast; deeper IA levels use image grids (3.0) appropriately.

Fair. Page scanability could be improved, with increased white space, larger product images, greater text hierarchy, and better use of proximity/grouping (3.0). Employs effective use of color to draw attention to important details — i.e. Remove/Add items to cart (3.1) & Specials (6.0-6.1). Overall design style seems dated. Recommendation: Update visual design to “flat” style, increase white space, product images, better text hierarchy & grouping.

Good. Content is clear and unambiguous. Labels are effective — i.e. “View Cart” shows running total at top of every screen (4.0).

Good. Product descriptions and prices are detailed and complete (4.1–4.2). Product images could be bigger, with more views. Recommendation: Increase size of product images and add more views.

Good. Browsing, viewing/adding/deleting items from shopping cart linear and easy to follow (5).

1.0 2.0 2.1 3.0

3.1

5

6.1

4.0

1.1

4.1 4.2

6.0


Redmart DETAILED FINDINGS

Information architecture Navigation structure Page layout Readability Breadth of information Meaningful flow Excellent. (1.0–1.5) Filter & Sorting options are especially well done. (2.0–2.2) Organi-zation of product categories is intuitive & clear.

Excellent. (2.0-2.2) Side navigation makes it very easy to access highest level IA. Use of text-list menus for higher level IA is effec-tive, load-time very fast; (3.0) deeper IA levels use image grids appropriately with large product images, good use of white space. Icon treatment in navigation (simple contrast of meaningful shapes and color) aids in legibility.

Excellent. Effective use of white space, large product images, text hierarchy, color, and grouping make information easy to scan and absorb.

Excellent. Content is clear and unambig-uous. Labels are effective — i.e. Filter & Sorting, Add To Cart, Total in Cart, Checkout Now. Choice of filter & sorting labels are especially well done.

Fair. (4.0–4.2) Product images and prices are detailed and easy to access, but product descriptions are minimal. Recommendation: Add more detailed prod-uct descriptions.

Excellent. Browsing, viewing/adding/de-leting items from shopping cart linear and easy to follow (5.0).

Home (Default to On Sale)

Product Categories > Beverages Beverages > Coffee Product detail 1 - Add to cart Product detail 2 Product detail 3 View cart

View On Sale > Filter & Sorting Filter & Sorting > Popularity Filter & Sorting > Category Filter & Sorting > Brands Filter & Sorting > Savings Main Navigation Product Categories (Aisles)

1.1 1.2 1.3 1.4 1.51.0 2.0 2.1

3.0 4.0 4.1 4.2 5.02.2



USER RESEARCH / Usability TestingUsability studies are a powerful research method for testing how users interact with a product. The comparative assessment below compared a company’s flagship online product with a leading competitor.



VISUAL DESIGNI have formal training as a graphic designer and have worked on hundreds of print, web, digital, and branding design projects over the years. Below are a few websites / web apps I’ve worked on.


Documents

Adrienne Yapo d - Sweet Gum Studio - Home · 2019-10-24 · ADRIENNE YAPO | USER EXPERIENCE PORTFOLIO | 4 UX DESIGN / Process sketches Sketching and low-fidelity prototypes enable