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
1. Design Exploration
2. High Fidelity
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.
Moodboards
The client shared with us their Visual Identity branding deck containing their established color combinations, with photos of their corporate merchandise.
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
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
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
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.
There were some elements (such as the checkboxes on golden cards) whose purpose were unclear to both the client and the user testers.
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
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.
Principle Prototype
Transitions
Scrollable/draggable Elements
Confirmation Screens
Text Form Fill
Simulation
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
