Elevating an online learning platform


Elevate is an online learning platform that teaches front-end development and focuses on bridging the gap between students and experienced mentors. This platform would focus on strengthening the relationship between student and mentor and make learning more engaging.

I worked as the user interface designer and worked in close collaboration with a team of other designers. I was responsible for working with the UX designer and taking their research findings and wireframes and conceptualize the platform's brand identity and design high-fidelity mockups.

The Online Learning

Experience Reimagined

Through our research as well as interviewing people who have used online learning, we found that users are not gaining the necessary set of skills and knowledge to apply what they've learned to real-life situations. After creating a comprehensive SWOT analysis, some of the insight we discovered was that users need comprehensive lessons and projects available in one platform and feedback from professionals in those industries. From these findings, my team sought to create a platform that allows students to recieve feedback on their work and give users real-world assignments that they can apply elsewhere.

Brand Identity

With Elevate, I wanted to showcase exactly what the word "elevate" stood for. From a bold color scheme, to introducing uplifting and motivating photography, our direction was focused on creating an online learning platform that felt personable, playful, and most important fun. Because what's the purpose of learning if it isn't engaging the user?

Typography System

The Outcome

The biggest challenge we faced during the visual design development was articulating what Elevate offers as a learning platform in a way that resonates with core users. We defined the brands mission by explaining what Elevate is and how it's able to benefit the user. Our visual approach was focused on making content easily digestable and acessable without sacrificing sophistication and visual integrity. Looking at other online learning platforms, such as codecademy, as inspiration, I focused on creating a light and open environment that made consumption of information easier.

Exploring Elevate

One of the most important screens is our landing page. The home page is the first page that interested users will see so I wanted to evoke excitement in learning by using powerful imagery and a vibrant color scheme. The main purpose of the home page is to show users the paths(courses) that Elevate offers and I used color blocking to separate these sections and including prominent call-to-action buttons.

Diving Into a Course

The course dashboard is the page where users can dive in and explore the individual lessons within the chosen course. Some of these lessons include videos, challenges, quizzes, and a final project. To avoid having the entire page be too text heavy, I created custom icons to distinguish the type of lessons and have the page be more visual.

Doing The Work

One of the aspects that differentiates Elevate with other online platforms is peer-to-peer mentoring. During the final projects stage, users have the option to submit their project for review to a professional. These mentors will respond immediately and will leave feedback in the user's code and students can use those comments to improve their project. Having this option helps users avoid making the same mistake twice and help retain information.