Skip to content (Press Enter)
Mehdi Saem

Mehdi Saem

Product Design Portfolio

  • Home
  • Blog
  • Portfolios
Companies

MCI Academy

Website Link

Overview

About MCI Academy

Hamrah-e-Avval (MCI) is the leading operator of Iran which provides telecommunication solutions to Persian customers. MCI Academy is an educational wing of MCI that empowers fresh graduate students with online courses and internship programs.

Product List:

  1. Online courses
  2. Online internship management system
  3. Resume builder
  4. Test builder
  5. Design System
  6. Gamified education program

1 – Online courses

Problem Statement

Deliver relative online educational courses to the users.

Solution

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

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

Usability issue list

After evaluation we bring issues into a list in online google sheets then we prioritize every issue.

Ui and Prototype

2 – Online internship management system

Problem Statement

Our mission was to guide good candidates to be prepared for working in MCI through an internship program.

Solution

The solution was to guide candidates with good content in right place and a panel that helps evaluators to find the best resume between various resumes.

Design process:

  • Research and benchmark
  • Design the first version and test the user flow
  • Improve user flow and page content based on the first version
  • Improve admin panel with multiple features

User flow

In the first version, we try to achieve user goals with a simple user flow:

After the first version, we find the user flow appealing and we tried to improve our submission stage by this user flow:

Wireframe

After brainstorming with the team, we decided to simplify resume submission flow in these five steps:

Admin panel wireframe:

In version two of resume submission we use our built-in resume builder:

Ui and Prototype

Test and Results

Till this day (January 2022) we got +9000 submitted resumes for +140 internship positions.

3 – Resume builder

Problem Statement

After developing the first version of the internship process management system we find that the quality of submitted resumes was not good enough so we decided to maintain our resume builder and force applicants to fill in the important details about their education, experience, skills, and etc.

Solution

First, we benchmark online resume builders such as resume.io, wozber.com, jobinja.ir and etc. Then we design and develop the first version and test them in the second internship program. In the third internship program, we redesign every section based on the previous cycle.

Design process:

  • Benchmarking
  • Design and develop the first version
  • Test the resume builder on the second internship program
  • Redesign resume builder for third internship cycle

User flow

In this flow we try to find when a user finds the resume builder and how reacted to it:

Wireframe

Ui and Prototype

First version:

Final version:

Results

After two quarters we arrive at this sciatica:

+9000 unique users builder their resumes and +3000 (+30%) of them fill +80% of resume sections.

4 – Test builder

Problem Statement

To find the best candidate to guide them through the internship process we decided to maintain an early evaluation exam to test applicants’ skills.

Solution

An early evaluation exam that tests applicants multiple skills.

Design process:

  • 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

User flow

First version

Final UI and Prototype

After the usability test we arrive at these pages:

Test and Results

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

5 – Design System

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.

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

UI Kit Checklist:

Final Result

Test and Results

The result was consistent UI components, increasing the design process by 50%(measured by hours spent on UI design) and increasing the development process by 30% (measured by hours spent on front-end tasks).

Related Projects

Paziresh24

January 5, 2022