A few months ago, I had the opportunity to work with Coffee, a company focused on connecting job seekers with recruiters in an intimate way. The app is centered around a Tinder-style layout with card swiping. Cards came in two flavors – jobs and people looking to get hired.

In addition to the usual light-content layout, the Coffee team and I wanted to do something to really separate out the Pro users and recruiters from those looking for jobs or to meet others casually. We decided to create a Dark UI as a clean, professional way to differentiate the two modes of the app.

Below are all screens from the app separated out according to their use and placement in the flow of the overall app.

 
 

User On-Boarding

000 - Login Page.fw

000.1.1 - Tags.fw

000.1.2 - Job.fw

000.1.3 - Education.fw

000.1.4 - Location.fw

000.1.5 - About.fw

000.2.1 - Job Description.fw

000.2.2 - Job Tags.fw

000.2.3 - Company Description.fw

000.2.4 - Candidate Skills.fw

 
 

Tour

000.3.1 - Menu Tour.fw

000.3.2 - Chat Tour.fw

000.3.3.1 - Person Card Tour.fw

000.3.3.2 - Person Card Tour.fw

000.3.3.3 - Person Card Tour.fw

000.3.4.1 - Job Card Tour.fw

000.3.4.2 - Job Card Tour.fw

000.3.4.3 - Job Card Tour.fw

 
 

Loading Screens

001 - Loading Card.fw

001.1 - Loading - Dark.fw

001.1 - Loading.fw

 
 

Main Cards

002 - Main Cards - Dark.fw

002 - Main Cards.fw

003 - Jobs Cards - Dark.fw

003 - Jobs Cards.fw

 
 

Card Actions

004 - Card Sliding.fw

005 - Match.fw

 
 

Messages

007 - Messages - Dark.fw

007 - Messages.fw

008 - Chat.fw

 
 

Profile

009 - Profile - Dark.fw

009 - Profile.fw

009.1 - Profile Condensed.fw

009.2 - Personal Profile.fw

010 - Jobs Profile - Dark.fw

010 - Jobs Profile.fw

010.1 - Jobs Profile Condensed.fw

010.2 - Personal Jobs Profile.fw

 
 

Menu & Settings

006 - Menu.fw

011 - Settings - Dark.fw

011 - Settings.fw