Project Scope: iOS Mobile App
My Roles: Visual Designer | Information Architect | Project Manager
Methods: Sketching, Surveys,
Tools: Sketches, Sketch App, InVision App
3 Week Design Sprint
About This Project: My team and I were tasked with delivering a high fidelity clickable prototype. Coral is a Seattle based startup that connects women to professional networking opportunities, career education, mentors and forums. My objective as visual designer was to convey a professional and inclusive image that would appeal to millennial women who are looking for career advancement. As information architect, my objective was to make the information easily accessible and have clear navigation.
1. Sketch Ideas
I first wanted to find out what color and pattern options our target users best responded to. I time boxed myself and created as many combinations of color and pattern I could in one hour. I picked the best twelve and designed the survey below. I received thirteen responses from women aged 18-39 who actively seek out opportunities to network and enhance their careers though education.
This sketch had the most favorable responses with the survey participants. The jewel tones were definitely the crowd favorite. What survey participants didn't like was also valuable. No diamonds, No dots. No patterns.
From the results of the user survey, I developed a color palette.
2. Splash Screen
With the color palette established, I set out to develop preliminary designs for a splash screen that would boldly communicate the brand. It was important to have the Coral logo communicate diversity. Knowing that bold patterns did not test well, I experimented with softer variations in color. I also used a few different fonts.
I performed another online survey.
Color and Logo #4 Favorite Fonts #3 & #5 Most Professional Font #1, #2
My online survey yielded 10 responses. The results of this survey were not as conclusive. Number 4 was the overall favorite for color and logo. #3 and 5 tied for favorite fonts(both sans serif). When asked what looked more professional, the serif font was the only one selected.
More A/B testing to gather more information about what font looks most professional and most appealing to millennials.
3. Hi-Fi Mockup
I communicated the brand throughout the app with color and left the logo only on the home page. Segmented controllers and a simple navigation bar at the bottom are clean and efficient. Below is the information architecture for the forum flow.
My team conducted research with professional millennial women looking to advance their careers. Through contextual inquiries, interviews and competitive analysis they determined that these users wanted a simple interface that was intuitive with self evident navigation. I used the results from their contextual inquiries of similar apps and their persona to guide how I organized the information.
I felt the best way to meet my objective of easy accessibility and clear navigation was to flattened out the information hierarchy with segmented controllers at the top and tab bars along the bottom. I used the darkest teal highlight the active state on both.
What did I learn?
Sometimes the simplest solutions are the best. I spent more time than I probably should have making the preliminary logo sketches. Next time I have a visual design role, I will focus more on getting the color scheme worked out and have a visual designer that specializes in logo design to develop the logo. I am actually pretty happy with the end result, however I am dissatisfied with the amount of time it took to get there. I learned a lot communicating the brand within the app with color.
As a team, we also learned the value of stakeholder consensus. Going forward, I will definitely gut check to make sure everyone is on the same page before getting further into the project. It ended well, but the journey could have been smoother. I believe if we took a little more time in the beginning to align expectations and meet individuals on their level (both on our team and the client) I think we could have saved ourselves some unnecessary stress.