tandlr

Mobile app design

 

tandlr is a peer-to-peer tutoring service that connects students who have excelled academically with students who struggle with classes. They approached us as they were undergoing a re-branding of their product and moving from desktop to mobile.

 
 
 

ROLE

UI Designer
(team of 3)

TIMELINE

3 weeks

DELIVERABLES

Style guide, high fidelity mock-ups and prototype

TOOLS

Photoshop
InVision

 
 
 
 

CHALLENGE
 

  • Create a cohesive, scalable design for a mobile app with two portals (student and tutor view) and multiple functions (booking, scheduling, payment, and messaging)
     
  • Simplify booking processes and streamline each function for both student and tutor sides
 
 
 

STEP 1:  RESEARCH AND STYLE EXPLORATION
 

With our client's brand guideline and wireframes as a starting point, we began our design process with competitive analysis covering in-category and out-of-category competitors with similar functions in booking, scheduling, payment, and messaging. 

 
 
 
 

From the analysis, I compiled our research to present three possible style trajectories.

Two key concerns came up at this stage:

  • how do we stay close to the existing brand while exploring new visual identities?
  • how will we place tandlr into their competitive landscape? 
 
 
 
 
 
 

Step 2:  HIGH FIDELITY MOCK-UPS
 

Following client feedback on my style exploration, I consolidated elements from the bold, modern style and the bright, youthful style to create an updated look for tandlr. 

To distinguish between the student and tutor portals, I used orange to create a warm color scheme for the tutor portal and teal to create a cooler color scheme for the student portal, with custom iconography for both.

 
 
 
 

STep 3:  Further iteration
 

The original wireframes we received depicted the tutor booking process with a series of pop up modal overlays, a common web pattern that diminished the mobile user experience. 

Below are a selection of screens from my redesign of the new booking process:

 

 
 
 

STEP 4:  HIGH FIDELITY PROTOTYPE and Style Guides
 

In addition to high fidelity screens, I also delivered a clickable prototype created with InVision.  For best performance, please follow this link.

 

 
 
 
 
 

Finally, I provided two separate style guides for the student and tutor portals. 

 
 
 

VIEW OTHER PROJECTS

FACE NEW YORK

UI, Branding /
Responsive web

SUPAFRESH

UX, UI, Branding / Mobile

NWTN

UI, IxD / Mobile