Knosey App
Process + Mock ups
In practicing design thinking, I was given a task to come up with 3 key screens for a futuristic mobile app called ‘Knosey’.
The Brief
Knosey is a revolutionary app created in a future where one’s smartphone can be made to smell scents around them. It’s Shazam for aromas. Users of this app can find a restaurant near them by smell alone.
I started this project with a goal to establish the company’s visual design elements and branding, and to communicate the functionality of the app in 3 screens.
Mind Mapping
From the information I collected from the design brief, what words and imagery did I associate with ‘Knosey’? Who is the app targeted for? I started off the process by doing a mind map of the app, and came up with a list of associated words and objects.
From the list, I started to draw to see what would stick. It seemed like ‘pig’ and ‘nose’ were the most prominent to me so I started off drawing a pig, and then further simplified it to a nose with a nose. I did different reiterations — eyes, legs, body shape, and found what worked best. It was a creation that I believed embodied the overall message of ‘Knosey’.
Creating screens
I decided on 3 key screens to showcase the functionality of the app: title page, loading screen, and navigation.
Title Page
The title screen when you download an app is so important in establishing first impressions. It should clearly communicate what the app offers.
For the title screen, I used the tagline ‘What’s that smell?’ in addition to food icons, and the logo to reinforce the branding and help the viewer understand the app.
Loading Screen
When the user holds down the magnifying glass button, the orange scent illustration will be animated to indicate that the app is responding to the user’s request to ‘Find that Scent’.
This interaction is primarily modeled after the Shazam app, as it was mentioned in the design brief.
Navigation
Once the app locates the scent, it automatically maps the user to the scent, with an overview of how long it would take to get to the destination.
Menu icon is in the top left, positioned away from the start button, so the user would have to intentionally opt out of the current screen.
When brainstorming what the menu option would hold, I thought it would be interesting to explore options like ‘discover new scents’, ‘connect with friends’, and an option to locate friends close by to share the Knosey experience in real time.
Typography
I played with a lot of different type before settling on what would fit best for the app.
Serif vs. Sans serif?
I felt like a serif font would be too serious for the content of this app.
Clean modern vs. handwritten type?
I decided on a handwritten type, since I felt the purpose of the app was very personal and fun and wanted the type to be accessible to everyone.
Color
The background is a gradient of purple because it has connotations of intimacy, softness, and comfort. Since the app is so concentrated on our physical senses, and having it fulfill a personal need, it made sense to make this the primary color in the app. I used orange as highlighted color to create a sense of warmth and energy within the app.
Final notes
After creating the 3 key screens, I feel like I’ve successfully communicated the functionality of the app to the user. However, while making these screens I realize that there’s a lot of micro interactions that need to be fleshed out to truly develop a seamless experience for the user. It’s a work in progress, an I’m excited to keep developing and learning about design. If you have any pointers, I’d love to hear them! Feel free to drop me a line here.