A simple kitchen timer app that lets you view time quantitatively.
What does Bar do?
View Time Quantitatively
Bar displays time in a vertical format, mimicking the at-a-glance functionality of an hourglass.
One-Handed Timer Operation
The metaphor of a "modern hourglass" is kept by dragging up from the bottom of the bars.
Multi-Timer App
More timers can be added to the home screen to be viewed from afar.
Design Challenge
Design a simple timer app for a specific audience. App competitor: Google Android Default Timer Audience: People who want to set a timer in The Kitchen
APP DESIGN PROCESS 1. App Teardown & Competitive Research -Understand functionality and user flows of current timer 2. Concepts for UX -Ideate interfaces that would solve a user's needs 3. User Testing and Iteration -Apply interfaces and refine UX to identify pain points and solutions 4. App Identity and Design Language -Create brand guidelines around the app
App Teardown & Competitive Research
Breaking down a competitor app To better understand what a real-world timer app would do, a breakdown of the Google Android default timer app was performed. From this breakdown, strengths and weaknesses from three tasks performed were found when tested with a target audience of kitchen users.
Concepts for UX
Ideating three directions for a timer app After finding these strengths and weaknesses, three directions for potential app design were generated to explore possibilities for different audiences.
Exploring Microinteractions with Concept 1 The first concept had a strong direction, quantifying time while still keeping a simple user interface. A prototype was rebuilt using Principle, a prototyping app used in defining motion and microinteractions.
User Testing and Iteration
Refining a direction to fit a user's needs Users were interviewed in order to document where pain points of the current app took place when using the app. In order to completely test the app, three main task flows were established for the tester to complete. Main insights included in the task flows: 1. Set a timer -Bar metaphor to increase time was intuitive -Timers should be pre-named 2. Edit a current timer -Pencil icon was hard to tap -Current time could be altered easily 3. Create Another Timer -Button was intuitive, but transitions were slow
App Identity and Design Language
App Design Language Guidelines After the app was done, a branding system was built around the user experience. Using Design Language that was consistent throughout the look and feel of the app completed the overall user experience for a positive, seamless, fluid interface.
Bar. Mental Model In order to further understand the app, a mental model was made to document what the app's structure would look like in a user's mind. Bar primarily consisted of two main modes, and the option to edit and add other timers.
Final Product
Takeaways
-Analyzing competitors gives light to new design opportunities. As more and more apps populate phones, the market fills with a diverse set of methods for solving the same problem. Analyzing already existing apps can help reveal pain points that can be solved with your app.
-Simplicity is top priority for good UX. An app can be cool when jam-packed with features, but without an intuitive interface, a user can be left stranded and unaware of the functions of an app. Even if it means sacrificing a cool feature, the fact that a user can easily navigate the interface should be the main objective.
-User Research is #1. Conducting research on users is the best way to gain valuable feedback on an app. Users uncover pain points and interface blocks that the developer would never catch themselves.
Project Context UX Design, Interface Design, 3D Design Client Andrew Allen DESIGN 371: Interface Design 1 Duration 4 weeks Programs used Cinema 4D, Octane Render, Photoshop, Illustrator, Premiere Pro, After Effects, Figma, Principle
