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.
(team of 3)
Style guide, high fidelity mock-ups and prototype
- 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
Finally, I provided two separate style guides for the student and tutor portals.