University of Michigan Entrance Display
An overhaul of all interactive and visual components of the UofM's Entrance Display App
. . .
Overview
Roles
Interaction Designer
Graphic Designer
Graphic Designer
Client
CAEN, the IT department of the University of Michigan College of Engineering
Timeline
July 2019 (1 month)
Skills
UI design, Graphic design, Prototyping
Team
Jeran Norman (PM, Developer)
Tools
Adobe XD, Illustrator, Photoshop
Problem
The University of Michigan Entrance Display is an application designed to be displayed at the entrances of all UofM College of Engineering buildings. The project was started to replace the many outdated information kiosks that are gigantic, clunky, and slow. The entrance display will be built specially for modern iPads in order to accessibly and conveniently provide users with a plethora of information.
As the CAEN team is quite small, projects are often tackled single-handedly by a single developer. However, while the developers are extremely talented at building applications, consumer-facing products may not always turn out to be the most user-friendly and appealing.
Problem statement: As an entrance display of all College of Engineering buildings, the app’s design needs to be usable, attractive, and suitable for representing the University.
As the CAEN team is quite small, projects are often tackled single-handedly by a single developer. However, while the developers are extremely talented at building applications, consumer-facing products may not always turn out to be the most user-friendly and appealing.
Problem statement: As an entrance display of all College of Engineering buildings, the app’s design needs to be usable, attractive, and suitable for representing the University.
Solution
I led the design of the University of Michigan Entrance Display as the sole interaction designer and graphic designer, completely redesigning all interactive and visual components of the entrance display app.
My Contribution
I was originally asked to create icons for the entrance display’s home and map screens. However, following their completion, I reached out to see if I could make improvements to the app’s overall user interface. Eventually, I joined the project as the lead designer, working side-by-side with the developer to completely redesign the entrance display app.
. . .
Design
Design Goals
- Ease and Efficiency: The app should be easy to understand and navigate, allowing users to efficiently complete their desired goals. For example, this is especially important when users may be in a rush to look for bussing information when trying to make it to their next class.
- Attractive: The visual design of the entrance display should be modern, aesthetic, and inviting, capable of pulling in users who may be walking by. Furthermore, as a publicly displayed app, its design needs to be suitable for representing the University of Michigan.
- Continuity: As the app is already far into development, visual redesigns should not require large-scale changes in the code.
Icon Design
App Icon
During its development, the University of Michigan Entrance Display was officially nicknamed InfoBuddy. What does a corgi have to do with InfoBuddy? Well, there’s no better buddy than Reggie the Campus Corgi, UofM’s most famous good boy.
The icon is more of a special treat for CAEN staff, as users will not be interacting with the app icon.
The icon is more of a special treat for CAEN staff, as users will not be interacting with the app icon.
Home Screen Icons
The redesigned home screen icons are bright, colorful, and welcoming. With the icons being displayed prominently on the home screen, they play a large role in making the system attractive to users. Given a large amount of screen space, the icons are able to feature a decent amount of detail, allowing users to easily identify their meanings.
Map Icons
The requirements for the map icons include simplicity, scalability, and recognizability. Users must be able to identify the meaning of each icon, even when they are scaled down or displayed in a single color.
Style & Typeface
As an entrance display for University of Michigan buildings, what colors would be more appropriate colors than those of the school? The redesigned entrance display retains the original dark color scheme, with additional colors abiding by the University of Michigan’s branding guide. SF Pro was chosen as the app’s typeface, as it is legible, modern, and consistent with other CAEN products.
High Fidelity Prototype
Home Screen
The home screen is the first screen that users will see and interact with, providing links to all other pages.
Key changes:
Key changes:
- Redesigned icons to be larger and more colorful to better attract users.
- Enlarged the events bar, providing more space for the image. Additionally, indicators were added to display the number of scrollable events and color was added to the call to action button.
- Darkened the placeholder text of the search bar to provide better contrast.
Left: Existing home screen, Right: Redesigned home screen
Directory Screen
The directory screen provides information about all offices and faculty within the College of Engineering. Users are able to click on any listing to be taken directly to the map.
Key changes:
Key changes:
- Stylized the background with a dark theme to match the rest of the system.
- Improved the placement and alignment of information by consistently displaying links on the right side.
Left: Existing directory screen, Right: Redesigned directory screen
Map Screen
The map screen allows users to find various classrooms and floors throughout the campus. The design of the map itself could not be changed, as it utilizes an existing University API.
Key changes:
Key changes:
- Added a filter system with all new icons to display points of interest.
Left: Existing map screen, Right: Redesigned map screen
Buses Screen
The buses screen displays incoming buses by bus route or bus stop.
Key changes:
Key changes:
- Updated the “Routes” and “Stops” selection to be a switch, preventing users from mistaking the 2 mutually exclusive selections as filters.
- Adjusted colors match the rest of the system.
Left: Existing buses screen, Right: Redesigned buses screen
Calendar Screen
The calendar screen allows users to browse past and upcoming events.
Key changes:
Key changes:
- Added arrows to the top of the calendar, depicting the ability to see other months
- Events that have already passed are now greyed out to depict their state.
- Added highlights to indicate the current day.
Left: Existing calendar screen, Right: Redesigned calendar screen
Explore Screen
The explore screen showcases recent videos and news articles about the College of Engineering.
Key changes:
Key changes:
- Renamed the page from “Videos” to “Explore” to accurately reflect its content.
- Separated the content list by video and news, allowing users to more easily discover the content they want.
- Balanced the image and text elements of the focused item, providing more space for the image.
Left: Existing explore screen, Right: Redesigned explore screen
. . .
Future Steps
The University of Michigan Entrance Display is currently in development. However, it is imperative that usability testing is done with our user group of students and visitors to evaluate whether or not the system meets users’ requirements. After receiving user feedback, additional rounds of iteration should be done before the entrance display is fully implemented.
. . .
Reflection
Consistency Brings Unity
Whether it is designing small icons or the entire user interface, be consistent with the design. Even the small details matter; for example, rounded edges in the icons should all have the same radius. As a result, consistency brings unity to the entire system.
Remember the Context
Never forget the project’s context - Who are the users? What devices will it be used on?
As an entrance display, users (who are probably just passing by) should be able to quickly and easily find their desired information. Furthermore, keeping in mind that the app would be hosted on a large tablet, the design would be able to afford large navigational elements and a search bar on every screen.
As an entrance display, users (who are probably just passing by) should be able to quickly and easily find their desired information. Furthermore, keeping in mind that the app would be hosted on a large tablet, the design would be able to afford large navigational elements and a search bar on every screen.
. . .
Thanks for making it this far! Will I ever run out of fun facts about myself?
I love organizing trips - everything from planning itineraries to scouting must-try restaurants
I love organizing trips - everything from planning itineraries to scouting must-try restaurants