Details
PocketGeek wants to know your preferences in media so it can recommend you new digital and non-digital content that will peak your interest. It is a mobile app design developed from ideation to prototyping, below I highlight the various steps taken to get it to its current point in development.
I worked on the interaction design for the project; affinity diagramming, user testing, wireframing, branding, high fidelity mock-ups and prototyping.
Process
I start my process with affinity diagramming, organizing my tasks and time to ensure I stay focused throughout my process. I also break into defining my main pillars and functionality which assists me in defining a high level flow for the app.
User Testing
After I locked down the flow for the app I started drawing out the wireframes to ensure I had all of the basic functionalities and user inputs accounted for and so I can visualize the flow. I transferred all of my wireframes onto sticky notes so I could easily take them around for user testing and also so I could quickly iterate and make changes to my flow. I went through 40-50 rounds of user testing before honing in on my finalized app flow and before moving into the visual design and prototyping for the app, where I still continued to test my flow and interactions.
Brand & Style
When it came to the brand and style for the app I wanted to go for something simplistic and polished, using a flat design and taking cues from other applications that are image and media heavy.
For the logo I started with serif and san-serif font that I felt encompassed the personality of the app, deciding to go with the san-serif font as it gave off a more modern and stylistic look. I also played with some visual design elements that played off the words "pocket" and "geek", as well pulled from popular media based logos. I soon found though that these visual elements were pulling me away from the simplistic look I was aiming for, so instead I iterated on the type-based logo, playing with weight, capitalization and colour to pull together a polished look.
I then pulled together a style tile to show a sample of colours, typography, iconography, my logo and a screen made up in my defined style. I wanted a flat, non-textured design that would not pull from the imagery that would be shown throughout the application, using complimentary, eye catching colours that would guide the user seamlessly through the app.
