Transcript
d
d
Adrienne Yapo
USER EXPERIENCE PORTFOLIO
ABOUT ME I’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.
Skills
Education
.
• Bentley University MS, Human Factors in Information Design (12/2016)
UX DESIGN
INFORMATION ARCHITECTURE
USER RESEARCH
• Massachusetts College of Art & Design BFA, Graphic Design • Boston University BA, English Literature
Experience • Harvard University, UX, Visual, & Digital Designer
VISUAL DESIGN
• Adrienne Yapo Design, Principal & Owner • BT Conferencing, Senior Graphic Designer • Harvard Medical School, Communications Manager
CONTENT STRATEGY
• MediaMap, Media Research Analyst & Associate Editor
ADRIENNE YAPO | USER EXPERIENCE PORTFOLIO | 2
UX DESIGN / Concept Prototypes Concept 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 | 3
UX DESIGN / Process sketches Sketching 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 | 4
UX DESIGN / Wireframes I Wireframes demonstrate hierarchy, structure, layout, navigation, and the organization of content. Perhaps more importantly, annotated wireframes communicate clear explanations for VIEW WIREFRAMES IN AXURE SHARE ROCHE BROS MOBILE APP WIREFRAMES http://127.0.0.1:32767/start.html#p=iphone_frame_for_desktop_view design decisions and can illustrate the benefits to the user.
1.2
1.3
1.1
X
2.1
3.1 1.4
1.5
4.1
1.6
SPLASH SCREEN 0.1 Only shows while app loads home screen, no user interaction.
Notes:
HOME 1.1 Global Flyout Nav — tap to view
1.2 Search — tap to enable search input box, Notes: Notes: also includes barcode scanner search and cancel search
GLOBAL FLYOUT NAV 2.1 Global Flyout menu, top level navigation, Tap to navigate, tap “X’ to hide.
Notes: Notes: Notes:
1.3 Cart — tap to view
SHOP BY AISLE LEVEL #1 3.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.
Notes: Notes: Notes:
SHOP BY AISLE LEVEL #2 4.1 “Beverages” tapped, reveals product subcategories.
Notes: Notes: Notes:
1.4 Personalization — welcome message displays 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
Annotated wireframes for a grocery delivery app for a local grocery store chain PROPOSED WIREFRAMES
ADRIENNE YAPO | USER EXPERIENCE PORTFOLIO | 5
Notes: Notes:
UX DESIGN / Wireframes II Wireframes demonstrate hierarchy, structure, layout, navigation, and the organization of content. Perhaps more importantly, annotated wireframes communicate clear explanations for ROCHE BROS MOBILE APP WIREFRAMES design decisions and can illustrate the benefits to the user.
8.1 5.1
5.2
8.2
6.1
5.3
6.2
7.1
6.3
8.3
6.4 7.2 7.5
6.5
PRODUCT CATEGORY 5.1 Left arrow navigates back, page title is shown to orient the user where they are.
Notes:
5.2 Filter button allows user to further filter and sort through product subcategories. 5.3 Larger product pictures help user to quickly identify products. Sale items are shown in red with crossed out original prices to the right. Tap on product image for more detail.
7.3
FILTER & SORT 6.1 Tapping Filter button pulls up faceted search options.
Notes: Notes:
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 further by Type (variable by category) or Specific Brand. 6.5 To apply filters to current product catergories, tap Apply.
7.4
8.4
PRODUCT DESCRIPTION - DETAILS
PRODUCT DESCRIPTION - NUTRITION
7.1 Product description page displays large image, multiple views (dots indicate how many images. User can either tap circles to see more images or swipe on image to view more).
7.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.
Notes: Notes: Notes:
7.2 Details shows product description information. See 7.5 for explanation Nutrition & Related) 7.3 To add or remove item from cart, tap – or +; number between will change accordingly. Cart total at right will also update to cue the user that item has been added.
Notes: Notes: Notes:
MY CART 8.1 Left arrow navigates back, page title is shown to orient the user.
Notes: Notes: Notes:
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 accordingly. 8.4 Press checkout button to begin checkout process.
7.4 Tap cart icon to access My Cart
Annotated wireframes for a grocery delivery app for a local grocery store chain PROPOSED WIREFRAMES
ADRIENNE YAPO | USER EXPERIENCE PORTFOLIO | 6
Notes: Notes:
UX DESIGN / High-fidelty Prototypes High-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 | 7
UX DESIGN / Flows Site and user flows are maps that help to define everything from big picture site hierarchy and process to low-level microinteractions.
Proposed Make a Payment flow
To view clickable / annotated prototypes: h_p://qzpt6y.axshare.com/#p=account_summary Password: bentley
The flow for SpeechTrainer’s responsive, mobile, and wearable sensor. Adrienne Yapo | adrienneyapo.com | sweetgumstudio.com A proposed redesign for Wells Fargo Online’s Make a payment flow.
9
ADRIENNE YAPO | USER EXPERIENCE PORTFOLIO | 8
INFORMATION ARCHITECTURE Effective information architecture helps users to efficiently find information and complete tasks. Organization, structure, navigation, labeling, and search systems are all crucial components of a MemChurch Website Redesign successful information architecture.
Home
News & Events Calendar
News Newsle3er Archive
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.
Listen
Worship
Donate
Resources
Contact
Harvard Chaplains
HDS
HU Mental Health Services
Music
Our Programs
Sermons Archive
Sunday Services
Harvard University Choir
For Harvard Students
Full Sunday Service Archive
Morning Prayers
Harvard Baroque Chamber Orchestra
Church School for Children
Morning Prayers Archive
Compline
Harvard Organ Society
Faith & Life Forum
About the Organs
Grants Commi3ee
Related Music at Harvard
Lectures
Tasks 1. Hear a sermon.
User #1 Results Media but would probably hit Worship
11. Make an appointment to talk to clergy. 12. Sign up for the newsletter. 13. Find out about interfaith initiatives on campus. 14. Make a contribution to Memorial Church. 15. Find out about the Organs.
Contact Subscribe Religion@Harvard Donate Music
About People
History
Rentals
Contact
Weddings
DirecJons
BapJsms
Parking
Memorials
User #2 Results User #3 Results Listen (or Worship). Would also want to see a link on Media Sermons page to this. 2. Find out what organ recitals are happening next week. News & Event and Music Music or Events Music 3. Find out when Appleton Chapel was built. About About > History About 4. Book a wedding. About? Religious Life? Not totally clear About Contact 5. Find parking for Sunday Services. Visit Contact > Would expect to see maps & parking info, Worship? Not totally sure directions 6. Email the finance office to check on your donation. Contact Contact > then look for finance office Contact or Donate 7. Download last Sunday’s bulletin. User confused. "Programs" thinks Sunday Programs. Worship, by list of Services. Doesn't think publications Media? That's where I'd go from experience Worship & Media? is good place to put this. 8. Find out what the church offers for Harvard students. Programs & Religious Life Unclear relationship between Programming & Religious Life, Programs Religious Life. Might be in either place 9. Find last month's newsletter. Hestitiates. Media? Publications? Doesn't think this is good term for this. News & Events More in blog section. 10. Find out if Memorial Church has church school for kids. Religious Life or Programs (Religious Education?) Programs or Religious Life Programs Contact Subscribe Religion@Harvard Donate Music
Contact Subscribe Religion@Harvard Donate Music
ADRIENNE YAPO | USER EXPERIENCE PORTFOLIO | 9
INFORMATION ARCHITECTURE Card 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.
Proposed site map – Beethoven Elementary School
Beethoven redesign
Proposed site map Home
For Teachers
Visit the Ohrenberger
Contact
Why we’re special
Upcoming open houses
Calendar
Meet our teachers
Google calendar
Awards
Events descrip=on list
School photos
Ra=ngs
School report card
School facility environmental report
Card sorting helped to develop the final site map for a redesign of The Beethoven Elementary School, a Boston Public School.
Direc=ons & Hours
News (blog)
Categories
Before & AKer School Programs
Weekly Lunch Menu
Classes
General School Info
Art Gallery
Downloadable forms
Useful resources & links
K1
K2
1st Grade
Get Involved
2nd Grade
Special=es
Parent Council
Site Council
Donate
Uniform order form
BPS links
Absent or late students
Decal order form
First in Math
Teacher photo & bio
Site Council
Emergency dismissal or appointments
Medical forms
Scholas=c Book order website
Classroom photo
Box tops
Announcements
Emergency & inclement weather
Other forms?
Class materials / curriculum
Donors Choose
Supplies list
Tax ID#
From the Principal
Parent Council
School climate survey
Parents & students
Fundraisers
Awards
Food services
Breakfast & lunch menu
School Uniforms
School Schedule
GePng to & from school
Normal school day
Drop off & pick up
Events
Gym day
Transporta=on
Press
Order form
Art Gallery
Health & wellness
Mrs. Shields
Mrs. Diaz
Annual Appeal
Stop & Shop A+
Student work
Contact info
Wish lists / Donors Choose
Report cards & homework
Nurse info
Sick policy
Medical forms
Cell phones
Personal property
Tax ID#
Student Handbook
Adrienne Yapo / Beethoven Website Redesign
About
ADRIENNE YAPO | USER EXPERIENCE PORTFOLIO | 10
INFORMATION ARCHITECTURE Faceted 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.
HOME HOME App ery Delivery Mobile Groc Roche Bros ap MAP site m l) eve l TE rd 3 Proposed SI u OPOSED structure (thr PR Shop by aisle
cials
Weekly spe d foods
ood Meat & Seaf
Deli
Bakery
Deli Cold Cuts Produce Bacon Deli Franks Foods Beef Fresh fruit Deli Jewish les tab Buffalo Fresh vege Deli Pickles s ider c & Chicken Fresh juices Deli Salads s age aus S & s h Spreads Dogs Salads & Herb Deli Sandwic natives Hot tarian Alter Lamb Tofu & Vege Deli Uno Pizza Tofu & Meat rmet Foods Gou tives rnaalls Alte Meatb Pork Seafood Turkey
Product hop by Aisle orting for S Filtering & S ies Subcategor ) A-‐Z Brand ( o high) Price (Low t Popular Specials categories) ual to specific Type (context Organic
ed Dairy & Chill
& Margarine rolls Butter d breads & Cheese Freshly bake reads & Rolls Creams Packaged B ted s -‐ Refrgiera sert es Des Cak Dips Cookies ucts Dough Prod Cupcakes ies astr P Eggs Danish & cious Juice Health Cons iality Items Milk Jewish Spec Sour Cream Muffins ing Whipped Topp Pies Yogurt Scones Pastries Tarts & Mini
Frozen Bagels , & Muffins Bread, Rolls Breakfast Desserts ntrees Dinners & E Fish Fruits Ice Cream Juice Pasta Pizza Snacks Topping Vegetables
Fresh prepare
s Snack Food Appetizers & Calzones y Items Chef Specialit Desserts alue Meals Entrees & V oups Fresh Cold S inners Individual D alads S ed Packag Pizza Pot Pies Quiche & Subs Sandwiches Side Dishes
Beverages Bottled Water a Coco Coffee, Tea, s Energy Drink Flavorice Juices tes Milk Substitu Milk Syrups
urchases
Shop past p
aking Cooking & B s Baking Need Desserts Foods International oning Spices & Seas reading Stuffing & B
Shop by aisle & Sauces Condiments Dressings ing Oil & Shorten es & Pizza Sauc Pasta Sauce ads r / Jelly / Spre Peanut Butte ooking Wines C Vinegars &
Mixers ine lic Beer & W Non-‐Alcoho everage Non-‐Dairy B Mixes Powered Drink Seltzer Smoothies Soda s Sports Drink rs, & Ades Teas, Necta s Tonics & Mixer
Delivery
Checkout
s & Soups Canned good a, & cereals s Grains, past Canned Bean ola Bars Cereal & Gran rs Package Dinne les Pasta & Nood & Grains Rice, Beans,
& Meat Canned Fish Canned Pasta tables Canned Vege s Soups & Broth s, Sauces & Pastes toe Canned Toma
My Account Snacks Candy & Gum Cheese Puffs Crackers Corn Chips Dips & Salsa Dried Fruit al / fruit bar Granola / cere Popcorn Potato Chips Pretzels Rice Cakes Single Serve Snack Packs r Snacks -‐ Othe Tortilla Chips
ty
Household
ct Repellent
Inse Insecticides ets Kitchen Gadg rgents Laundry Dete lies Laundry Supp Light Bulbs ood W & s Log s & Magazine per spa New Paper Products Pesticides ps Postage Stam s Rubber Glove crubbers Sponges & S Stationery iers Water Purif
Health & Beau
Laxatives Anatacids & & Swabs Cotton Balls Cough & Cold Deodorants Eye Care ne Feminie Hygie
Baby Baby Diapers Baby Foods Baby Formula Baby Needs Baby Wipes Nutritional
Pets Bird Food Cat Food Cat Litter Dog Food ther Pet Food -‐ O
Floral Accessories ts Arrangemen Cut Flowers r/Soil Plant Fertilize
Plants easonal Specialty / S
First Aid Foot Care Hair Care e Incontinenc Lip Care Nail Care Oral Care Pain Relievers
Shaving Skin Care Sleep Aids Soaps ns Suntan Lotio Sunscreen & s Supplement Vitamins &
e app ges: iate for mobil uch too Notes on chan more appropr section is m ation to be the grocery ical d global navig Shop Online, of alphabet • Reconsidere sitemap for the website first, instead ing most used • On the exist product categories into the • Reordered & Chilled ged to Dairy • Dairy chan ories Produce categ categories • Simplified od clarity eat & Seafo M d lifie y imp ld for greater • S search reater clarit to Househo ome H Foods for g Sort" faceted med as • Rena resh Prepared and created a "Filter & ucts, as well Kitchen to F category Organic prod • Renamed & Natural" an filter for c anic hat t Org " age p • Removed uct category rod p ny a ials available from rice, & Spec P lar, opu P , Brand, Type
SIT PROPOSED
ADRIENNE YAPO | USER EXPERIENCE PORTFOLIO | 11
USER RESEARCH / Formative research One-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
•
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. “The speed at which I c an get an answer at e ach 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 m e. I don’t m ind 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 m y topic…or it’s like hey — this has already been done so don’t bother, or this is really going to help m e. So just finding something so that I don’t get discouraged.” (History Aficionado)
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 “Everybody has typed their last name into Google sources on the web; they rely on these sources to help and sees what comes up. But my last name is very them feel confident about the quality of information common so I get a whole bunch of stuff that never they find. In some cases the trusted source was a pertains to what I'm searching for. If there was an easier m eans than a broad search engine maybe specific website, in other cases, the trusted source was there's something I'd use. Depends on what I'm online digital libraries or databases. 3 of these searching for and what I'd need to do to get there.” participants — those might be categorized as more (Self Seeker) 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
Adrienne Yapo/Sweet Gum Studio | Ancestry.com Research Study
11
ADRIENNE YAPO | USER EXPERIENCE PORTFOLIO | 12
USER RESEARCH / User modeling User 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.
Jennifer Current parent
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 home Internet use: news, shopping, information, entertainment (i.e. Netflix), social media
Key Path Scenarios
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
The Beethoven website redesign: Personas
Jennifer
Personas “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.”
Adrienne Yapo / Designing the User Experience. 11
Site Objectives 1. 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 classroomparental connection: Develop a content platform for teachers to create their own classroom sites to better engage / inform parents of student work and learning
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. Scenario Step 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.
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.
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.
Key Path Scenario 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 Functional Requirement • 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 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.
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) • Informational text • Photo gallery • Link to Donors choose • Downloadable pdfs / documents
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
The Beethoven website redesign: Key Path Scenarios
Context of use: tablet/laptop at home
Content requirement • 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 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
• Dropdown horizontal menu must have submenu Intuitive hierarchy of information. Should easily indicate capability where parents should look for information regarding • Submenu could be vertical or horizontal teachers / classes. • May depend upon content management theme
5. She also notices that Ms. Davis has posted the lesson plans, including spelling lists, for every week in the marking period.
7. Her son gets 100 on his next spelling quiz!
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.
N/A
Phone number and email address • 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,
How this supports users goals • 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
• 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
• Make content easier to find
• Makes it easier to connect with teachers • Enhanced classroom / parental connection. Teachers are able to better engage/inform parents in their child’s learning.
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.
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.
Adrienne Yapo / Beethoven Website Redesign
Personas
ADRIENNE YAPO | USER EXPERIENCE PORTFOLIO | 13
USER RESEARCH / Competitive Analysis Understanding 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.
DETAILED FINDINGS
GROCERY DELIVERY APPS — COMPETITIVE ANALYSIS Adrienne Yapo | HF740 Information Architecture | May 11, 2015
Information architecture
Navigation structure
Page layout
Readability
Breadth of inform
Excellent. Organization of product categories is intuitive & clear. (1.0) Home screen gives user many options to organize shopping 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 des detailed and comp images could be b Recommendation: images and add m
EVALUATION CRITERIA Information architecture
Navigation structure
Page layout
Readability
Breadth of information
Meaningful flow
Organization & nomenclature is intuitive, particularly relating to product organization and categories
Easy to drill down or jump to areas of interest, 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 product categories and descriptions to form labels and checkout process.
User can make decisions about products based on amount and relevance of information.
The browse, shop, and checkout process is linear and easy to follow. 1.1
3.1
RATING SCALE Excellent
Good
Fair
Rated highly effective for this criteria
Rated mostly effective for this criteria but could be improved with minor adjustments
Rated moderately effective Rated ineffective for this crifor this criteria. Mid to major teria — major adjustments adjustments recommended. recommended
Poor 1.0
SUMMARY OF FINDINGS App Name
Roche Bros.
2.0
Home
2.1
Browse Aisles
Browse Aisles (cont.)
Navigation structure
Page layout
Readability
Breadth of information
Meaningful flow
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
Aisles > Beverages > Coffee Drinks
Navigation structure
Excellent. (1.0–1.5) Filter & Sorting options are especially well done. (2.0–2.2) Organization of product categories is intuitive & clear.
Excellent. (2.0-2.2) Side navigation makes it Excellent. Effective use of white space, large very easy to access highest level IA. Use of product images, text hierarchy, color, and text-list menus for higher level IA is effecgrouping make information easy to scan tive, load-time very fast; (3.0) deeper IA and absorb. 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. Specials > Top Specials Specials > Top Specials > Shop
5
1.0 Home (Default to On Sale)
Specials
1.1 View On Sale > Filter & Sorting
1.2 Filter & Sorting > Popularity
Page layout
1.3 Filter & Sorting > Category
Readability
Breadth of informati
Excellent. Content is clear and unambiguous. 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 are detailed and easy descriptions are minim Recommendation: Ad uct descriptions.
1.4 Filter & Sorting > Brands
1.5 Filter & Sorting > Savings
1 | Yapo — Competitive Analysis
2.2 Product Categories > Beverages
Produ
6.1
Information architecture
View Cart
4.1 Add to cart
6.0
DETAILED FINDINGS Information architecture
3.0
Aisles > Beverages
3.0 Beverages > Coffee
4.0 Product detail 1 - Add to cart
4.1 Product detail 2
4.2 Product detail 3
ADRIENNE YAPO | USER EXPERIENCE PORTFOLIO | 14
5.0 View cart
Ma
USER RESEARCH / Usability Testing Usability 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 | 15
VISUAL DESIGN I 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.
ADRIENNE YAPO | USER EXPERIENCE PORTFOLIO | 16
