Project 4

Responsive Web Design


Project 4

Responsive Web Design for Hexey

Lifestyle revolution

by Evon Tan

12 August 2015


Executive Summary

1. Project Brief

1.1 Problem Statement

1.2 Solution Statement

2. Discovery Phase

2.1 User Research

2.1.1 Scenario Mapping

2.1.2 User Process Flow

2.1.3 Journey maps

3. Wireframes and designs

3.1 Sitemap from Project 2 - Hexey Lifestyle Revolution

3.2 Wireframe

3.2.1 Navigation Framework

3.2.2 Home page Wireframe

4. User Test Video

4.1 User Test report

4.1.1 User Participant Recruitment

4.1.2 Assigned Tasks

4.1.3 Key Findings

4.2 Summary of findings

5. Design solutions/suggestions


Executive Summary

After delivering Hexey’s microsite proposal to expand its services to include additional options as a leader in the meal ingredients delivery market, the team has now proceeded into stage 2 development. For more details on the previous project refer to Project 2 - Hexey Lifestyle Revolution. The next phase of work is to develop Hexey’s microsite stage 2 development into an optimized responsive web design well for the future; where users on the move are able to access the site through the wide variety of devices. The responsive web design is an elegant and seamless way for Hexey’s microsite to load much quicker on mobile devices; eliminating the need to zoom in or out. Other attributes to Hexey’s responsive web design are that checkout pages are responsive, making it easy for user to purchase regardless of the device that they are accessing the site from. The ingredients shopping experience for the user across all devices at one unique destination is thus optimized and pleasant.

Using previous data collected from stage 1 development, the team reused the benchmark and personas to move forward in the development of storyboarding, journey mapping, scenarios mapping and tasks analysis. The personas helped establish the team focus and create user process flows on an empathic level through the personas perspectives. Design studio was set up for the team to work in an agile environment to spur ideas through series of paper prototypes and usability testing in an efficient and low-cost manner before moving forward to high-fidelity prototyping using industry standard software - Axure.

User participants were recruited based on their main characteristics similarity with the persona. Each user participant's test sessions were recorded for study purposes. The behaviours of the users’ interaction with the prototype and the way they carried out the specific tasks, allowed the team to note for recommendations for iterations. Hexey’s responsive web design exploration, has key findings with minor iterations identified from usability testing. It is recommended to work closely with a visual designer on the color schemes needed to implement on the prototype for clearer call-to-action motivation before performing the next usability testing based on other scenarios (user process flow) and secondary breakpoint using tablet.


1. Project Brief

Moving forward to Hexey microsite stage 2 development, our expertise have been engaged to create a responsive web design that will optimize users to manage their ingredient purchases more efficiently on the move.

The user-centered design project has been planned in 5 sections to meet the needs of the success-critical stakeholders.


1.1 Problem Statement

In today’s world where users are constantly on the move, increasing use and preferences of cross platform mobile devices browsing has been significant. Studies found from Mobile Marketing Statistics provided the team with clear indication of current up-to-date internet usage on mobile devices. The data has identified a significantly increased of audience using mobile devices with internet engagement at 51% whereas a drop of 42% of the audience uses desktop and laptops.

Source: Mobile Marketing Statistics 2015 by Danyl Bosomworth

On top of the increased internet engagement via mobile devices, statistics from Custora E Commerce Pulse identified a significant increase of purchase orders made from mobile devices. Orders increased from 19% in 2014 to 25% this February 2015.

Source: Monthly US Stats by Custora E Commerce Pulse

It would be detrimental if Hexey’s microsite is not responsive across mobile devices and miss the opportunities that present itself to capture existing and potential customers.

1.2 Solution Statement

The solution is to create an elegant and seamless responsive web design that loads quicker on mobile devices; eliminate the need to zoom in and out. Other attributes to Hexey’s responsive web design are that checkout pages are responsive, making it easy for user to purchase regardless of the device that they are accessing the site from. The ingredients shopping experience for the user across all devices at one unique destination is thus optimized and pleasant.

Background research:

Using previous data collected from stage 1 development, the team reused the benchmark and personas to move forward in the development of storyboarding, journey mapping, scenarios mapping and tasks analysis. For more information on background research methods performed, please refer to Project 2 - Hexey Lifestyle Revolution.

Proposed solution:

The proposed solution is to set up design studio for the team to work in an agile environment to spur ideas through series of paper prototypes and usability testing in an efficient and low-cost manner before moving forward to an interactive high-fidelity prototyping using industry standard software - Axure based on specific tasks (user flow // golden path) created around scenarios.

Testing Findings:

Usability testing on the low fidelity paper prototype has been carried out first where the team was able to iterate the designs in an effective and low cost manner before the interactive high fidelity prototype was carried out on 3 user participants. Based on the paths taken by the user, the types of errors made, comments from the user (capture in video with real time actions) and observations made by the expert has provided qualitative data for usability of the prototype.

Proposed solution:

An iterated solution based on the user feedback and expert’s evaluation are proposed for design iterations and next step implementation.

2. Discovery Phase

The team reused the benchmark and personas from previous data collected from stage 1 development, helped establish the tem focus to move forward to stage 2 development using a series of user experience techniques in the development of storyboarding, journey mapping, scenarios mapping, tasks analysis and create user process flows on an empathic level through the personas perspectives. For more information on background research methods performed, please refer to Project 2 - Hexey Lifestyle Revolution.

Method

Why did we pick this method:

Scenarios

Descriptions of the persona acting out a goal to ensure an implementation of better user experience.

Task Analysis

Learn what user would like to perform on the site.

User Process Flow

Clearly states the different decision point that the user makes,bridging the gap between user research and the design.

Journey Mapping

Crucial to build the customer’s emotional journey to highlight what the customer need and want from the series of interaction.

2.1 User Research

User research analysis is vital for the team to focus on user behaviours, needs, motivations and expectations. For more information on background research methods performed, please refer to Project 2 - Hexey Lifestyle Revolution.

2.2 Scenario Mapping

Scenario mapping is among one of the user experience analysis methods that we have performed under the discovery phase to help us understand on an emotional level and behaviour of our users.

Scenario 1

Jackie has been so preoccupied with her marketing campaign, she has let the monthly dinner that she hosts for her 4 girlfriends slipped out of her mind. Her friends mentioned that they would like baked chicken and she would like to purchase the ingredients on her mobile during her busy schedule in the office and while traveling home.

Task

  1. Search or browse for Baked Chicken.
  2. Select servings of 5.
  3. Proceed to checkout.

Scenario 2

Jackie is currently working on a major campaign. She is working so hard that she is drained mentally. The usual Thursday night drinks with the girls feel like a chore. She decides to move Thursday dinner to next week.

Task

  1. Cancel delivery for this Thursday.
  2. Change delivery to next Thursday.

Scenario 3

After seeing the doctors for a rash, Jackie is shocked to find that she has an allergy for eggs!

Task

  1. Remove eggs from her ingredients.
  2. Check out.

 


2.3 User Process Flow

The user process flow has been created based on the user experience technique, scenario mapping 1 of Task 1 and Task 2. The original process flow for Task 1 and 2 is shown below.

For the prototype, the team have design 2 additional user process flow where users have the ability to achieve their tasks using the following varied steps:

  1. Home Page > Click on Main Element (Browse Quick Dinner Recipes) under home page > Click on Baked Chicken Recipe > Baked Chicken Recipe > Select Servings > Add to Shopping Cart
  2. Home Page > Click on Side Menu  > Click on Ingredients > Click on Chicken Recipes> Click on Baked Chicken Recipe > Baked Chicken Recipe > Select Servings > Add to Shopping Cart

Task flow 2 for task analysis 3


2.4 Journey maps

Based on scenario mapping 1, the journey map carefully documents the persona’s needs, the series of interactions to fulfil those needs,and the resulting emotional states the persona experiences throughout the process.

The persona started out with a negative emotion as she realized she has forgotten about Thursday night dinner that she will be hosting with her four girlfriends. She has a neutral emotion when she whipped out her mobile to quickly search for the recipe and ingredients that she will need to purchase. The persona emotion dipped into a negative emotion as she is unable to finish her checkout process as she was called in to a meeting that takes up the whole day. The persona returns to a neutral emotion when she finally have time for a breather on the train back home. It is at this time she was able to continue her checkout process with no other distraction. Just when she was leaving work the next day, she found the purchased ingredients at her doorsteps. The persona started her day off in a good note as one of the things that was nagging her has now been done.  


3. Wireframes and designs

3.1 Sitemap from Project 2 - Hexey Lifestyle Revolution


3.2 Wireframe

3.2.1 Navigation Framework

3.2.2 Home page Wireframe


3.2.3 Baked Chicken Recipe Wireframe

3.2.4 Shopping Cart Wireframe

3.2.5 Checkout (Delivery form) Wireframe

3.2.6 Checkout (Payment form) Wireframe

3.2.7 Checkout (Order Preview) Wireframe


3.2.8 Checkout (Final page) Wireframe


4.Usability Testing

[Kindly refer to file name: “Evon - Usability Testing [Hexey:Lifestyle revolution]Responsive Web Design” .mp4 for the high fidelity prototype usability video highlight.]

4.1 User Test report

The purpose of the low fidelity paper prototype test is to test the usability of the web browsing experience at different breakpoints and to understand the mental model of the users. Tasks were provided to 3 users to test out the functionality and the understandability of the navigations, category page, product detail page, shopping cart and checkout process. Key findings were retrieved through assessing the users navigations through the path. The low fidelity paper prototype test allowed immediate improvements to be optimized for better user experience. Iterations were made on the paper prototype before the team started high-level fidelity prototyping using industry standards software Axure.

4.1.1 User Participant Recruitment

Based on the main user characteristic of the selected persona Jackie 24 year old Marketing Manager, a matrix is created to identify a preliminary list of users with  (1) as bad and (5) as very good (and frequency).

User Participants matrix for Usability Testing 1 on low fidelity.

User Groups

Food Knowledge

Purchase Cycle

Tech Knowledge

The Food Persona

Jackie, 24

Marketing Manager

5

5

5

User Participant 1

Rita Isareenuruk, 33

Marketing Manager

5

5

5

User Participant 2

Alexandra Douglass-Bonner, 30

User Experience Consultant

5

5

5

User Participant 3

Solomon Reich, 24

UX Designer

5

5

5


User Participant matrix for Usability Testing 2 on iterated high fidelity prototype.

User Groups

Food Knowledge

Purchase Cycle

Tech Knowledge

The Food Persona

Jackie, 24

Marketing Manager

5

5

5

User Participant 1

Daniel Setiawan, 32

Graphic Designer

5

5

5

User Participant 2

Rita Isareenuruk, 33

Marketing Manager

5

5

5

User Participant 3

Benjamin Mackenzie, 25

Designer

5

5

5

4.1.2 Assigned Tasks

Tasks assigned to the user participants were as follow:

  1. Browse for baked chicken recipe.
  2. Select a serve size of 5.
  3. Proceed to checkout.

The tasks were chosen to test that the

  1. label is not an issue for users
  2. the global navigation is not confusing
  3. the secondary categories are not confusing
  4. search function has a filtered result that is understandable to the users
  5. navigation in general is not confusing
  6. checkout process is easy

4.1.3 Key Findings

Low Fidelity Test:

High Fidelity Test:

4.2 Summary of findings

Low-Fidelity Test  // Task 1 - Browse or search for Baked Chicken Recipe.

Aims

Result

Participant 1

Participant 2

Participant 3

To see if user has difficulty navigating

No issue

No issue.

No issue.

To see if the task is completed

Yes

Yes

Yes

High-Fidelity Test  // Task 1 - Browse or search for Baked Chicken Recipe.

Aims

Result

Recommendations

Participant 1

Participant 2

Participant 3

To see if user has difficulty navigating

No issue

No issue. Followed the golden path.

Got confused with “Add a recipe” at the side menu before finding the “Ingredients” button.

Rearrange “Add a recipe” button at side menu to avoid confusion.

To see if the task is completed

Yes

Yes

Yes


Low-Fidelity Test  // Task 2 - Select serving for 5.

Aims

Result

Recommendations

Participant 1

Participant 2

Participant 3

To see if user has difficulty navigating finding button.

Did not see the button.

Did not realize where the button is.

Got confused with “Add a recipe” icon thinking it might be the “add serve size” button.

Create an obvious call to action button to increase serve size.

To see if the task is completed

No.

No.

No.

High-Fidelity Test // Task 2 - Select serving for 5.

Aims

Result

Participant 1

Participant 2

Participant 3

To see if call to action is obvious.

No issue

No issue

No issue

To see if the task is completed

Yes

Yes

Yes


Low-Fidelity Test  // Task 3 - Proceed to checkout

Aims

Result

Recommendations

Participant 1

Participant 2

Participant 3

To see if user is able to checkout.

User did not understand the “Got It” Section.

No issue.

User found page too cluttered.

Simplify page without sections.

To see if the task is completed

Yes.

Yes.

Yes.

High-Fidelity Test  //Task 3 - Proceed to checkout

Aims

Result

Recommendations

Participant 1

Participant 2

Participant 3

To see if user is able to checkout.

User found everything straight forward but was expecting more color difference in text field.

No issue.

No issue.

Work closely with a visual designer on the color schemes needed to implement on the prototype for clearer call-to-action motivation.

To see if the task is completed

Yes

Yes

Yes


5. Design solutions/suggestions

5.1 Suggestions after each usability testings

After the first low fidelity paper prototype testing, the team has made the following changes:

Task Flow 1 & 2

Task Flow 3

Based on the recommendations, the team optimized the low-fidelity paper prototype for rapid iteration cycle. Changes were made to the low-fidelity paper prototype eliminating the issues found from the first usability test.


After performing high fidelity Axure prototype testing, the team suggests the following changes:

Task Flow 1

Overall


5.2 Recommendations

Overall stage 2 development of the project has proved to be successful. It is recommended to work closely with a visual designer on the color schemes needed to implement on the prototype for clearer call-to-action motivation before performing the next usability testing based on other scenarios (user process flow). Once the visual design theme has been implemented, it is advised to perform usability testing on tablet breakpoint for our next step.


by Evon Tan                                                    `