Sophie
This project is based off of a client job looking to create an application that compiles data to compare various items to gather information, make educated decisions, and smart purchases for various items. This version is slightly altered, but maintains the same spirit of the original app design. This version focuses on technology—using the app to compare phones, laptops, and computer hardware to make smart purchase decisions.
It starts with a problem
My client wanted to create an application that would allow users to easily compare different devices across retailers, sites, and whatever else deals in the way of computer hardware.
Here’s what I had to start with:
-
The direction was that it needed to be easy to use, easy to compare, and easy to buy. A simple path that allowed the user to end with a purchase without inconveniencing them.
-
It also had to have a sign in feature that allowed users to look back at what items they viewed and create component sets.
-
The user needs to naturally end up in a position that they are able to purchase their items, be able to add their items to a cart, be able to edit their selections or all of the above.
With the direction set, I immediately went to the drawing board.
What do you want out of a tech spec app?
To make sure I filled the needs of people who may be using the application, I started by putting out a poll on social media to figure out what people would be looking for.
Not that it was very shocking given where the surveys were posted, the people that responded were more interested in practical use and functionality over visuals. Granted, I wouldn’t sacrifice ease of use over aesthetics, this helped confirm where I was wanting to go from the start.
Drafting
I like my drafts to show a general conditional flow so that the engineers can locate potential issues. early on. All apps meant for the general public should have a few essentials—it needs to have a splash screen, onboarding, a way to keep them tied to the application (usually a profile or sign on feature), and a permission agreement.
The meat of the app comes from the actual experience the users has from it. I wanted to keep it simple, but cyclical. Allowing someone to choose an item, change their mind, and end up back where they were without having to retrace any steps. Alternatively, they should be able to select something, add it to their list, and reset for a new item to add.
You always want a clear way out when designing an experience, especially in something that has very high potential to become cluttered. One or two drafts later, I eventually settled on this one.
The client liked the general flow and didn’t see any issues up front, so we proceeded to move on with a wireframe.
Persona: Steve Stills
The first persona developed was a computer enthusiast named Steve Stills.
Steve is in his late 20’s and lives in a single family home that he shares with his room mate. They both recently graduated college and Steve is debating on continuing his education depending on how he feels about rendering.
After trying to run 3D software on his current laptop, he learned quickly that he needed a new computer. The software ran clunky, couldn’t process cycles in real-time, rendering a single frame would take hours and his computer was a few degrees from melting his table.
He really likes the idea of working in 3D and regardless if he pursues it, he’d like to upgrade to something that will be more versatile in the future.
The User Journey
After fleshing out the user journey of Steve, we can find a few things that need adjusting. He needs to be able to access the brands filter of the computer component list without having to go through types and he needs to be able to group component sections together—ex: there should be a comparison group for just motherboards, a group just for processors, etc.
This is something that should happen simultaneous to the user though, so Steve should never have to choose what comparison group he’s in. If he’s looking at processors, the app will need to recognize the category he is in and automatically shift to that on the comparison list.
This idea spawned a simple drop down adjustment on the “Build it” screen that asks what build you are working on.
Wireframe Version 1
The first wireframe cascades into a pretty self-explanatory progression. The user starts off at the home screen and depending on what they sort by (popular or by device) it will take them down the same path. They always end up where they can review the prices of the items selected. The layout emphasizes button interaction, using relatively large tiles to act as the primary interaction points.
At this stage it lacked a path for people who wanted to build their own desktops. Considering the primary demographic is likely going to be filled with people wanting to do just that, it was adjusted in version 2.
Wireframe Version 2
In version 2, the build it section was inserted and added to the experience loop.