This is my second week working at Breathometer, a startup that builds breath analysis devices to help users better understand their health. We are nearly finished with Mint — a device that measures various chemical levels in your breath to give you an overall oral hygiene report. Another device, called Slim, measures the amount of acetone in your breath and uses it as a metric to calculate the amount of fat your body is burning.
The development stages of Mint are essentially complete, but Slim is still in the development process. As a frontend developer and designer, I’ve been assigned the role of creating the onboarding user flow. Because I’ve never had any formal training or business-level experience in design, my design process can most definitely be improved. I met with my manager and mentor today to discuss this project, and we’ve decided that the most valuable course of action for me is to go through the entire design process correctly, so that I can internalize it for the future. I’ve done some preliminary research, and the steps are as outlined below.

Low Fidelity

In order to conceptualize and put thoughts into something tangible, I used low-fidelity designs. Low-fidelity prototyping is often the first step when designing and allows you to quickly explore ideas. According to the site, usability.gov, low-fidelity communicates are typically either sketches or wireframes. These are intended to lay out potential ideas to pursue while also conveying the structure and overall flow. These two stages are often considered the ideation and concept validation points in the design process.

High Fidelity

After many cycles of low-fidelity designs, I finally arrive at an overall idea that resonates with me. I can now take the quick, generally black and white, as well as conceptual-focused sketches and wireframes, migrating them over to what are called high-fidelity designs. The designs still evolve, but the overall motif remains largely the same. High-fidelity designs are meant to add “color” to your designs in both a literal and figurative sense. They are no long static, one-pagers. Instead, they accurately represent the entire product — every screen is generally accounted for and a functional UI is sometimes implemented. While buttons and API calls are likely not active, the general user flow and UX can be seen.
High-fidelity designs begin in software programs like Sketch, then move to other rapid prototyping tools to gain that barebones functionality. From experience, it is very important that nearly every aspect of the design be reflected in your high-fidelity designs, at the very least in Sketch. As both a designer and software developer, it is much easier to collaborate and quickly build an MVP when all the frontend components are laid out in full view. Rather than coming up with hex values, widths, etc. on the fly, all properties should be known by the end of the high-fidelity design stage. It not only makes the engineer’s life much easier, but also the designer’s.

Visual

Here is a chart that appropriately sums up the progression from low to high-fidelity designs in relation to functionality.

Animations

Animations are the final step in the digital design process. There’s many different methods in approaching animations — mainly the timing in which the designing takes place. Animations can be a part of the high-fidelity stage or simply a part of the development process. My coworker explained it to me from the lens of a developer and designer. Based on his experience, it’s easier to implement animations while he is building the app, rather than when he is designing.
Many of the complex and intriguing animated designs you see online are generated in animation software with little regard to the capabilities of the developer. This is both good and bad in the sense that it allows for free creative thinking, but it can be next to impossible to correctly build in the actual app. He recommended to me that I do the same as him. As someone who both designs and codes, it makes more sense for me to throw in the animations during the building process. It will not only save time and effort, but also ensure that I don’t design a next to impossible animation that isn’t realistic.

Conclusion

Overall, design is a very complex and time-consuming process. It often seems unnecessary to go through all the steps I’ve listed above, but it’s incredibly important if you wish to design an engaging user experience. If you’re still not a believe that design is the centerpiece of anything and everything, I encourage you to watch Tony Fadell — designer of the first iPod and CEO/designer of Nest — during his Ted Talk on the Secret of Design. Hope you enjoyed this post!

Posted in Design with Design Process, User Experience, User Interface