UNIVERSITY OF MICHIGAN ENTRANCE DISPLAY APP
A complete overhaul of all visual and interactive components of the UofM’s Entrance Display App, to be displayed in all College of Engineering buildings.
DESCRIPTION
Officially titled InfoBuddy, InfoBuddy is an entrance display app for University of Michigan College of Engineering buildings. The project was created to replace the outdated information kiosks, which were gigantic, clunky, and slow. To be hosted on the latest iPad Pro and placed at each building’s entrance, InfoBuddy will accessibly and conveniently provide users with a plethora of information.


ROLE
Interaction Designer, Graphic Designer


CLIENT
CAEN, the Information Technology services department for the University of Michigan College of Engineering


TEAM
Jeran Norman (Full-stack engineer)


DURATION
July 2019 (1 month)

MORE ABOUT MY ROLE
As the CAEN team is quite small, projects are often tackled single-handedly by a single engineer. While extremely talented developers, consumer-facing products may not always come out to be the most user-friendly and appealing.

Originally, I was asked to create icons for the app’s map feature. Following their completion, I reached out to the developer to see if I could make improvements to the app’s existing user interface. Eventually, I joined the project as the sole Interaction Designer, working side-by-side with the developer to completely redesign the user interface and aesthetic of the entrance display app.

*As I joined the project mid-way through its development, I was unfortunately not provided with the opportunity to do any user research and analysis.

GOALS
1. Attractiveness - Visual designs should be modern, aesthetic, and inviting to users. Furthermore, the design needs to be suitable for representing the University of Michigan.

2. Ease and Accessibility - Navigation and interactive components should be intuitive, allowing users walking by to quickly navigate to the desired information.

3. Continuity - As the app was already far into development, visual redesigns should not require large-scale changes.

STYLE & TYPEFACE
As an entrance display for University of Michigan buildings, what more appropriate colors than those of the school? Color choices and pairings used in the design closely abide by the University of Michigan’s style guide. The chosen typeface is modern, readable, and consistent with CAEN’s other products.

ICON DESIGN
Home Screen Icons
The design of icons also aligned with my project goals of making the system more attractive and intuitive. The redesigned home screen icons are bright, colorful, and welcoming to users. As these icons are displayed quite large, they also feature a decent amount of detail, allowing users to easily identify their meanings. 
Map Icons
The requirements for map icons include simplicity, recognizability and scalability. The icon designs are simple representations of the real elements, yet they are immediately recognizable to users. Furthermore, they remain identifiable even when displayed in a single color or scaled down.
App Icon

HIGH FIDELITY PROTOTYPE
A comparison between old designs (Left) and their redesigns (Right).

Home Screen
As the home screen is the first screen users will see, it must be both attractive and welcoming. This is achieved with the new icons that are larger and more colorful. Furthermore, the automatically scrolling events bar features a much larger image space, capturing the attention of those who may be walking by. Additionally, the text in the search bar has been darkened for improved accessibility.
Directory Screen
The new directory screen now has a dark themed background to match the rest of the system. The placement and alignment of information has also been improved by presenting website and location information on the right side.
Map Screen
The map screen appears very similar to the old version. However, the map now features all new icons and a filter system to better help users find the information they are looking for.
Buses Screen
On the buses screen, the “Routes” and “Stops” selection has been changed to a switch. This change was made to prevent users from mistaking the 2 mutually exclusive selections as filters. Additionally, colors have been adjusted to a dark theme to match the rest of the system.
Calendar Screen
Many elements were added to the calendar to make it more intuitive for users. First, arrows were added to the top of the calendar, showing that it is possible to see other months. Second, the current day is now highlighted with maize when it is not selected. Finally, past events on the calendar are now shaded, showing that they have already passed.
Explore Screen
The videos page was renamed to explore, as it also showcases recent news articles about the College of Engineering in addition to videos. Furthermore, Images are now the main focus, instead of text, making elements more attractive.
NEXT STEPS
The app is currently still in development. However, it is imperative that alpha testing and beta testing be done to identify user pain points and necessary redesigns before the application is fully implemented.


TAKEAWAYS
1. Consistency of design -  Whether it is designing icons or the user interface, be consistent in your design. Typography and color styles should always be followed. Additionally, details matter as well. For example, rounded edges in the icons should all have the same radius. As a result, consistency brings unity to the entire system.

2. Remember the context - Don’t forget who you are designing for and what platform you are designing for. As an entrance display, users should be able to easily find their desired information. Keeping in mind that the app would be hosted on a large tablet, a search bar could be placed on all screens, and navigational elements could be made larger to be easier to find.

3. Prior user research is crucial - While I spent countless hours redesigning this entrance display app, much of it would become meaningless if it does not meet users’ needs.
Thanks for making it this far! Here's a fun fact about myself: 
For the past 3 years, I have cut my own hair (which I learned from YouTube)

Back to Top