How do you elevate
an online learning platform to the next level?

  • Role

    Visual Designer

  • Deliverables

    High Fidelity Mockups

  • Tools

    Sketch | Illustrator | Photoshop

The Back Story

01 - What is Elevate?

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 Challenge

02 - 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

03 - Developing the visual direction

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.

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?

The Moodboard

After creating a competitive analysis on different online learning platforms, I made a moodboard consisting of those site in order to gather inspiration. One of the sites that helped define the overall brand was Codecademy because of the minimalistic style, how simple it was to view your progress in a course, and how intuitive the coding workspace is.

Final Style Tile

After mood boarding, I created various style tiles with distinct aesthetics which resulted in the final style tile. The final style consists of elements from previous iterations.

The Web Platform

04 - New and Improved

Elevate Homepage

Landing Page

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.

Elevate Dashboard

The Dashboard

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.

Elevate Workspace

The Workspace

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.

Thanks for scrolling this far

Take a look at my next project!