RESPONSIVE WEB REDESIGN USER RESEARCH | UX/UI DESIGN | USABILITY TESTS
PROJECT OVERVIEW The project is to help Mango Concept company to redesign the companyâ&#x20AC;&#x2122;s website to increase the conversion of customers who visit the website and to collect emails of poten<al leads and clients directly from the website.
MY ROLE INTERVIEW INTERACTION COMPETITIVE ANALYSIS
DESIGN EXPERIENCE
INTERFACE
USABILITY TEST
MARKET RESEARCH
I led the team members on redesigning the sitemap, structure, journey map, and user flow, along with designing interac9ons for the website based on our research and usability tests’ results. I was also responsible for transferred the web design into a responsive mobile design, including paper sketch, usability tests, low-fi mockup, prototypes, etc. In a team of four.
PROBLEM ABOUT THE COMPANY Mango Concept is a product company and innova9on l a b . I t s p e c i a l i z e s i n We b s i t e I n n o v a 9 o n , Development, Mobile App Development, UX Design and so on. As of 2017, the company has decided to focus the business efforts primarily on monthly website management services with monthly contracts as liPle as $150 a month.
THE PROBLEM The current website doesn’t present the companies business goal clearly. The conversion of customers is low. Also, compared to the web design trends now, the overall experience of the website is not good and user-friendly.
“We are looking to update our company website to reflect our 2017 goals and business while also highligh9ng our most recent work.” —— Bobby Cassely the director of opera4ons
“Learn” is actually part of the services, but they separate it and separate them with the works page. There are not many differences between their “work” and “products”. The company doesn't give the explana9on neither, which creates confusions. The layout of the main naviga9on bar is not comfortable visually.
The homepage has the background video which doesn’t have any connec9on with the company. The contact form is showed without presen9ng the visitor any informa9on about the company and what they have done.
Too many texts and informa9on. Lack of priority of the informa9on structure. Presen9ng the image which doesn’t help a user to know more about the company.
Lack of priority of the services they have. Too many services may also make a visitor of the website doubt what the company is good at on earth.
DESIGN PROCESS Concept Mapping
Research
Generating Features WIREFRAME PAPER PROTOTYPE USABILITY TESTING ITERATION MID-FIDELITY MOCKUP INTERACTIVE PROTOTYPE
FUTURE ITERATION
RESEARCH GENERATE INSIGHTS We first listed all the groups of people we should consider and generated who, what, how we needed to do the research on. Business Goal? Constraints?
Target group?
Who? Why?
What to look for?
What they are doing?
USER
COMPETITOR
STAKEHOLDER INTERVIEW & CONTEXTUAL INQUIRY We studied MangoConcept’s current website and set up a stakeholder interview with Bobby Cassely, the director of opera9ons of MangoConcept. We also had a contextual inquiry to MangoConcept’s office in Brooklyn, New York to gather more informa9on. On next page, I listed some key points we gathered from the stakeholder, Bobby Cassely, with the following ac9ons we did based on the ini9al interview gains and the market research we did.
Target Customer
Primary Service
Restaurant owners small business owners
Web Development/ Management $150 per month plan
Contents to present
Advantages
Por^olio Showcase Great Team
Good Service/ Communica9ons A good reputa9on among old clients
Interviews on potential customer Market Research Competitive Analysis
RESEARCH INTERVEIW Based on the informa9on we gathered, we interviewed two poten9al customers who owned restaurants/cafes in New York downtown: Japanese dessert store, TERIYAKI NYC, and chocolate cafe, Rose and Basil.
Competitive Analysis Whatâ&#x20AC;&#x2122;s more, we did compe99ve analysis according to the ini9al mee9ng and contextual inquiry to see how other design agencies or web management companies did for their website, analyzing the reason and principle behind the web design.
MOBILE RESPONSIVE DECISION MAKING REASONS FOR MOBILE RESPONSIVE We decided to do the mobile prototype for the responsive web design not only because MangoConcept wanted it, but also because of the research we had conducted.
1.INSIGHTS FROM MANGOCONCEPT One of the key insights we gathered was that MangoConcept currently got business mainly by Word-Of-Mouth and talking directly with people. There was the need to show company’s por^olio and brand image on mobile in an “elevator-pitch” situa9on. In this case, to make the website responsive for mobile use helps MangoConcept to get clients more efficiently.
MOBILE RESPONSIVE DECISION MAKING 2.INSIGHTS FROM RESEARCH What’s more, sta9s9cs show that there is a rapid increase on mobile surfing nowadays. Making the website mobile friendly is also helpful for companies’ SEO ra9ng.
PERSONA
We created two personas reďŹ&#x201A;ec9ng the group of customers we are targe9ng at: restaurant/small business owners who need a website for their brand image and promo9on.
JOURNEY MAP
I also created this journey map of how a user goes through the website and decides to work with MangoConcept. This helped us to understand how a poten9al user would feel during the whole process of decision-making.
USER FLOW & SITEMAP
Based on what we have researched, we designed the user ďŹ&#x201A;ow and the new site map of the website to not only help a user navigate on the website but also push him/her to contact MangoConcept.
WIREFRAME FOR WEB & MOBILE
Based on what we have researched, we designed the user ďŹ&#x201A;ow and the new site map of the website to not only help a user navigate on the website but also push him/her to contact MangoConcept. On next page, I showed the reasons behind the design and design change for mobile.
WIREFRAME | WEB
Global Naviga9on
Sub-menu linked to different sec9ons for a bePer naviga9on
Video as the background to show the company’s culture w/ CTA
Graphic to show the itera9ve, human-centered design process
Slideshow of past work in a frame of Mac/iPhone
Presen9ng the numbers of the company’s accomplishments
Animated moving words about the company’s capabili9es
Footer with sitemap, contact, and pricing links on every page
Half of the page is the contact form, while half of the page is the basic informa9on for different preferences.
WIREFRAME | MOBILE Design changes for mobile
USABILITY TEST
We conducted 9 web tests and 4 mobile tests in total. We prepared paper prototypes for both designs and scenarios/tasks for the testers.
USABILITY TEST
We conducted 9 web tests and 4 mobile tests in total. We prepared paper prototypes for both designs and scenarios/tasks for the testers.
Mobile Paper Prototype
Paper Prototypes
Cards for tes9ng and card sor9ng
USABILITY TEST
We conducted 9 web tests and 4 mobile tests in total. We prepared paper prototypes for both designs and scenarios/tasks for the testers.
Usability Test Questions Intro Home Page / First Impressions
As you use the site, I’m going to ask you as much as possible to try to think out loud: to say what you’re looking at, what you’re trying to do, and what you’re thinking. This will be a big help to us. Also, please don’t worry that you’re going to hurt our feelings. We’re doing this to improve the site, so we need to hear your reactions. First, honest I’m going to ask you to look at this page and tell me what you make of it: what strikes you about it, what you can do here, and what it’s for. Just look around and do a little narrative. If you visited this page, which link would you start with? Why? What would you expect? Without clicking, describe the options you see? What do you think they are for? Any more? Tell me about this area of the site. (parts they didn’t mention)
Task / Scenarios
Scenario
Task You want to see some samples of their past client work. How do you do that?
You are a business owner who is looking for a new website management service.
You are interested in learning more and contacting them. How do you do that? You want to see some some price quotes for Mango’s services. How do you do that?
You are a visitor who is looking to learn more about UX/UI.
You want to see if MangoConcept, as a product and innovation company, has this service. How do you do that? You want to see the team and who is teaching the class. How do you do that?
Conclusion
Before we conclude, what is your overall impression of the site? Is there anything else you would like to say?
ITERATIONS Based on our observa9on and analysis of the usability tes9ng, we had our itera9ons on both designs of web and mobile.
“I won’t click ‘contact’ before they prove themselves to me.”
SWITCH <
GET RID OF >
“I like the video and the general layout of the home page. It’s really clean and minimal.”
LANDING PAGE
“What is the difference between ‘What We Do’ and ‘What We Are Good At?’ I’m confused…they seem like the same thing…”
ITERATIONS Based on our observa9on and analysis of the usability tes9ng, we had our itera9ons on both designs of web and mobile.
MERGE
MORE INTERACTIONS
ABOUT PAGE
ITERATIONS
“Ooh, I like the hover funcGonality, that’s really cool.”
Based on our observa9on and analysis of the usability tes9ng, we had our itera9ons on both designs of web and mobile.
MODIFIED INTERACTIONS
GET RID OF
WORK PAGE
ITERATIONS
Add “Contact” “AHer reading your Work secGon and seeing the capabiliGes, I want to be able to contact you.“
Based on our observa9on and analysis of the usability tes9ng, we had our itera9ons on both designs of web and mobile.
SERVICE PAGE
“Wait what are these prices for? What about the other services?”
GET RID OF
MOCKUP & PROTOTYPE I used Sketch to create the mid-ďŹ delity mockup along with the ďŹ&#x201A;ow chart. I also used Facebook Origami to create the interac9ons we designed for bePer presenta9on to both users and MangoConcept.
Flow Chart
Build the interac9ons on Origami
RECOMMENDATIONS & FUTURE ITERATIONS RECOMMENDATIONS
NEXT STEPS
1. Add global naviga9on to both Web and Mobile versions. 2. Adopt easy-to-understand, personable language throughout the site. 3. Keep most important value proposi9ons and naviga9on “above the fold.”
Interviews with existing customers
Developing more high fidelity prototypes
Brand guidelines
More usability testing
4. Use a minimalist, simple design to let your work speak for itself. 5. Once the company gets more trac9on, add a “Press” sec9on.
THANK YOU FOR READING