Wick App - the app focused on letting users take a scientific approach to happiness

Wick App

UI/UX Design Case Study

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 🏕

Contact Me
A gorgeously illustrated camp by a  waterfall with the northern lights overhead.
Squiggly divider line with a yellow to orange gradient

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.

What I did for Wick

  • Branding & Logo Design
  • UI/UX Design
  • Product Design

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

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

More Case Studies

Andrew Uncharted

Creative Direction | Branding | Social Media Management
Andrew Uncharted is a hybrid Digital Nomad / Adventure Photography / Travel brand that I created to both document and fund my backpacking trip around the world. Getting the brand up and running required a lot of juggling, so my responsibilities were extensive.
Full Case Study
Andrew Uncharted Creative Direction Case Study Image

Daily Adrenaline

Creative Direction | Branding | Event Design
I helped establish the brand identity of a South Floridian, Extreme-Sport-Based company called Daily Adrenaline. We wanted to build community within local extreme sports, specifically focusing on getting kids involved. From Brand Management to Event Design, I wore a lot of hats while building Daily Adrenaline.
Full Case Study
Daily Adrenaline Creative Direction Case Study Image
Squiggly divider line with a yellow to orange gradient

Get in Touch

Whether you’re looking for a full-time addition to your creative team, or are a small business looking for a multi-faceted Designer to help shape your company, I’m your man! You can reach out using the form below or by sending me a direct email. I look forward to hearing from you!

My Email

santoro.andrewj@gmail.com
Download CV

Success!

Thanks for reaching out! I'll respond as soon as I can.
Oops! Something goofed. Double-check info and try again!