Case Study - Mango Concept

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?