UI DESIGN Case Study

WICK App

Wick App - UI Design Case Study
Wick App UI Design

A Passion Project

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 apps get published that were focused on either task completion or cultivating happiness. But a good chunk of them didn’t seem to strike a chord with any of us for various reasons. So, we decided to make the app we wanted to see! This is Wick.

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.


What I did for wick

Logo Design | UI / UX Design | Product Design


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 highlights our focus on it being a shared journey.  The phrase, “An adventure to a better you,” rang true for all of us, so it was settled.

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. Mobile games, although fun, are often seen as a waste of time for most adults. Wick makes checking off your to-do list as easy as possible and as fun as playing a game. So, with that in mind, we decided on our Mission Statement: To make the journey of self-improvement fun, simple, and accessible.”

Wick Mission Statement

Moodboards & Logo Design

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. Style 1 is one that emphasizes nature, warm colors, a more Firewatch-y illustrative style, and an overall sense of adventure. Style 2 was similar to the other apps we had found, where the visuals are clean and soothing with a lot of white space and tasteful typefaces. We went with our gut and chose Style 1, the Natural style, for Wick’s visual brand language.

Wick UI Design Moodboard 1 Natural
Wick UI Design Moodboard 2 Clean
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 rugged enough to harken back to our adventurous roots.

When we conceptualized the name Wick, we knew we had to have some form of a fire motif in our logo. Eventually, we settled on having the flame rest in the crossed arms of the W, like some form of sans-serif-y brazier. Finally, we had to finalize the logo colors & usage and we could move on to layout, UI Design, and prototyping!

Wick Logo Mockup
Wick Logo Design Restrictions

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 userflows to come up with our first internal prototype.

Wick UX Design Wireframes
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.

Part of our visual language was having gorgeously illustrated visuals permeating throughout the entire app, using iconography related to camping and adventure, all while encouraging repeat app uses through getting points and earning badges. All of this melded perfectly with our personal, friendly writing and positive encouragement throughout the process of use.

Wick App UI screens

Prototyping

With our UI Design complete, we dropped our visuals into Adobe XD and started preparing our Wick prototype for interaction.

Wick UI Design Prototype XD

Prototyping

I’ve 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 mockup.

Wick is a project that remains close to my heart, even if it never made it past the conceptual phase. I absolutely love the Health & Wellness space and am super proud of what we came up with together. I hope you enjoy!

WICK PROTOTYPE

Click the button below to view an interactive version of our Wick App!

The Wick Team

We like to call ourselves The Wickans. These three are amazing in their respective fields and they made the late work nights a lot of fun. Check out their porfolios!

AUSTIN NORRIS

Developer

NICOLE EDGAR

Visual Designer

JUSTYN WEBB

UX Designer

More Projects

Want to see more of my work? Click any of the projects below!

DAILY ADRENALINE

Creative Direction | Event & Product Design

SYNKOPY SEVEN

Branding & Logo Design

LOAN PARROT

Branding & Logo Design

LET’S WORK TOGETHER!

If you like what I’m putting down, and want to work together, click the button below! Let’s make something awesome together.

14 + 12 =

Pin It on Pinterest

Share This