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.”
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.
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.
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.
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.
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.
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.
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!
