Responsive Web Redesign

TITLEIMG

OVERVIEW


The project is to help Mango Concept company to redesign the company’s website to increase the conversion of customers who visit the website and to collect emails of potential leads and clients directly from the website.


Mango Concept is a product company and innovation lab. It specializes in Website Innovation, 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 little as $150 a month.

As the director of operations, Bobby Cassely says, “We are looking to update our company website to reflect our 2017 goals and business while also highlighting our most recent work.

*The Online pdf report version of the project can be seen here.

MY ROLE: UX/UI Design, interaction design

sitemap, user flow, wireframe, usability test, low-fi mockup, testable prototype

Tool Kit:

Sketch, Facebook Origami, Illustrator, Pencil & Paper, Post-it

I led the team members on redesigning the sitemap, structure, journey map, and user flow, along with designing interactions 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.
Team: Caroline Deng, Christine Choe, Aaron Hoffer

PROBLEMS

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.

problem.001.jpeg

OVERVIEW OF THE APPROACH

designProcess.001
Design Process

RESEARCH

We listed all the groups of people we should consider for this project. We needed to know what MangoConcept needs are, what the business goal and constraints are; what the visitors of the website look for; who are the target group that MangoConcept wants to convert into the actual clients; what the competitors are presenting on their websites and how.

We studied MangoConcept’s current website and set up a stakeholder interview with Bobby Cassely, the director of operations of MangoConcept.  We also had a contextual inquiry to MangoConcept’s office in Brooklyn, New York to gather more information.

Here are some key points we gathered from the stakeholder, Bobby Cassely:

Research.001

Based on the information we gathered, we interviewed two potential customers who owned restaurants/cafes in New York downtown: Japanese dessert store, TERIYAKI NYC, and chocolate cafe, Rose and Basil. 

What’s more, we did competitive analysis according to the initial meeting 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.

This slideshow requires JavaScript.

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.

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 portfolio and brand image on mobile in an “elevator-pitch” situation. In this case, to make the website responsive for mobile use helps MangoConcept to get clients more efficiently.

What’s more, statistics show that there is a rapid increase on mobile surfing nowadays, and making the website mobile friendly is helpful for companies’ SEO rating.

reasonForMobile.001

Personas & User Flow

We created two personas reflecting the group of customers we are targeting at: restaurant/small business owners who need a website for their brand image and promotion.

This slideshow requires JavaScript.

 

userflow:story.001
Journey Map

 

I created this journey map of how a user goes through the website and decide to work with MangoConcept. This helped us to understand how would a potential user think about and consider during the whole process of decision-making.

屏幕快照 2017-04-04 下午4.10.33
Sitemap

Wireframe & Usability Testing

Wireframes for web & mobile

Based on our research results and the user flow, we designed the sitemap and had our initial wireframes on paper for both for the website.

initial wireframe.001
Paper Wireframe Design with examples

Then I designed the wireframe for mobile based on our website design. I tried to keep the consistancy between the web version but also designed the interactions based on people’s behaviors on a mobile screen.

wireframe-mobile.001
Initial paper wireframe
wireframe-mobile.002
Design for the mobile version

Usability Tests

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
Scenario & Tasks for Usability Test

Iterations

Based on our observation and analysis of the usability testing, we had our iterations on both designs of web and mobile and developed low-fidelity mockup.

This slideshow requires JavaScript.

Mockup & Prototype

I used Sketch to create the mid-fidelity mock-up along with the flow chart. I also used Facebook Origami to create the interactions we designed for better presentation to both users/testers and MangoConcept.

user Flow
User Flow

Here are some demos of the interactions I designed specifically for mobile, which are different from those on the web version, in order to offer users a better experience viewing the website on their mobile phones. I used Origami to create the interactions.

demo1Home
Home Page
demo2About
About Page
demo3Work
Work Page
demo4Contact
Contact Page
origami screenshot.png
Origami Interface

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.

Next Steps

nextsteps.001.jpeg

Through this project, the biggest challenge I had is to balance between the client and the actual users. We should not only give users a good experience viewing the website and get what they want but also should meet the clients needs to have some certain features. For example, through the interviews and research, we knew that people rarely fill a form to a company on their website but rather prefer calling them or emailing them directly. However, MangoConcept insisted to have a contact form and wanted to have more client conversations.

To balance this, we designed a contact page with both form and the basic information of the company with clear layout design. We also had contact info in the footer on every page. What’s more, on the end of every web page( except the contact page itself), there is a gap section with a button linked to contact page to ensure that on every stage, if a user wanted to know more about the service, they have something triggering them or pushing them to the company.

I also learned Origami from scratch to present the interactions better to the client. The learning itself made me feel a sense accomplishment as well.:)

Ah! Last but not least, I love our team. We are all the best! 🍋

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s