Office Depot

Designed for the Masses, By the Masses

OVERVIEW

Research of the analytics of the current mobile web E-com platform would set the initial stage for this project. The analytics determined what people were clicking. The idea was to explore how to make it better, to light the path inward with a few specific goals in mind. This project sprint was focused on home screen UX and how it would define the path into the features. How could we help the user arrive in a product purchasing cycle faster? What placement could we use to help users get more out of popular features? How could we maximize affect of the space for Hero promos,  maximize promo messages and access other areas in one click from home? At the moment all I had was data and a willingness for change, how could I fail?



MY ROLE

Analytics Research
User Surveys/Card Sort
Comparative Analysis
Red Route
UX Design
Initial Sketches
Wireframing - lo & hi fidelity
User Flow / Task Flow
Icon Design
Mock Ups






Analytics Discovery

Initial research began with analytics. By analyzing user focus through clicks and views we could see where users navigated, but we could not see their pain, their habits or their feelings on what they wanted to do. This made it difficult to be empathetic to users. Stuck on the lack of users to survey, this project was going to be based on an assumptive model of what needs to be designed to enhance the UX. Without budget or access to users I would attempt to stake my claim on the analytics. Quantitative studies can be misleading and offer zero storyline and if you know me, I am all about the user story, for now I would forego the qualitative research and just look at the numbers.....Ugh!

User Research

Without user input I had no qualitative reasoning and was filling in holes with assumptions. Client offered no budget for user research but it had to be done, I quickly put together a list of users. Surveys consisted of 30 people who all had online purchasing goals in business or other. To get the job done quickly (no budget remember?) I developed a digital survey and card sorting exercise in a Flash online environment, the survey would flow right into the card sort and dump all data into a DB. The tool was online so I could access a few people remotely as well. I set up laptops/go pros in seperate rooms and asked each participant to speak their thoughts aloud while answering survey questions and sorting elements. Later, I would combine video of laptop activity and camera capture to view user activity. Similar to a usability test this allowed me to capture their thoughts alongside their selections. The goal was to determine a user preferred selection flow from the home screen into the app.

Mental Model

I love users, especially when they just get to talk randomly about stuff they love or hate. No budget, no time, Guerilla tactics... and I got some qualitative feedback, Yesssss! Time being short of course I chose to construct a mental model using the basics of persona based input taken from the surveys. Mental models take time so it may have been foolish in this sprint.  The users basically bellowed out loud several models of behavior that could be visualized. Would this align with analytics or my first run thought process?

Initial Sketches

Having employed both analytics research (Quantitative Analysis) and user input (Qualitative Research) it was now time to iterate on ideas to solve and create the UX/UI that would face users. Break out the pencil, sketch and repeatedly crumple bad ideas into balls of 'never look back' garbage fodder. 

WireFlow

After defining some user pain points/mental model, there was a clear directive that getting users into the flow of product purchasing was most important. How do we support the idea of "Get me in and Get me out!" that users were communicating. Three main visual points of interaction existed, the Search bar, the Hero and the Top picks section. Search gets 'em right to it. The hero would be used more for promos and product. The top picks would draw the user visually into the product pipeline. I hypothesized two things: 1. A two column approach could drive the user vertically right down a path of product entry - search/ hero/ browse/ top picks/ and in they go, and 2. that the addition of a "last viewed" section in top picks could also be added with the horizontal scroll to hasten product discovery. This section may also be designed to isolate product view and search functions which could delight the user in this destination.

WIREFLOW

Prototype

Lo-Fidelity prototype allowed us to see the path that I had hypothesized to be the solution to users need and a way to get them into the product pipeline as quickly as possible.

view app

Hi Fidelity Mock Ups

Another aspect of the project beyond analytical designation of high level features, was to interpret possible stylings for the Hero promos that would adorn the home page of the app. It was the desire of the team to disrupt the norm and do the heros different, but how and to what effect would this resolve. We had no data to fortify any decision, all we had was the desire to give this iteration a possible difference in hopes users would delight in the change. It would seem some A/B testing might be in order.