adrienne yapo d...ux design / process sketches sketching and low-fidelity prototypes enable rapid...
TRANSCRIPT
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
ADRIENNE YAPO | USER EXPERIENCE PORTFOLIO | 3
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
ADRIENNE YAPO | USER EXPERIENCE PORTFOLIO | 4
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
ADRIENNE YAPO | USER EXPERIENCE PORTFOLIO | 5
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
ADRIENNE YAPO | USER EXPERIENCE PORTFOLIO | 6
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
ADRIENNE YAPO | USER EXPERIENCE PORTFOLIO | 7
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.
ADRIENNE YAPO | USER EXPERIENCE PORTFOLIO | 8
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
ADRIENNE YAPO | USER EXPERIENCE PORTFOLIO | 9
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.
ADRIENNE YAPO | USER EXPERIENCE PORTFOLIO | 10
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.
ADRIENNE YAPO | USER EXPERIENCE PORTFOLIO | 11
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
ADRIENNE YAPO | USER EXPERIENCE PORTFOLIO | 12
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)
ADRIENNE YAPO | USER EXPERIENCE PORTFOLIO | 13
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
ADRIENNE YAPO | USER EXPERIENCE PORTFOLIO | 14
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
4 | Yapo — Competitive Analysis
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
3 | Yapo — Competitive Analysis
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
ADRIENNE YAPO | USER EXPERIENCE PORTFOLIO | 15
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.
ADRIENNE YAPO | USER EXPERIENCE PORTFOLIO | 16
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.