Wheaton Mobile
Part 3 of 3

For part three:
to implement and validate my solutions,
I made a style guide, high fidelity mockups, and prototypes, and
conducted usability testing.
June 2020

4. Style Guide & High Fidelity Mockup

Brand Platform

Wheaton College already has its existing branding guideline for print and website, so I incorporated some of its official visual designs, such as logo, typography, and color. For the mobile app branding, I focused more on usability than the college's educational aspect.

Company/Product Name: Wheaton Mobile

Mission/Vision: Wheaton Mobile aims to provide a platform where users can quickly and effortlessly get access to Wheaton College related resources and information that they often use. The students’ campus experience is what we care about the most.

Brand Attributes: Official, Trustworthy, Inviting, Convenient, Sleek. 

Style Guide (Brand Guidelines)

Inspired by Google Material Design, I created the comprehensive design system/brand guideline (creating the nested symbols, specifying the dimensions and usage, designing for different interaction states...)

Though I felt it's a bit of overkill for this mobile app, it would save a tremendous amount of time for the next release where I want to include all the features listed in the main page and menu and for the website.

The logos, typeface family, and primary and secondary colors are the same as the college's official branding, but I added more color and font variations tailored to the mobile platform.

Using the atomic design methodology, I started with small components such as icons, background elevation, and list items and gradually combined them into bigger components such as navigation bars and cards.

For each component, I detailed the dimensions and other essential properties for the development hand-off. All of these components are created as symbols or layer styles in Sketch, so it speeds up the workflow later on and allows for easy modification, expansion, and collaboration.

Here is an overview and a close up.

Style Guide — Overview

Style Guide Closeup Example — Text Fields

High Fidelity Mockups

I turned all the wireframes into the high fidelity mockups. A total of more than 40 screens.

Here are some of the additional routes. "Navigation and Settings" route shows the multiple ways users can access the menu, settings, and profile, so they could easily find these essential functions. "Logged in vs. Not Logged in" route gives some examples of different features offered for users who logged in and those who did not. Enabling the user to skip login first could save their time and give them more freedom.

How do the user complete the essential tasks? — User Flow (Red Routes)

The User Flow detailed the critical paths users will follow when using my app. I made three red routes, one for each critical feature: Directory, Chapel, and Hours. Here is one sample:

High Fidelity User Flow Examples

5. Prototype & Usability Testing

Prototype

I used Invision Studio to create clickable prototypes with animations, such as micro interactions and transitions. Here are some examples:

(I know that this is mobile app, so there is no be hover effect. The following three micro interactions are for web versions, which is beyond the scope of this first release)

Usability Test – First Round

I conducted 5 modulated usability tests (three in-person and two remote ones).

Objective: Uncover usability problems in the existing red routes.

Result/Findings:

All the users were able to complete the tasks eventually, though some took a lot longer than the others due to the issues described below.

1. There was no major issue with the layout and navigation, though some menu items need to be reworded.

2. All of the users chose to login first. When I showed them the not logged in screens, they were able to notice the difference and login immediately.

3. Some of the users were confused about what "Directory" and "Hours and Contact" meant.

4. Many users didn't think about using the filter in the first place.

5. It was very easy to locate settings and "my profile." Users like the multiple routes to complete the same task.

Here is the sample list of the issues by priority and before and after comparisons of the critical and major issues.

Usability Testing Findings: List of Issues by Priority

Design Iterations

Based on the usability testing finds, I made changes to the mockup and prototypes. Here is an example of two versions of the same design

Summary

What I Learned

This project was my first hands on experience applying the user centric design process from research all the way to visual design and prototype.

1. Are all the steps necessary? I should have a different solution

I didn't get to choose the approach to my problem, which was predetermined by my curriculum. Although the purpose of this project is to help me learn UX, I know there is no"One size fits all" solution.

So looking back, I wish I have approached the problem differently. For examples:

(1) Instead of conducting secondary research and interview with the user, I should have first conducted usability testings of the existing platforms ("student portal") with NEW students. In this way, I could better understand the exact usability issues of the current product. New students can uncover more issues because experienced users might be so used to the design even if it's bad design.

(2) From a business and technical standpoint, rather than creating a new mobile app, it is more realistic to redesign the existing website (such as making it more responsive to mobile screens and redesigning the hierarchy of the web structure).

2. Content Strategy/UX writing is an important part of usability testing

I can't just use placeholder text. For example, word choice affects greatly the user's understanding of the product.

3. Keep Asseccibility in mind


A visual design that looks good does not mean it has good usability. For example, when picking the colors, we need to constantly check if there is high enough of a contrast between the foreground and background. 

Next Step

If time and technology allowed, I would:

1. Partner with the school and developers to see implement some of my design.

2. Conduct A/B testing: comparing my app to the exisiting Student on Tap/Portal.

3. Design a web version.

4. Design all the features listed in the main page.

Other Projects

House2Home
5-Day Modified Google GV Design Sprint
Website

House2Home is a home decor e-commerce startup that specializes in small accessories and decorations. I designed a "Build a Home Deco Starter Kit" function to help the customers find items easily to decorate their new apartments.

Chillhop Music
Branding, UX Research, UX Design, UI Design
Mobile App

I converted the free music service into a paid one, designing all the brandings, visuals, and flow that incentivized the returning and existing users to subscribe.

Productified
UX Design, UI Design
Mobile and Desktop Website

Productified helps inventors turn their ideas into products and bring the products to the market. I mainly redesigned the information architecture of the site and created the design system.

About

Daini Eades is a UX/UI Designer at LexisNexis

Follow Me

Mobirise site maker - Try it