MCI Academy

icon


icon

Designed Pages Part2




1 Online Courses
problem Problem Statement

Deliver relative online educational courses to the users.

solution Solution

A basic LMS to help users find the fittest courses for them and take them easily.

design Design Process
  • Creating usability issue list by heuristic evaluation and one to one usability test
  • Prioritize issues and solutions
  • Design and develop
  • Daily check website heatmap and user recorded sessions
designed_page_part3
cross Usability Issue List

We started the process with Summative usability testing to understand current problems. Based on its results, we used affinity mapping to determine priorities. Finally, we created task flows.
To uncover pain points while using the website, we conducted five remote usability tests on Skype. The selected users were reasonably close to the product's personas. Two of them were students, four of them had not used MCI Academy in the past. We gave each user three scenario-based tasks within the website:

  1. Check the information of course X and enroll in it.
  2. Register for the free part of course X and watch it.
  3. Increase your online credit on our website.


usability_outcome
usability_left
usability_right

Based on our usability test, we decided to focus on the following four problems:

  1. credit increase
  2. course's information
  3. user flow
  4. homepage
notes
quantitative Quantitative Analysis

We had a session with other teams to discuss users' problems. All teams were aligned that we should change multiple parts of our product, therefore, we decided to conduct a quantitation analysis.
We prepared a survey, and 150+ participants answered it.
Important points extracted from the survey are as follows:

quantitative_pages


table 2





table 4
table 1





table 3





table 5
competitive Competitive Analysis

Based on the design thinking approach, in the first phase, we tried to empathize with our users. Therefore, after user research, we investigate exciting products on the market. We checked users' reviews of those products to find out important factors for users. This will help us to better decide what features we should bring and how to enhance the user experience.

table6.png
dark_analytics






persona

persona_icon Persona
A user persona is an archetypical user whose goals and characteristics represent the needs of a larger group of users.
In this product, we have two personas that are the fictional characterization of our users. These personas help us keep realistic ideas of users throughout the design process.
persona_card

ahmadi

mokaram





sitemap

web_icon Sitemap
In the following, you can see a map of the various pages on Academy Hamrah website:
web

hierarchy





user_flow

flow_icon User Flow
  • Design and develop the first version that contains three categories of the test (math, English, and general questions)
  • Trying to stabilize the exam process
  • Design and develop a comprehensive exam builder platform
flow_card

user_flow_diagram





usability

issues
Before delivering mockups to developers, I evaluated the effectiveness of our design.
Participant scenario:
  • Create an account and fill out your profile
  • Set your learning goals
  • Leave a review for each course that you passed more than 50% of it.
  • Enroll in a specific course
cards

Pain points:

I did not figure out the "Talk" section, I supposed it is a podcast but it was not correct.

I could not edit my name in the profile.

I was not able to find easily how to set a learning goal.

When I left a review, I expected that it automatically save my information for the next times.

I wanted to search the course's name but I could not find a search box.

I did not understand the difference between "My course" and "My class" sections.

table

Positive feedback:

I was delighted with the Home page redesign.

Being able to rate is very important for me and I was glad that you have added this feature.

I can see the instructor's resume quickly on LinkedIn.

I was attracted to your new internship program.



gender
average
expertise






clarity_title

chart Microsoft Clarity

We analyzed the user behavior using Clarity. That gives us valuable insights into how people are interacting with our website which significantly helps us in finding their pain points. Also, we monitored core KPIs that were determined in the Benchmark phase.

box

user_flow_diagram






title

icon Homepage

home


icon Course Information

info


icon Error

error





2 Design System
problem Problem Statement

We were an agile team with 4 developers. We were trying to design products in our team as quickly as possible and consistently so we decide to design a single source of truth for our style guide, main component, and design process to empower our design and development team.

design_cards
solution Solution

The solution was simple first we decided to put the style guide together to have a consistent style guide after that we design a simple UI Kit in Figma then we document every step of the design process and deliverables for teams.

design Design Process
  • Create a list of usability issues by checking inconsistent pages, site heatmap, and user session recordings
  • Choose a design tool (Figma) and set the style guide
  • Design a simple UI Kit
  • Document Design process and deliverables


info

info

info

info
Copyright © Sanaz Najafi 2024