Daily Dozen

Rebranding and new UI for the nutrition app.

Branding + UX design + ui design

Overview

The Daily Dozen app is an extension to the book How Not to Die, a book on nutrition written by Dr. Greger. The app helps its users kickstart a habit of healthy eating. It’s a useful app to those who could bare with the mediocre usability and design.
‍
This project entails a complete redesign of the app, including its usability, branding and UI-design. The project started when I analyzed and redesigned the UX of the app in 2019 as a project at the Digital Design-program at Yrgo. I continued working on the app outside of my studies - finishing the project in 2020 and handing over my work to the developers.

What

Usability testing
UX Design
Rebranding
UI Design
UX Guidelines

Where

School (Yrgo)
Spare time

When

Fall 2020

Personality

Friendly
Uncomplicated
Intelligent
research and ideation

Understanding where we are

A thorough analysis of the old Daily Dozen app was in order. I started out with 5 usability tests using the think-aloud protocol and followed up with a heuristic evaluation based on Nielsen’s 10 heuristics, which generated a lot of insightful qualitative data.
‍
I then used an affinity diagram to cluster the findings into categories, based on who experienced a problem and what kind of problem they experienced.
‍
I ended up boiling down all the research into only a few key issues and takeaways.

UX Design

Using insights to build an interactive prototype

Flowcharts and customer journeys were a good way to get me thinking about the actual design of the app. A process of sketching and paper wireframing led me to my first interactive prototype created in Figma.

Was the new design better than the old one? I conducted a think-aloud-test of my prototype, comparing it to the original Daily dozen app, with a total of 6 users. (Not very scientific as I compared an interactive Figma-prototype to a live product, but it was a great way to get an idea of how they compared). I used the learnings to do another design-iteration on the prototype.
My first iteration
Original app design
"Urban Minimalism" Stylescape for the Daily Dozen project by William Buller
branding

Creating the new experience beyond usability

To move on from the well working but not very sleek-looking new app design, I began the branding process by reading some books and watching a series on the branding process.
I developed two brand-personas based on the following of Dr. Greger and the readership of his book. They became the foundation throughout the branding process and I defined the brand attributes that would appeal to them.
‍
I wanted to explore different brand directions and did so through the development of three stylescapes. I considered how appealing each stylescape would be to the personas, as well as how they would position the brand on the market. I settled on the stylescape that I called “Urban minimalism”.
Ui design

Awakening the spirits

The ambition was to create a UI that would keep the usability and simplicity of the earlier UX-prototypes while being true to the modern and minimalist stylescape and brand. This required a fair amount of exploration in Figma and design critiques from other designers who could see the UI from a fresh perspective.

The final app has a typography-heavy minimalist yet fun design. Images and illustrations have been replaced with color fields that add to the funky aesthetic whilst also carrying meaning and intuitively separating categories. My UI-design explorations also brought with them a few extra features that add an additional layer of zest to the app, such as fun descriptions of each category that change every day.
Daily Dozen Component: Top navigation CardDaily Dozen Component: Beans CardDaily Dozen Component: Berries CardDaily Dozen Component: Other Fruits CardDaily Dozen Component: Cruciferous vegetables CardDaily Dozen Component: Greens CardDaily Dozen Component: Menu
UI Design

Talkative heading blabla

The ambition was to create a UI that would keep the usability and simplicity of the earlier UX-prototypes while staying true to the modern and minimalist stylescape and brand. This requires a fair amount of exploration in Figma and design critique from other designers who could see the UI from a fresh perspective.

The final app has a typography-heavy minimalist yet fun design. Images and illustrations have been replaced with color fields that add to the funky aesthetic whilst also carrying meaning and intuitively separation categories. My UI-design explorations also brought with them a few extra features that add an additional layer of zest to the app, such as fun descriptions of each category that change every day.

← Home

Next project →