LearnEcho is an online learning platform that focuses on helping individuals reach new milestones in their career journey.

Problem

Career growth relies on the ability to expand ones skill set. Due to barriers such as work commitment, family responsibilities, and financial constraints, learners have constricted access to time-intensive learning platforms.

Solution

LearnEcho, a career-based skill learning platform that utilizes contemporary AI, reiterative learning, and responsive design to create flexible and comprehensive learning opportunities.

Research

Prototype

Design

Test

Research

I began my initial research by sending out a Google survey, with a focus on finding individuals interested in career-based skills learning. I sent this survey out to 12 individuals via text and email. 11 individuals responded, during the 1 week period the survey was open.

Observations

64%

91%

Interested in skill related to current or future career development.

Have previously taken skill learning/skill improvement classes before.

I proceeded to interview the respondents interested in career development, with a total of 5 interviews conducted, each lasting +/- 30 minutes. My goal in these interviews was to identify and understand time constraints, barriers to education, and forms of career change.

After the interviews were completed, I used affinity mapping to synthesize the information they provided. The affinity mapping uncovered 6 major themes from the interview. I was surprised the theme of wanting soft skills. I had assumed most people wanted to learn hard skills directly related to jobs. However, individuals reported that they did not know how to leverage their skills in conversation with their supervisors, or in networking events. This was a major barrier to their job mobility.

Multimodal Learning

A preference for active learning that involved multiple forms of engagement with content.

Existing Career Growth

An interest in growing within ones career, as opposed to learning new skills for a career pivot.

Soft vs Hard Skills

Not only the technical skills for advancement, but skills that addressed how to approach conversations with management, and how to network.

Flexible Time

Overall limited time to engage with learning opportunities. However, the time was flexible, fitting in between job and life commitments.

Digestible Content

Accessible content that is clear of overstimulation, and allows for connection between concepts.

Community Sharing

Learning opportunities are found from word of mouth suggestions or listservs.

Competitor Analysis

Now that I understood what users wanted, I needed to determine if and where there were gaps in the current market. The three current major leaders in online skill learning platforms are Udemy, Coursera, and Khan Academy. To understand the competition, I completed a SWOT (Strength, Weakness, Opportunities, Threats) analysis below.

Competitors all excelled in partnerships, having bolstered a significant following by connecting with K-20s, Fortune 500s, and the like. This allowed these companies to host vetted content from these institutions, while also having a significant user based. However, it became clear that these companies struggled with quality control, often having large repositories of classes that become outdated, or unmanned, but are not removed from the platform.

  • MOOC (Massive Open Online Course) provider that allows any instructors to build online courses.


    Strength:
    Strong connections to large Fortune 500 companies who utilize Udemy for employee skill growth. The focus on technology related courses


    Weakness :
    Varying quality and inconsistent pricing, as well as quality control issues has led to lowering user retention.


    Opportunities :
    Currently building Udemy Business, but could also benefit from beginner friendly courses.


    Threats :
    High cost and varying quality creates larger threat of lowering retention. Financially relies on revenue of business relationships.

  • MOOC provider that collaborates with universities and organizations to offer online courses.


    Strength :
    Strong connections to universities who produce content for the site. Offers free auditing of classes, with certification behind paywall.


    Weakness :
    Unclear pricing structure and a low retention due to edtech fatigue. Trouble with quality control and faulty UI.


    Opportunities :
    Offering a STEM certificate program called MasterTrack, and continuing university partnership with advertising of online Master’s programs. Would benefit from clearer advertising.


    Threats :
    Relies heavily on university content, and changes to agreements could severely impact course offering, as Coursera offers no original content.

  • Offers free beginner to intermediate classes for K - 14 learners. Built to be a form of supplemental learning for students.


    Strength :
    Subscription partnership with K-14s across the world. Available in 40 languages and aligned to national curriculum in 10+ countries.


    Weakness :
    No personalized learning. Relies on videos to teach concepts, leading to a lack of feedback and continued student struggle.


    Opportunities :
    Expanding tutoring services with AI tutor (Khanmigo). Current content for universities is minimal (comparatively), and offers an opportunity to expand into university content.


    Threats :
    Khan Academy hosts a majority of its K12 content on YouTube, which is blocked as part of school security features, making it hard to be accessible in the classroom, leading to under utilization.

User Persona

Based on the initial interviews two distinct personas arose. The first persona focused on a person who was established in their career as a consultant, but was struggling to land bids due to a lack of networking skills. The second persona is a person who is looking to advance in his career via a promotion, but needs additional technical skills within his field. I chose to create two personas that reflected the theme of of limited time, with both having either job or home commitments that made their free time minimal. I expanded on these two personas to further determine their needs, frustrations, and pain points in the journey to complete their goals.

I specifically wanted to present two personas that had different focuses in career development, as both hard and soft skills were a major theme in the data collected.

Card Sorting and Site Map

To start constructing the site map, I had 3 new participants engage in a card sorting activity. The participants grouped cards in a similar way, with all participants wanting learning material/courses, tools/support, and account creation all in their own sections. Based on the card sorting activity, I proceeded to build the site map.

The site map nudges users along an initial path to ensure an account is made, while providing a transparent overview of product information (about, pricing, FAQ) on the home page. Users can then explore the two main focal points of the site: the Learning Portal and the Course Hub. The Learning Portal allows for learners to have a centralized location for check on their educational journey, and find resources for their continued success. The Course Hub is their gateway to knowledge. Learners can peruse the course catalog, or find customized results through the Course Match Quiz.

User Flow

The two major interactions a user will encounter is their initial landing on the site, and the process of selecting a course. Both are major breaking points for a user, where too much mental load may deter them from continuing with the product. To mediated this concern I have created clear and streamlined user flows.

Scenario 1: There are two distinct paths for users to add a course. Users can either browse and choose a course through the catalog, or they can utilize the Course Match Quiz.

Scenario 2: The initial user interaction with the site.

Prototype

Sketches

To gain some initial feedback about the basic user interface I created low-fidelity frames for two task flows. The first is the wireframes for selecting a course through the course catalog, and the second is the wireframes for creating an account. I sketched both the d mobile (below on each page) layout for each, creating two variations. This allowed me to explore different layout options, and figure out a way to present the necessary information with the limited space available.

Mid Fidelity

Based on initial feedback, I then proceeded with mid-fidelity wireframes, which allowed users to interact with the prototype, allowing more thorough feedback. I interviewed three individuals and gave them the task of starting Lesson 1, beginning from the Learning Portal screen. All were able to successfully navigate to the lesson without intervention, and their was generally positive feedback. Multiple users commented that they enjoyed the use of tabs, instead of needing to navigate to a new window. However, there was instances of slight friction when users interacted with the Course Catalog, mainly around functionality of the filters. Users were unsure how they could navigate to a specific class without a search feature. One user requested a search bar, as they felt that 4 filters was overwhelming.

Mobile

Desktop

Design

Style Tile

When considering branding, my number one focus was approachability. Education can be daunting, and AI conjures images of confusingly ambiguous technology. I did not want this product to only appeal to an ultra tech-y audience. Therefore, I chose to create branding that balanced professionalism with fun. Vibrant, but calm neutrals, balanced with pops of warm accents, reminding users that learning, at its core, should be fun.

For the typography, I wanted a classic, yet modern aesthetic. I chose Nunito Sans, a balance of strong lines and breathable spacing, allowing it to be readable at a small font

Color Palette

Typography

Desktop

Mobile

Logo Design

I started the logo design process by sketching as many designs as I could think of, then editing, combining, and re-balancing, trying to shake loose the perfect logo.

After many iterations, I created the logo below. I chose to give a visual to the conversation the user is having throughout the reiterative learning process. This product allows the user to learn new information and echo what they have learned.

High-Fidelity Wireframe

Based on the mid-fidelity feedback I adjusted the Course Catalog page, adding in a search bar, and dropping the filters to two. This allowed users to search for a class by name, or to use the filters to search by subject, date posted, etc.

Homepage

Create Account

Create Profile

Learning Interests

Login

Lesson Portal

Course Hub 1

Course Hub 2

Mobile Menu

Course Catalog

Course Match Quiz 1

Course Match Quiz 2

Course Match Quiz 3

Course Match Results

Course Page

Lesson

Testing

User Testing

After creating the high-fidelity wireframes, and making them interactive, I completed user tests with 5 individuals, all of whom had no previous interaction with the product. I had these individuals complete two tasks.

  1. Navigate to the Course Match Quiz, complete the form, and see your results.

  2. Navigate to the Excel Mastery course and start the first lesson.

All users were able to complete the tasks without error. They found the interface and branding cohesive and enjoyable, and the content to be engaging. However, there were a few instances of pain points that needed to be addressed in the following iteration. I have highlighted those screens below.

Added additional interactions. Previously this menu only connected to the Home, Course Hub, and Learning Portal for testing. This created small hiccups. Links to the Course Catalog and Course Match Quiz have been added.

Reformatted the home screen. The hero now takes up the entirety of the landing screen.

Addition of the arrow to indicate additional information below. Pressing on the arrow jumps down to “What is LearnEcho?”.

Adjusted arrow touch point and size, as I witnessed users struggling with it during testing.

Adjusted all touch points in the Quiz to be bigger. User can now touch the box/button, or they can touch the answer. Both will trigger the prototype interaction.

Additionally, I reworded the questions for clarity.

Switched from checkbox to radio, since the user is only allowed to select one.

Resized the meters, as they were slightly overcrowding the screen.

Removed the cartoon figure and replaced with the doodle lines as seen on the Catalog Course page. This page already had a lot of information, and I opted to remove additional distractions like the cartoon.

Previous iterations did not account for where Favorited items would appear. I opted to have them appear under My Courses. Creating a familiar tone, and having it on the initial tab of the Course Hub screen will make the users likely to reengage with the Favorited courses and enroll.

LearnEcho Prototype

Conclusion

From a usability standpoint, this iteration of LearnEcho meets the needs of users intending to find a course that could expand their skills. I do think there are aspects that could be expanded on, especially when considering lesson structure, and how to best communicate supplemental reading and resources into each lesson.

I chose to pursue this project because I am currently in a career pivot, and before I realized I wanted to pursue UX design, I found it hard to find accessible learning opportunities that met the limited time I had available each day. Every option felt formulaic and boring. This project allowed me to see the bigger picture of user needs and design a product I am proud of.