IntroSetting the sceneUnderstanding the userGetting startedPlanning & testingDesigning the interfaceDeciding on visual designAdditional breakpointsFinal thoughts

Setting the scene

Like many new ideas, this project traces back to 2020. Then, I was a Spanish teacher. Overnight, I needed to facilitate lessons and experiences for my students in a completely new way. My students missed the classroom setting and the face-to-face interactions with their peers. My colleagues and I found projects and games to simulate the classroom experience. We got by, but virtual learning did not check the same boxes as the in-person experience. 

Fast forward to 2023, I begin my UX journey online. Like my students, I experienced the “deserted island of online learning” that so many identified and dreaded in the pandemic. I did not want history to repeat itself. 

The project brief of CommuLearn presented an opportunity to provide a solution to this problem in this evolving era of online learning. My responsibilities centered on the UI of this project as the user research and branding guidelines were established.

Understanding the user

Meet Alex, an online student who is looking for the opportunity to connect with like-minded students and find resources and peers to collaborate with on projects.

Alex’s time is spread thin across work, home, and his part-time online studies. This means that Alex may be checking the app from his phone while commuting or from home on his computer. Responsiveness is crucial since his surroundings will vary.

User persona, Alex

Getting started

Based on the provided research, I focused on keeping the user flows intuitive and interactive. The user stories and user flows identified the necessary features for a Minimum Viable Product (MVP). 

User flow
Onboarding and centering the features around the dashboard will simplify navigation to and between tasks.

Planning & testing often

I began with low-fidelity wireframes and a prototype to conceptualize the planned out flow. Informally, I conducted two usability tests with two UX professionals. 

Onboarding wireframes

By drawing out the wireframes, I started thinking about the interactions and scenarios where the user might be using this app.

Designing the interface

For starters, I created two mood boards to establish a visual feel for CommuLearn. I prioritized the branding guidelines to express the enthusiasm and community that this product offers.

The "Connection • Camaraderie • Collaboration" aligns closely with the project specifications and the needs of Alex, the user persona. He seeks feedback and aims to progress quickly in his studies for professional gain. Timing and connection are crucial to his success, as he seeks the right resource at the right time. The brief prioritizes a friendly, welcoming, and reassuring design. The visual human representation creates a connected and supportive feel. The touches of red convey power, while the earth tones are approachable.

The top priority for CommuLearn is a web app that is “friendly, welcoming, and reassuring.” To align with this feeling of growth and harmony, green was indicated as the main brand color. Keeping this in the forefront of all design decisions, I took a mobile-first approach to guarantee that CommuLearn would be accessible to any user in any situation.

With the Gestalt Principles and "rule of 4s" in mind, I defined the spacing and grid system that served as the foundation to the web app's responsiveness. In most cases, the spacing even adhered to the "rule of 8" to simplify the handoff procedure later on.  

Now the UI was starting to take shape!

Grid & spcing specifications

Deciding on visual design

Picking the details for the UI were more of an obstacle than I expected. How could I read the mind of a CommuLearn user?

To inform my design decisions, I surveyed potential users to discern which feel would appeal to them. I used A/B Testing to decide on a color palette, the typography, and menu style. I wanted to learn from potential users, like Alex, how can CommuLearn delight them.

Online learning can feel lonely. The entire goal with CommuLearn is to facilitate community and collaboration. The warm earth tones and simplified palette provide a welcoming and reassuring tone to a friendly CommuLearn web app. 

Color palette

Preferred color palette by users
Color palette from style guide

Typography

Typography optionsTypography style guide

These user-centered decisions drove the project further from mid-fidelity to high-fidelity.

Iconograhy & animations

CommuLearn users are looking for a simple and readable interface. Remaining true to prioritizing a friendly and reassuring feel, I designed these icons to follow best and common practices. Why not stick with what users recognize?

Comment about the logosLogos and icons on style guide

Splash screen animation

Splash screen animation

Loading animation

Loading animation
Buttons and input field guidelines from style guide

Language & imagery

Most of the imagery and copy for CommuLearn will be user-generated. To expand CommuLearn's branding, I specified the imagery and language guidelines to prioritize the feeling of community and collaboration. This could assist teams in future projects with the CommuLearn brand.

Branding and language guidelinesImagery guidelines from style guideImagery guidelines from style guide

Designing additional breakpoints

The mobile version of CommuLearn was nearly complete. From there, I turned my focus to the UI for the tablet and desktop breakpoints. I focused on accessibility to ensure that the new breakpoints maintained the intuitive experience set in the mobile version. 

Last but not least, I worked on the style guide to prepare the project for the development team.

Transition from Low to high-fidelity mockups

Final thoughts

I’m delighted to share that this project only got better with its twists and turns. As a UX professional, I embraced this opportunity to expand my UI skill set while keeping the design user-centric. I observed how user feedback and input from other UX professionals informed my design decisions to remain loyal to the brief while harnessing more thoughtful solutions. 

In further iterations of CommuLearn, I would integrate more rounds of usability and A/B testing. As CommuLearn grows, I look forward to more collaboration and feature development such as a mentor and tutor program to expand the CommuLearn-ity to more online students.