My RoleI was asked to take on the task of leading the experience and design of the Everclear iOS app. I worked alongside the product manager, developers, marketing team, and major stakeholders to produce and deliver all major features for the app.
What is Everclear?Everclear is an app that connects those seeking affirmation, reassurance, and direction to advisors who can offer real insights and life guidance. Our mission is to elevate the psychic advice space with an evolved service experience that prioritizes the needs of the customer. Our vision is to create a modern, updated app that reinvents the way these services have traditionally been delivered, while appealing to a broader market.
Research and PlanningWe began this project by conducting user and competitor research. We used this information to not only understand what our users need, but to also give us some insight into what other competitors in this space are currently doing.
Competitor ComparisonTo begin our competitor comparison, we started by researching competitor sites and compiling a list of differences and similarities. We reviewed Psychic Source, Keen, California Psychics, AskNow, Psychic Access, Purple Ocean, Hollywood Psychics, Life Reader, Kasamba, Live Psychic Chat, and Oranum. We used this information to get a general idea of what other companies are doing in this space. From there we were able to pinpoint things that we thought were successful, and things we thought were not.
We found current psychic sites are focused on old conventions that may not appeal to everyone. They are confusing, cluttered, and do not appeal to someone who is not familiar or comfortable with the psychic world. These sites throw everything at you with no consideration of your individual needs or taste, and make it difficult to find the right advisor.
User SurveysWe conducted user surveys to get some insight into the types of people using these apps, why they use them, and if there are any pain-points they have while using them.
From these surveys, we found the majority of users interested in these types of apps were aged 35-55, have disposable income, and are married or divorced. We also found that more users preferred the use of the term “Empath” over “Psychic” as they felt the term “Psychic” discredited the service provided. Along with that, we found that the majority of users use these types of apps to gain guidance for topics like family, love and relationships, career, and lost loved ones.
Building the BrandAfter reviewing our initial research, we were able to define the expectations of our users and create a list of brand experience requirements and value propositions. These were very important during the design and development phases because they guided design decisions, and helped us keep the teams aligned.
Key BenefitsOur key benefits are what define Everclear. We wanted to create an elite service that matches users instantly with high-quality, experienced advisors. During our research phase, we learned that users had a hard time selecting the right advisor, so we wanted to extend that throughout the brand and primarily focus on creating an experience that allows users to build relationships with advisors that match their needs.
Setting the design directionTo begin the design, I first started with a mood board to present a general direction I wanted to take. We all agreed that we wanted the design to feel very clean, modern, easy to use and understand. We had to keep in mind that our target audience was slightly older, so this played a big role in the colors we choose and the direction we took.
Mood BoardBelow is part of the mood board I put together to kick off the design for this project. Overall we wanted to stick with a clean and minimal theme as mentioned above.
ColorsWhen selecting our colors, we compared our competitor sites from our initial research and found a common theme of purple. We wanted to stay away from the traditional "psychic" colors and decided a teal was the right direction. We preferred teal because it felt more premium and modern while still feeling gentle and welcoming. For our accent colors we chose warm and light colors to accent the teal.
TypographyFor our typography we choose to use Montserrat as our headline type-face, and Open Sans as our body copy type-face. We felt both of these fonts were clean and easy on the eyes when viewing on mobile devices.
BUILDING THE EXPERIENCE
Before starting with the initial sketches, we first defined our core features for MVP. These features were:
- Advisor matching flow during signup
- Dashboard for viewing new advisors as well as past advisors
- Phone calls
- Arrange a call
- User reviews
- User profiles
Sign up FlowOne of the key features and selling points of Everclear is the ability to match the user with an advisor that suits their needs. To do this, we decided to build in a hand-holding experience during the initial signup flow that pairs a user with an advisor that matches their preferences.
Below are our initial sketches I built out to visualize the flow through the sign up process:
DashboardFor the dashboard we wanted to create a quick hub for users to be able to connect with past advisors as well as find new advisors.
ProfilesFor the profiles (both advisor and general user), we wanted to create distinct sections to help break up important bits of information.
Towards the top of advisor profiles, we started with their profile picture and basic information, followed by the CTA buttons to call and connect with the selected advisor. Beneath that we have the remaining information including their skills and topics, along with their biography and reviews. Additionally, we added a "Similar Advisors" section towards the bottom to make it easier for users to find a different advisor if they don't like the selected one.
For the user profiles, we stuck with a similar format, but surfaced the users preferences to make it easy for them to change later.
Chat and CallsFor both chat and calls we wanted to keep these screens as simple as possible. For chat, we simply have a list of recently contacted advisors, and for calls we confirm their call then immediately begin the calling process if the user decides to proceed.
Creating a Design System
Once the team approved the initial sketches, it was time to start building out the high-fidelity mockups, but before I could start this I needed to create a design system. This step is one of my favorites because it allows me to create a vast library of assets that can be used between all of my designs. It is also one of the most rewarding steps because I know how much time it will save me in the future when we need to make tweaks.
When creating design systems, I take an "Atomic Design" approach. This means I start from the smallest possible element, and slowly build more complex assets using those elements. For example, when creating an input field I would first start with adding my "Atoms". These would be things such as color swatches, typefaces, containers, and icons. From there I would use these assets to create "Molecules". In this case I would use my containers to build out a basic shape for my text box, and create a separate symbol using my text styles for labels. After that I would use these assets to create my "Organisms". This is where I can add more detail and really bring the asset to life. For this example I would create a new symbol and use both the label and container to create one input field. From there I can duplicate this and create different states such as error, empty, active, inactive, and disabled. The best part of this method is if down the line I wanted to add rounded corners to my text field, I can simply update the original container symbol and it will update everywhere that container is used. If you used the input field 200 times throughout your designs, you can see how this would save you a lot of time.
Below are some examples of assets I created for this design system.
After creating my design system I was ready to begin building our first prototype.
For our prototype, Invision proved to be the best tool for the job as it was essential for us to be able to share the prototype easily throughout each team, and leave comments and questions where necessary. Invision made it very easy for the development team to see the entire flow in action and and pin-point any areas where we might have problems.
Below is our initial prototype for the Everclear app. At this point we we're set on the overall style and features, but we still had some polishing and refinement we needed to do.
Refinements and Development
Once we finalized our first prototype we were able to get a feel for what the app experience was going to be like. We spent a lot of time reviewing and refining the experience before sending the designs off for development.
When submitting the designs for development, we staggered the deliverables to allow us additional time to make changes and to continue to test the experience. I worked very closely with our external app development team to make sure the designs being implemented were accurate and to answer any questions they had.
Because our development team was external, we had to make sure we were being very clear and explicit when creating and delivering design specs. To help the team visualize all of the screens and get a better understanding of how they all work together, I created an Overflow flow chart that depicted the user journey through each of the screens. We choose Overflow because of its simplicity and ability to be shared and updated with ease.
Below is one example of the flow chart I created within Overflow.
After many months of development, design changes, and feature improvements, we finally completed the first version of the app. Below are a few of the final designs that made it into the app.
After completing the first stable build of our app it was time to begin a round of user testing to see how users interact with our app.
To begin this project I created an outline that I presented to my team. In this outline I reviewed the benefits of conducting this test, along with a full testing plan including which specific parts I felt needed testing, questions and tasks for each part, along with a scoring outline for us to base our results on.
We held multiple rounds of testing including internal testing, small-batch external testing, and finally a large scale test that took place in Canada.
Each of our tests revealed a lot of very important information. One piece of feedback that we saw multiple times was that users were confused about how they would be connected to their advisor during their first call. To solve this issue we added more descriptive information and graphics to help illustrate how we connect them.
These tests were important because they allowed us to determine what features still needed to be refined before our final launch.
During this 2+ year journey I learned a lot along the way. I was very grateful to have been apart of building this app from the ground up and was excited to see the app come into full fruition.
During the development lifecycle I had the opportunity to collaborate closely with almost every team along with our external app development studio. This experience was very eye opening for me as it gave me some insight into the whole development process from start to finish.
I am very proud of what the team accomplished. It was a great effort from everyone involved and I am excited to follow the progress of Everclear for years to come.
Project date: June 2017 - Present
UI / UX Design