Wireframing

Based on the pain points described by users and design heuristic evaluation, wireframes were made on Axure RP. There was particular emphasis made on navigation, locating products, and making the check out process more streamline.

Responsive Wireframe

The responsive wireframes were conceptualized based on the previous wireframes, and mainly focused on the homepage, product page, and check out process.

Usability Testing

For the resdesign of this responsive site, some goals were to have a strong home page that will let the user understand what the website and products are about. Presenting the idea that it is an Electronics e-commerce site and products are able to be purchased is critical for users to understand quickly when entering the site

Keeping the Navigation simple is a key goal in improving usability. Users should be able to move from the home page efficiently, and should be encouraged to explore effortlessly. Moving from the home page to product page efficiently  makes exploration and increases the likelihood of moving to the checkout page.

User Interviews

Understanding the users feelings towards e-commerce sites and attitude towards purchasing products online can be explored with user interviews.  Briefly understanding the users lifestyle, experience with the internet, and feelings towards purchasing online through the web and mobile devices can give insite before beginning user task questions.

User Task Questions

4 users were selected in order to have a larger sample size and reduce the significance of outlier data. Users familiar and unfamiliar to me with different background will be chosen to reduce biases. Reproducibility of the testing will be insured by keeping  the same questions consistent between user to user

Open Ended Tasks/Questions

• Open the Home page and explore for 20 seconds what are your thoughts?
• After being on the homepage do you understand the intent of the website?
• How do you locate products on the homepage?
• How do you think the filters on the product page would work?
• How do you locate products on the homepage?
• Show me how you woud go back from the check out page

Specific Tasks/Questions

• Move to the product page and try adding an item to your cart
• Go through the check out forms and place the final order
• Did you find the products clearly or not clearly?
• Do you understand the filter and sort by?
• Do you have any questions about the check out page?
• How do you locate products on the homepage?

Data Visualization

While users were moving through their tasks, their mouse movements and heat mapping data was being collected using Canvas Flip. The data collected will provide further foundation and solidify the comments they make regarding their exerperiece moving through their tasks.

Heat Mapping

Based on the heat mapping data and users comments. User 1 gravitated towards the carousel of images first. Bottom of the pages with the email subscriptions were ignored on both pages, indicating they could be insignificant and too small for users.

• Understands the intent of the app right away, by seeing the shopping cart and hamburger menu.
• When the hamburger menu opens, user does not click the X to exit out, but instead click off screen instead.
• User spent significant time on home page based on User flow map
• To select a product user does not click the image but instead clicks the whole thumbnail including subscription
• When asked to go back on Check out page, user understands to use the breakcrumb navigation
• Users inquired where is the cart page, and is confused that it went straight to check out

Click to View Mouse Tracking Video

Iterate from Feedback

While users were moving through their tasks, their mouse movements and heat mapping data was being collected using Canvas Flip. The data collected will provide further foundation and solidify the comments they make regarding their experience using the responsive mobile app.