Hourly
Hourly is a student-made scheduling app used o facilitate communication between students and professors. I helped design a new layout for the app, including the design system, app shell, and all the pages.
Overview
Problem
As a LMS that enhances student-professor communication, Hourly aims to have a cleanly and intuitively designed app shell, especially calendar page where student could schedule office hours and class events with TAs and professors. The product was not launched yet when I joined, and design must start from scratch, which was the major challenge for me.
Design Process
several color system options
1/ Design system
After communicating with the dev team, who was using Material UI (MUI) library at front end, a simple customized design system is made
typography options in initial design
2/ Layout and wireframing
sketches and wireframes of layout are created, components from MUI are modified to fit the app better.
calendar page initial sketch
3/ High-fidelity wireframes
After subsequent meetings with the dev team, I designed the high-fidelity wireframe for the entire app, with more focusing on the most important calendar page (as shown as an example below)
example
calendar page design
users are expected to interact with the calendar page the most, making appointments, adding and changing events. Thanks to the skillful dev team, we were able to implement a completely new design that is consistent with the app shell, vibrant, and with a clearer user flow.
Before (default in UI library)
After: functionality wise, button functions are clearer, search bar is added, and current time is clearly indicated (by the blue line) on calendar. The initial sketch is shown above at the design process section.
Several other event card colors are also chosen so that events from different courses can be color-coded. All primary colors and text color has contrast ratio > 6
Conclusion
As the first design project I accomplished by myself, Hourly teaches me how to communicate with the development team, plan out the entire design process, and take front-end implementation into consideration when designing components. As of spring 2023, the app is used by several CS courses at JHU.