It goes without saying that the COVID-19 pandemic made a significant impact on many lives and industries. One of the most affected industries was the online learning sector; in particular, MOOCs (massive open online courses) — projected to be “on its way to decline” pre-pandemic — saw a remarkable increase in enrolment during 2020.

EdX, a leader in the MOOC sector, offers courses from iconic partner institutions such as Berkeley and Harvard and students can earn accredited certificates (paid) or audit courses for free. One of the first MOOCs to ever appear in early 2012, edX’s mission is to transform lives through education.

The challenge

Despite projected growth after the onset of COVID-19, MOOC still faces its pre-pandemic challenge of low completion rates. 

We pose this question: how might we keep students engaged so they complete their course?

Project goals

• Design an MVP of a new feature(s) that adds value to both users and reinforces edX’s values

• Feature must embed seamlessly into the existing edX app 

• No fundamental structural changes to the mobile application

• Focus on iOS

My role

UX Designer (research, visual design, branding, interaction design, usability testing)

timeline

4 weeks (80 hours)

By understanding the market and users through research, we view pain points and needs from users’ perspective and reduce the risk of solving the wrong problem. 

research plan

With a research plan, the intention is to define how we will conduct the research, what we aim to discover, and what we assume to be true — and thus must validate or invalidate in this phase.

Main objectives:

• Understand the current landscape of the online learning sector and edX’s competitors

• Identify edX’s target audience and their needs, goals, frustrations, and motivations

Assumptions:

• Users generally don’t engage with the discussion forum feature on EdX. 

• Users find discussion forums chaotic and impersonal. 

• Users desire a way to discuss current learning topics with other classmates. 

• Users find value in collaboration and discussions, because it helps them develop a better understanding of the topic at hand. 

Secondary research

With unprecedented changes spurred by COVID-19, the aim of secondary research was to understand the trends, projections, and user segments which may have shifted and which have remained consistent.

Market Research

Kicking off the research phase with market research is helpful in gaining a broad understanding of what is currently happening in the online learning market. Market research serves both as a quick onboarding of the industry and helps me understand the context in which our users are interacting with the product. 

COMPETITIVE ANALYSIS

Within the MOOC industry, there are a handful of key competitors that vie for the same audience using the same, or very similar, products. I examined a direct and indirect competitors to edX to understand how each company positioned itself.

PROVISIONAL PERSONAS

Three provisional personas for edX were created using data gathered from market research, each representing an audience segment with different goals and frustrations.

Provisional personas are just temporary; so why do I create them? There are three main purposes: 1. to represent what I think our users are like, 2. gain alignment among stakeholders, and 3. to search for participants in user interviews. Ultimately, they serve as a benchmark in the design process.

HEURISTIC EVALUATION

A heuristic evaluation was conducted to uncover usability problems with edX’ current mobile app and to understand what edX does well from a usability perspective. 

Primary research

While helpful in gaining a snapshot of the market, data points such as demographics, trends, and projected growth do not give insight into granular details about our users. To truly understand edX’s users and their intentions, emotions, and the reasons behind their behaviors, primary research was conducted through user interviews. 

USER INTERVIEWS

An interview guide was drafted with open-ended questions centering around three topics: 1. participants’ online learning habits, 2. experience with edX, and 3. interaction on edX.

A total of five interviews were conducted over video calls lasting about 20 minutes each. Transcripts were created after the interviews to extract raw data and prepare for synthesis and analysis. 

Empathy map

How do we make sense of all the data extracted from the interviews? Using an empathy map to cluster direct quotes and observations from interviews, it became clear that there were patterns to participants’ behaviors and emotions. Concretely, patterns that produced the most significant insights were extracted and turned into user needs.

This progressional revelation of core needs ensures that findings are rooted in research and gives me higher confidence to move forward with the design process. 

Persona

To conclude the research phase, a persona was created to bring our users to life. Though fictional, our persona embodies key characteristics of edX’s target audience and will be a  central figure in our designs. 

Joseph is a 30-year-old male living in California. Having lost his previous job during the pandemic, he is cautious about his new role and wants to ensure that he can make an impact at his company. For Joseph, online learning is a newly acquired habit — again, taken up during the pandemic — and he has just enrolled in a course about digital marketing. 

Define + ideate

The goal of the define and ideate phase is to establish the problem(s) for which we will solve, then come up with possible solutions to tackle the problem(s). 

POV + HMW STATEMENTS

Point-of-View statements, or POV statements, were created from the insights and needs gathered from the research phase. Using the formula [user] + [need], because [insight], each core need was transformed into actionable problem statements.

Then, each POV statement was formulated into How-Might-We (HMW) statements. HMW is a powerful tool to start the ideation process; HOW suggests that a solution exists, MIGHT implies that there are multiple ways to approach the problem, and WE encourages open collaboration. 

SOLO BRAINSTORMING

For the first round of brainstorming, I conducted a solo-brainstorming using the crazy-8 method. I selected this method, because it encourages exploration of ideas through a combination of visuals (sketches) and text description. 

GROUP BRAINSTORMING

Though solo brainstorming was effective, the HMW statements truly shine when addressed and examined with a group. Thus, I conducted a group brainstorming with five participants using the reverse brainstorming method and came up with innovative solutions that I hadn’t thought of during my solo ideation session. 

goals synthesis

Products exist in an ecosystem of desirability, viability, and feasibility. Up until now, our focus has been on the desirability of the product; however, I must ensure that the designs are valuable for both users and the business. A Venn diagram collating user and business goals and technical considerations highlights the overarching goal or the optimal point of focus with which edX could achieve the best results. 

product roadmap

Having outlined the point of focus, I moved on to further define priorities with a product roadmap. The following factors were considered:

• Effort in implementation 

• Confidence (%) in the impact it would make on users 

After ordering each item by priority, we narrowed our scope for the MVP to two core features: 1) join a study group and 2) add notes. 

App map

With an app map, I can start to visualize the structure of the product by defining what screens are in the app and where they can be found. This step is especially significant since the new features and screens must be embedded seamlessly into the existing app. Hence, the aim of a site map is to create an information architecture that matches current users’ mental model and ensures that I am reinforcing the overarching goals at every step without disrupting users’ current navigation experience. 

UI requirements

Failure to document and align on requirements of what to build leaves room for misinterpretations and assumptions. By defining and thinking through key tasks on a UI requirements document, there is a central point of reference for team members. 

task flow

What are users trying to accomplish, and how do they perform their tasks? To visualize the steps that our users would take and the screens that they require to accomplish their tasks, a task flow was created for three key tasks:

1. Join a study group

2. Add and save notes to a reading material

3. Find and review saved notes from task 2

Task flow one below is designed so that users has a sequential experience while they flow through the system.  

User flow

User flows were created to represent different entry points, decisions, and paths that our user can take to complete their tasks. User flows are helpful in empathizing with the user because I can consider when they can, or need to, make decisions and design their experience so they don’t encounter dead ends. 

Wireframe sketches

To gain a better understanding of how the new feature and screens would look to the user, low-fidelity wireframes were sketched out. Using paper and pencil for this process is especially helpful for mobile apps because it lets me visualize the gestures and design to optimize the thumb zone when possible. 

Branding

EdX has existing branding to which I did not make adjustments for the scope of this project. However, it’s still important to understand what edX aims to communicate to users with their branding elements; just like brand voice and writing style, visual branding is another tool for companies to craft an image and shape users’ experience. 

STYLE TILE

A style tile was created as a point of reference for edX’s specific visual elements and how they are used in the app. 

Their brand color, dark blue-green, represents the high-quality content of their products while the bold and contrasting red and yellow communicate the product’s transformative and impactful nature.

HIGH-FIDELITY WIREFRAMES

To have a more realistic, accurate visual of our product, responsive high-fidelity wireframes were created using the style tile and existing app screens to guide the process. Since edX already has established brand guidelines and app screens, the realistic and detailed interactions that high-fidelity prototypes can provide outweigh the pros of low- and mid- fidelity being fast and low cost.

high-fidelity prototype

High-fidelity prototypes were created by adding interactions and connections to the wireframes. Because testing was to be conducted with users who have experienced the product before, care was taken to mimic existing micro-interactions within the app. 

usability test

Before starting the actual testing, a script and plan were drafted to define the goals in carrying out the tests. I expected a 100% completion rate of the tasks due to participants’ age group and familiarity with similar features, however, I understood that there may be errors in the ways participants complete the tasks. 

A total of six tests were conducted with participants who have used edX, or competing, companies. Over a 30 minute recorded Zoom call, participants were asked to share their screen while completing tasks and verbalize their thought processes.

Affinity mapping

Direct quotes and key observations from the transcript were transferred to sticky notes, with one quote or observation per sticky note. After laying out all the notes, I created clusters based on similarities and patterns. The patterns that produced insights related to users’ pain points and frustrations were converted into corresponding design recommendations. 

This process allows me to process raw data from user interviews and sequentially arrive at conclusions, or recommendations, based on solid observations and findings from the test.

priority revisions

The three design recommendations derived from the affinity map were plotted against effort in implementation vs. impact it would make to users. As the three recommendations were all low effort and high impact, they were implemented in the updated final wireframe and prototype. 

Final thoughts

With the final revisions, I was able to accomplish the project goals and the designs are ready for next steps. To hand off the designs to developers, I would share the Figma files with specifications on important micro-interactions that should be noted. A handoff meeting will also be held where we would discuss lingering questions, next steps in development, QA, and timelines.

If I were to re-do this project, I would do the following differently:

• Rephrase the tasks and scenarios in the usability test so that they are easier to understand. I noticed in my first test that the participant seemed inundated with words and had a difficult time recalling what she needed to accomplish. I reworded and shortened the script for the next tests, however I would review this process so I can ensure that completion and error-free rates are not affected by the wording of the script. 

• I would conduct heuristic evaluation both for edX and its most prominent competitor, Coursera. By examining how a competitor addresses the same problems and seeing what features they offer, I could have expanded my view during the ideation phase. 

• Adding a voting step in group brainstorming: while the group brainstorming was a success and we were able to come up with numerous ideas, I did not put aside time for participants to vote on their favorite ideas. Though there was a clear pattern and similarity between the ideas generated, reaching a consensus as a group may have given insights that I failed to see and, if the participants were colleagues, make the process feel more democratic. 

See more projects