Designed for the Masses, By the Masses
OVERVIEW
Initially the stage was set by the research. I was given analytics of the current mobile web E-com platform, this was to frame all solution design. The analytics defined user pathways, time on task, bounce rates, exit points. . I was to use the analytics to improve the user journey, 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 or content.
QUESTIONS DERIVED FROM ANALYTICS:
How could we help the user arrive in a product purchasing cycle faster? What Information Architecture could we use to help users get more out of popular features? How could we maximize affect of the spatial model for promotional campaigns? Could we maximize navigation to meet user expectations? I had data, I wasn't complaining.
WHAT I DID
Analytics Research
User Surveys/Card Sort
Comparative Analysis
Red Route
Sketch Initial Solution Designs
Wireframing - lo & hi fidelity
User Flow / Task Flow
Icon Design
Visual Design
Analytics Discovery
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. Without budget or access to users I would attempt to stake my claim on the analytics.
Surveying Users
I surveyed a small group who had online purchasing needs of office products in business. I developed an online interactive survey and card sorting exercise for local use using Adobes Flash. I visited each participant locally with a laptop and Silverback user testing application and asked each participant to speak their thoughts aloud while answering survey questions and sorting elements. Similar to a usability test this allowed me to capture their thoughts alongside their selections. All data was entered into a spreadsheet for review.
Mental Model
Mental Models help us understand what a user believes about a system and their expectations. Mental Models are constructed primarily on the users past experiences and what they think they know about a system or task. The users beliefs affect the way an application is designed because users base their actions on the mental model. When things don't act they way they expect users can be left confused. Often times we need this research as the context of the user interactions can change what a user expects, so something that seems simple has complexity because the context may change the cues of user expectation.
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 crumple bad ideas into paper balls I could use to practive my waste basket shooting skills.
WireFlow
After defining some user pain points and the 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.
Hi Fidelity & Visual Design
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.