Wick App

UI/UX Design | Branding | Product Design

The log in screen for the Wick AppAn introductory screen for the Wick AppA mood logging screen from the Wick AppA happiness tracking screen from the Wick AppAn introductory screen from the Wick AppThe dashboard of the Wick AppAdding a task from the Wick AppThe build happiness screen from the Wick AppThe badge screen from the Wick AppA badge detail screen from the Wick App

About
Health and Wellness has always been something my friends and I have discussed and attempted to practice in our lives. Over time, we started to see various apps in that vertical get published that were focused on either task completion or cultivating happiness, but most of them didn’t seem to strike a chord with any of us. So, we decided to make the app we wanted to use! This is Wick 🏕

Year
2018

Vertical
Health & Wellness

Agency
Odd Owls LLC

Responsibilities 
UI / UX Design
Brand Design

Squiggly divider line with a yellow to orange gradient
Wick App - UI Design Case Study

Behind Wick

Wick started as a passion project among four friends who wanted to create an app that helped users empower themselves to be productive and be happier in their day-to-day life. After reading a bunch of books on Cognitive Behavioral Therapy, we thought we had found an un-filled niche in the Health & Wellness vertical: achieving happiness through a gamified approach to problem solving.

Before we started building anything, we had to decide what we stood for. What did Wick mean to us? What was our mission? We had to make sure it was short, punchy, and encapsulated not only our desire to create something that will actually help people, but also highlighted our focus on it being a shared journey.  The phrase, “An adventure to a better you,” rang true for all of us.

Wick was all about making accomplishing your goals as easy as it is fun. Becoming a better person is a journey, so why not make it enjoyable? Of course, the best way to make the process of improving as a person fun is to make it into a game. That being said, most adults see mobile games as a waste of time. To get around that, we added the gaming elements as a tertiary characteristic, with the goal-completion being the primary focus. We decided on our Mission Statement, “To make the journey of self-improvement fun, simple, and accessible.”

The mission statement of Wick, "To make the journey of self-improvement fun, simple, and accessible."

Moodboards & Logo

After deciding on our Mission Statement and Tagline, we set out to establish our voice as a brand. We conducted some competitive research on other apps in the Health and Wellness space and found that a majority of them employed a similar visual language. They primarily used a clean, minimal aesthetic.

When thinking about what our brand should be, we kept coming back to the words, “Journey,” and, “Adventure.” (The travel guy is pushing for adventure? Weird.) Most of us had played the game Firewatch (if you haven’t played it, play it.) and wanted to evoke the same emotions that game gave us.

So, I got to work creating two moodboards for us to choose from. The first style emphasized nature, uses warm colors, shows an illustrative, Firewatch-y art style, and an overall sense of adventure. The second style was similar to the other apps we had found, where the visuals were clean and soothing with a lot of white space and tasteful typefaces. We went with our gut and chose the first style for Wick’s visual brand language.

The Wick moodboards to help decide the style of the company brand language
The Clean moodboard for the Wick App branding

Now, it was time to create our logo. It had to embody all of what we chose for our brand-defining moodboard. There were tons of ideas for names, but we settled on Wick. We imagined our app being the torch that accompanied you on the path to self-improvement. Wick was a short and catchy name that immediately brought the image of fire into our minds.

After deliberating on (too) many typefaces and text treatments, we chose a font that had an earthy, grounded, rugged feel. The sans-serif was modern enough to not look out of place when associated with a Self-Help app, but also resembled the fonts used in state parks and hiking trails.

When we conceptualized the name Wick, we knew we had to have some form of a fire motif in our logo. We settled on having the flame rest in the crossed arms of the W, like a form of sans-serif-y fire brazier. Finally, we moved on to documenting other brand colors, cementing logo treatment and placement rules, and art style standards.

Wick's final logo design
Wick's logo design specifications
The Wick App brand colors

UI/UX Design

We began our iterative process by creating personas based on who our ideal user would be. After narrowing our ideal user to 3 different persona types, we reached out to our friends who matched those profiles and asked to conduct phone interviews. Some of the questions asked were concerned with their frequency using self-help applications, how often they meditated, if they would ever consider using an application like ours, what they thought their most important positive habits were, and more. Once we’d collected this information, we started wireframing initial user flows to come up with our first internal prototype.

A screenshot of the UX Design of Wick in Adobe XD

Once we established our relative user flows, we jumped right into creating our UI mockups and formulating those into our first pass at a prototype with our established Wick visuals. We came up with a Design System for every UI component piece within the app. We used this as a reference as the background visuals and icons were illustrated.

Part of our visual language was having these gorgeously illustrated visuals permeating throughout the entire app and using iconography related to camping and adventure as well. We encouraging repeat app uses through getting points for completing tasks (with weighted rewards based on the difficulty of the task) and earning badges. All of this melded perfectly with our personal, friendly writing and positive encouragement throughout the process of use.

The Wick App Design System - every component stylized

Once we finished the Design System and coupled it with the background illustrations and icons, we focused our efforts on mocking up the high-resolution UI design for each screen in the user flow. We fleshed out every possible use state identified in our wireframed prototype and gave visual life to it using our established visual language.

Some of the Wick App's UI Design

Prototyping

With our UI Design complete, we dropped our newly-minted visuals into Adobe XD and started preparing our new iteration of the interactive Wick prototype.

A screenshot of the UX Design of Wick in Adobe XD

After setting everything up and defining the interactions within Adobe XD, we were good to start testing the interaction. Unfortunately, we were unable to continue with the project due to workload complications. Even though Wick never officially launched, I’ve actually made the Wick interactive prototype live for you to mess around with! If you click the button below, it’ll take you to a page dedicated to the Adobe XD interactive mockup. Wick is a project that remains close to my heart; I absolutely love the Health & Wellness space and am super proud of what our team came up with together. I hope you enjoy!

Wick App prototype mockup

Interactive App Prototype

View Prototype
Squiggly divider line with a yellow to orange gradient

What I've been up to

Selected work

Axcend Corp case study
Axcend Corp
Web Design & Development
Andrew Santoro's Logofolio
Logofolio V1
Branding
Wick App's case study
Wick App
Branding | UI/UX Design
The Andrew Uncharted case study image
Andrew Uncharted
Web Design | Branding
A dotted, squiggly yellow and orange line

Get in touch

Say hello

Want to inquire about a project? Talk about video games? Critique my work? Use the form or my email below to do 2 of those 3 things.

Thanks for reaching out, new friend! I'll respond in a jiff! (wouldn't it be annoying if I wrote gif?)
Oops! Something goofed. Double-check info and try again!