Challenge

Design an engaging and streamlined app UI in which tutors working for Practice Makes Perfect can clock in/out, access their schedule and keep track of student progress for an internal database.

 

Overview

Golden.png

1. Design Exploration

Designed Screen Home
Designed Screen Student Progress

2. High Fidelity

Screen Shot 2019-10-30 at 8.07.30 PM.png
MonthlyWeekly.gif
FirstPage.png
style_firstpage.png

3. Prototype

4. UI Kit & Style Guide

 

Design Exploration

Our goal was to understand the client’s visual guidelines, explore design directions through moodboards and style tiles, then finally get feedback from the client and future app users.

Domain Research &

Visual Competitive Analysis

The client provided my team with documentation that included statistics about the market, their values and their vision. We conducted a domain research and a visual competitive analysis for ourselves so that we become better accustomed with relevant UI patterns. As a result, we came up with a few design principles.

Design Principles

The client provided my team with documentation that included statistics about the market, their values and their vision. We conducted a domain research and a visual competitive analysis for ourselves so that we become better accustomed with relevant UI patterns. As a result, we came up with three design principles.

Less is more

Minimize steps to completion and information on the screen to facilitate a streamlined and quick task flow for the user.

Inspiring and aspiring

Design brand-mission focused UI elements through visual motivation to encourage diligent reporting.

No fluff

Prioritize primary goals and functionalities through scope-focused navigation to reduce distractions and avoid mistakes.

The client shared with us their Visual Identity branding deck containing their established color combinations, with photos of their corporate merchandise.

ColorCombos.png

Moodboards

The client shared with us their Visual Identity branding deck containing their established color combinations, with photos of their corporate merchandise.

Journal.png

I put the picture of the notebook at the center of my design exploration, establishing purposes of different colors:

  • red is actionable

  • black is the background 

  • gold is informational

I began with creating a moodboard, exploring different styles of illustrations and graphical elements that would follow the color coded rules.

Dark Theme Moodboard

Dark Theme Moodboard

I was confident with my dark theme moodboard, but I wanted to contrast it with alternatives. 

The client’s website helped in creating a light theme alternative for contrast.

Website Elements

Light Theme Moodboard

Light Theme Moodbard

Since the website had very few graphical elements, I decided to push my design in this light theme moodboard by using various tones of the brand colors

Style Tiles

My team decided to use the moodboards internally and show the client only style tiles as to not present them with a visual overload

Light Style Tile
Dark Style Tile

A third of the tile was a large element showing the company logo, almost like a mini-moodboard

The other 2 thirds of the tile would be populated by typography, graphic elements and card styles

User & Client Feedback

The users thought the design was very clean and the client pointed out that it matches their merchandise branding. Thus, we agreed to further pursue this style

 

high fidelity

Our next goal was to apply our designs into app screens and get feedback from future users in regards to how appropriate they are for the purpose of the app.

Initial Screens

We examined the UX wireframe given by a previous team and decided upon designing 3 main app screens. We chose screens that would contain varying UI elements and show key points in the user flows.

Wireframe Home
Wireframe Calendar
Wireframe Student Progress
Designed Screen Home
Designed Screen Sessions
Designed Screen Student Progress

There were some elements (such as the checkboxes on golden cards) whose purpose were unclear to both the client and the user testers.

GoldCheckboxe

I iterated the design and realized there were two main issues:

  • I was creating a system in which every user flow would have slight variations

  • I was trying too hard to stick to the UX wireframe

My solution:

  • I went back to the design principles and decided that keeping a simple, consistent card style on all user flows would eliminate confusion and even make it easy later on when scaling up this design system.

  • Rather than rigidly following the UX wireframes, I designed in-between screens. This made it clear what type of UI elements would repeat and what would be the best way to create an unobtrusive style that can be universally applied

Initial Screen - Sessions
Iterated Screen - Sessions
 

prototype

Our goal for the final client meeting was to present finalized user flows and align on how the final deliverables (Prototype, UI Kit, Style Guide) should be tailored

InVision Prototype

The general choice for prototyping was using the InVision website.

After creating it, I considered that it felt very static, navigating from one picture of a screen to another.

I decided to use Principle to recreate my prototype, where I was able to bring the app to life.

Google-Drive-Logo.png

Principle Prototype

Transitions

Transiion - First Shine
Transition - Student Pages
Toggle - Monthly / Weekly Calendar

Scrollable/draggable Elements

MonthScroll.gif
MarkingStudent.gif
ScrollingStudentList.gif

Confirmation Screens

SuccessClockin.gif
FailClockin.gif

Text Form Fill

LoginTyping.gif
NotesTyping.gif

Simulation

ScanInAttempt.gif

Since the users would clock in by scanning a QR code, I simulated how this would look like on a phone camera.

These gave this prototype a lot more personality and made the user flows a lot more intuitive for the client.

 

UI KIT & Style guide

This site was designed with the
.com
website builder. Create your website today.
Start Now