LearnOn
…is a learning community app aimed at connecting students by matching users with complementary course histories and academic needs. This project was created as part of the course INF 2191: User Interface Design at the University of Toronto.
Skills demonstrated: Mobile UI, prototyping | Tools used: Figma
Build an app that abides by Apple’s iOS 14 design guidelines. Finish within 2 weeks (10 days).
Challenge:
LearnOn is a unique community-based learning app that connects students to one another, allowing them to provide and receive tutoring from other trusted students. The goal of LearnOn is to offer students a level of autonomy that is missing from educational platforms (such as D2L and Canvas). It combines UI elements of existing matching apps (BUNZ, Tinder) with those of traditional educational apps and learning portals, creating a user journey that is familiar yet enticing.
With online learning and digital tools becoming increasingly necessary for contemporary students, LearnOn focuses on reinforcing student community – an aspect often overlooked by educational app developers.
Solution:
Sequential storyboard demonstrating typical user flow: Finding a match, Viewing a profile and requesting a chat.
To begin this design process, I conducted an informal competitive analysis, taking inspiration from other education portal apps (e.g. Canvas) to develop the UI of the home page, whereas matching apps (e.g. BUNZ) were used as inspiration for the rest of the user flow including search results, and profile pages.
Building the Lo-Fi:
For this app, I decided to go with an earthy green colour scheme as I wanted to invoke a feeling of calm and “groundedness” while representing the idea that learning leads to growth. Green is often associated with nature and I felt that it played off of the “tree” motif as seen with the logo and different member types (e.g. wisdom tree). Green is also associated with luck in some parts of the world, and hopefully, by using LearnOn, students feel a sense of serendipity as they are able to connect with students and exchange knowledge according to their current and past course selections. I decided to make icon backgrounds a golden/mustard yellow shade to make them stand out, while also keeping in theme with the jewel-toned dark green that is featured throughout the interface.
Branding:
A short breakdown of LearnOn’s design guidelines. Click here for more in-depth specifications.
A feedback session with 3 other students was held for an initial critique of the lo-fi prototype. Feedback was given in the format of “if the goal is to [x], then [y] may be (in)effective because…”
Getting Feedback:
According to the feedback given by others, I made alterations that improved the trustworthiness of users, while also minimizing the amount of text used and replacing it with iconography.
Putting it all together:
Final sequential storyboard
Here’s the final prototype, demonstrating all three tasks outlined above. To complete this project and ensure baseline accessibility, WebAIM contrast checker was used to ensure all foreground text and background colours passed a contrast ratio of 4.5:1.
Ta-da!:
Sometimes less is more, especially when working under a time constraint. The two-week deadline forced me to zero in on the functionality of LearnOn, ensuring that form (UI) closely followed the intended function of the app.