Desktop.jpg

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.  

 

Screen Shot 2018-04-30 at 11.07.08 AM.png

1.  Sketch Ideas For Logo Design

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. 

 
coral concepts - 1.jpg

User Favorite

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.

null
 

2. Splash Screen for iOS Mobile Design

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. 

 

 

SURVEY RESULTS

 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.    

NEXT STEPS

More A/B testing to gather more information about what font looks most professional and most appealing to millennials.

 

3. Hi-Fi Mockup Prototype

communicating brand

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.

 

Information Architecture for Mobile Screens

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.  

Screen Shot 2018-03-28 at 8.18.54 PM.png

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.