TEAM AVOCADO UX Design Spring 2017 Prof. Dom Propati
TEAM AVOCADO
Christine Choe Major: Studio Art School: Steinhardt 2018
0. Intro
Caroline Deng Major: Computing & Data Science, Marketing School: Stern 2017
Aaron Hoffer Major: UX Design, Engineering, & Entrepreneurship School: Gallatin 2018
Nan Zhao Major: Interactive Media Arts School: NYU Shanghai 2018
NOTES
• • •
0. Intro
All links in the Competitive/Comparative Analysis hyperlink to the respective websites. The Web Prototype is clickable. Additional next steps after our presentation: • Make a more clear “Careers” page • Highlight Dom's UX class even more. We thought of potentially moving it as its own section in the “Services” section. • Mobile version: Logo links to “Home” page instead.
TODAY
1. Approach 2. Personas and User Flows 3. Business and Company Analysis 4. Wireframes 5. Prototype 6. Conclusion
0. Intro
APPROACH
OUR APPROACH Iterative, User-centric, Non-linear
Wireframes + Prototypes Usability Testing Interviews: Potential Users + Contextual Competitive & Comparative Analysis Concept Mapping
1. Approach
OUR APPROACH Iterative, User-centric, Non-linear
1 stakeholder interview 2 potential user interviews 1 contextual inquiry 14 companies Competitive & Comparative Analysis Concept Mapping
1. Approach
Interviews: Potential Users + Contextual
9 web tests 4 mobile tests Usability Testing
Wireframes + Prototypes
PERSONAS AND USER FLOWS
MEET RICHARD. Richard Lee
Description Richard is the co-owner and co-founder of a popular dessert chain in NYC. He is a recent graduate of NYU’s Tandon School of Engineering, and is now dedicating all his time to running his business. His partner takes care of the operations and logistics, while he is in charge of managing the business’s online presence, PR, and business development.
Needs • •
Ex-Programmer Turned Dessert Entrepreneur Extroverted | Connected
Internet Proficiency 1
2
3
4
2. Personas and User Flows
5
•
Juggling multiple needs of his business Maintaining the “customer connection” through their online presence (Yelp, Instagram, website, etc.) Getting people who find out about their business online into the store
Frustrations • •
Current website management service is expensive Wishes for quality, instant service when problems arise
MEET FLORINE. Florine Chevalier
Description Florine is the owner and manager of a quiet bakery and café in the East Village. Since she was young, her passion has been baking, and she moved to New York to bring a beautiful, whimsical experience to her customers. She takes pride in her work, and is busy running around the city to run errands for her business.
Needs • •
French Chocolates and Bakery Store Owner Opinionated | Strong-willed
Internet Proficiency 1
2
3
4
2. Personas and User Flows
5
•
Creation of an online store to sell her chocolates Getting people to come to her truffle making classes She would like to delegate website management to someone else, but is looking for someone who will put the same quality and care she puts into her store
Frustrations •
She is so busy—she sleeps on average 4-5 hours a day and has not had a day off in the last 3 years
USER FLOWS Scenario: Florine wants to delegate her website to someone else to manage. She hears about Mango Concept through one of her business colleagues. Task: Florine wants to know more about the company.
2. Personas and User Flows
BUSINESS ANALYSIS
FROG DESIGN - DIGITAL TRANSFORMATION
• • •
Video on landing page of day-to-day work scenes CTA on front page going to Contact Compelling value statement
3. Business Analysis
HUGE INC - DIGITAL AGENCY
• • •
Global navigation Graphic for design process Wording such as “What we do,” “How we work,” etc.
3. Business Analysis
AKQA - IDEA & INNOVATIONS COMPANY
• • •
Minimalist design - lets the work speak for itself Highly visual representation of past client work Hover functionality
3. Business Analysis
FUELED - MOBILE DESIGN AND DEVELOPMENT
• • •
Services page includes brief list of services offered Brief explanation of each service Link to “Contact” page on the bottom of the page
3. Business Analysis
YIELDMO - MOBILE ADVERTISING AGENCY
• • • •
Personable Simple, easy-to-understand language A text box to learn more details about what the business is looking for Site is optimized for mobile
3. Business Analysis
COMPANY ANALYSIS - CONTEXTUAL INQUIRY
• • • • •
Laidback company culture Employees are driven, focused, hardworking and “multi-skilled” Personal care and touch for each project because it is a smaller company Mango has a client loyalty system and gets most of its customers through word of mouth Preference for phone over email
3. Business Analysis
WIREFRAMES
SITEMAP
4. Wireframes
LANDING PAGE - WEB
4. Wireframes
LANDING PAGE - WEB “Why would you put ‘Contact’ as your first call to action? It makes no sense. You have to prove yourself before people would be interested in contacting you”
4. Wireframes
LANDING PAGE - WEB “I like the video and the general layout of the home page. It’s really clean and minimal” “The design is very crisp, clean, and simple. I like it.”
4. Wireframes
ABOUT - MOBILE
4. Wireframes
ABOUT - MOBILE “What is the difference between ‘What We Do’ and ‘What We Are Good At?’ I’m confused…they seem like the same thing”
4. Wireframes
During usability testing, we also discovered we forgot to include a “Team” page
ABOUT - MOBILE
4. Wireframes
WORK
4. Wireframes
WORK
4. Wireframes
WORK “Looks good—everything seems pretty straightforward"
4. Wireframes
“Ooh, I like the hover functionality, that’s really cool.”
SERVICES - WEB
4. Wireframes
SERVICES - WEB “After reading your Work section and seeing the capabilities, I want to be able to contact you“
“Wait what are these prices for? What about the other services?”
4. Wireframes
SERVICES - WEB
“Seems pretty straightforward and userfriendly. It’s a pretty normal website.“
4. Wireframes
PROTOTYPES
WEB - LANDING PAGE
5. Prototypes
WEB - LANDING PAGE
<
5. Prototypes
>
WEB - LANDING PAGE
<
5. Prototypes
>
WEB - LANDING PAGE
5. Prototypes
WEB - ABOUT
5. Prototypes
WEB - ABOUT
5. Prototypes
WEB - ABOUT
5. Prototypes
WEB - ABOUT
5. Prototypes
WEB - ABOUT
5. Prototypes
WEB - WORK
5. Prototypes
WEB - SERVICES
5. Prototypes
WEB - SERVICES
5. Prototypes
WEB - SERVICES
5. Prototypes
WEB - CONTACT
5. Prototypes
WEB - CONTACT
5. Prototypes
WEB - CONTACT
5. Prototypes
MOBILE MOCKUP
5. Prototypes
5. Prototypes
5. Prototypes
5. Prototypes
5. Prototypes
RECOMMENDATIONS AND NEXT STEPS
RECOMMENDATIONS 1. Add global navigation to both Web and Mobile versions. 2. Adopt easy-to-understand, personable language throughout the site. 3. Keep most important value propositions and navigation “above the fold.” 4. Use a minimalist, simple design to let your work speak for itself. 5. Once the company gets more traction, add a “Press” section.
6. Conclusion
NEXT STEPS
More usability testing
6. Conclusion
Developing more high fidelity prototypes
Brand guidelines (wording, color palette)
Interviews with existing customers
THANKS FOR LISTENING!
QUESTIONS?