top of page
hero.png

Role : UI/UX Designer
Project Type : Mobile Application
Duration : 10 weeks



Overview
Eductech app is an e-learning and e registration app for eductech Nigeria which is an educational learning facility, This app enables user to pick courses ranging from local educational advanced level program up to IT advanced master classes whereby they can enroll in to either facilitate their university admission or start up a career in the tech industry, what this app basically does is show list of courses offered, duration of each course, the enrollment fee,  payment procedures and plan,  ability to select physical classes or online class and also schedule learning hours.

The problem and back story
This project was given to me as my first project when I got a job at Eductech. I had the opportunity to work with one other designer and a UI/UX designer tutor at the company for tips as well. The company focuses on creating a merge between the local education and advanced ever growing IT industry. Their drive was to ensure everyone is technologically inclined to enable them function in the society that creates opportunities for people within the quadrant. The company fully operates at its physical location teaching different courses with experts taking students in all university advanced level and IT master class programs. Now they want to be able to reach more students who are interested in learning regardless of their location and needed “A platform that can provide this course information as well as connect this students to top tier teachers in each of this field”

The design process thinking

Project Timeline & Action items
Estimate the order in which the plan will be implemented, so that the plan and timeline are in accordance with the deadline

1 Discovery stage


Research -Interviews

After been handed the responsibility of the design system from the discovery down to the testing, the first thing I did was to analyze the online space eductech was trying to have leading edge in. There seem to be a high numbers of competitors providing local educational services such as IJMB, JUPEB, Cambridge A’level, UTME classes and other Pre university courses like www.ijmb.org.ng brainfillacademy.com kojexconsult.com, however, non of them had a platform that combines this with IT courses. 

Eductech offers all of the above and also physically offers IT Courses such as training for digital marketing, graphics design, programming, data analyst, web design, cyber security, UI/UX design, networking, video editing, Microsoft app. Now the team wants to target a range of students regardless of their location and the objective was to implement physical class into a digital app. 

This made me look into other E-learning platform that offered IT courses, took a look at Udemy, Coursera, Alison and we realized the goal was a little different from ours. This app solely offers online training without any physical location for training user. Some of them have no real time classes online as well where student can have a live session with an opportunity to ask questions when they do not understand. 

 

Then I researched into the current and potential users of the products, I looked at the age bracket of the User using the service, their locations, inspirations, why they are interested in the product to enable me understand their goals and behavior and we came up with a few interview questions which are
 

Random people within the targeted age bracket

  • Could you tell us a bit about yourself?

  • What do you love to do in your spare time?

  • What you consider learning online if you had an opportunity to take on course that guarantees you a 200 level admission?

  • Have you been using any e-learning apps for studying ?

  • Do you find traditional learning easier than the e learning ?

  • How do you find your experience with e-learning apps to be?

  • On what basis do you explore courses?

  • Why do you you want to learn other skills aside the traditional education?

  • Do you care mostly about the certification, marks, certification or knowledge imparted and Why? 

 

Key findings after interviews 

  • They are students who are looking forward to pass UTME to path a way for their university admission, get enrolled into their course of study, complete a degree and enter into the market to build a career around what they studied in respective universities.

 

  • Most of them are not aware of the importance of building a career in tech as the traditional mode of getting education has been their only limit which we believe might not allow them reach their full potential.


  • Only a few of them are aware of the careers around the tech courses and believes getting to learn this is of a big advantage by the time they are done with university program.

Research - Market Analysis
Quantitative research into specific experiences gave me a better understanding of the market and the data collected was used to create a survey of the market we are trying to penetrate, I looked into a skill development app and the A'level website of a competitor which are Alison and Brainfill academy to highlight what they had, their mode of operation, payment procedures, payment plan, and their modes of learning and what we needed to look out for in other to create an app that processes a unique feature and can serve a range users by meeting the expectation of the users.

 

SWOT Analysis
After the quantitative analysis, I conducted a SWOT analysis of eductech to look into it's strength, weakness, opportunities and threats of the services offered against it's competitor which really help a lot with my reserch process. Below are important points highlighted.

2 Define stage

Pain Points
The pain point we identified after the interview are listed below

  • Parents are rigid about their opinions and only have them focus on university due to lack of awareness 

  • Lack of knowledge about different career options from potential users

  • Current users are not satisfied with the lecture modes, forced availability for classes and other activities.  

  • No professional guidance in school during secondary education.

  • Too many options; how to explore, what is the best fit?.

  • Lack of means to explore different fields.

  • Difficult to convince parents to pick a career of choice.

 

 

User persona
With this research we were able to identify the pain points, created a user persona to understand the user needs and expectations from Eductech regardless of their location.

Empathy Mapping

I then went ahead to do the empathy mapping for both the personas to get a better understanding of where the gap in expectations to solution exists and what are the pain-points.  I was able to create a visual representation of the user's perspective by dividing into four sections their: "Thoughts," "Feelings," "Actions," and "Needs.". This also helped me decide how the app’s should be designed to fit in with the user’s expectations and thought process.

3 Ideate

User Flow
Based on the research findings and aligning our goals with the pain points discovered, we had a rough idea of what the app would do and what features we wanted to include in the app. We then made a user flow which made us think in detail about every feature and what steps the user would have to take to access them


Information Architecture
This will define the content on each page will be structured and presented to a user when they are interacting with the design

​​

Wireframes - initial paper sketches
I started sketching paper wireframe to put our goals into shapes after mapping out the userflow and what information needed to be on each pages. These wireframes helped us focus on the functionality of the application and not the visual details before putting it into a digital wireframe.

WhatsApp Image 2022-12-10 at 8.40.50 AM.jpeg
WhatsApp Image 2022-12-10 at 8.40.44 AM.jpeg

Wireframes - digital

After a complete paper wireframe, I proceed into creating a digital wireframe using the initial paper wireframe. After which I prototype the wireframes using adobe XD and conduct a rapid user testing with few studentsof Eductech by letting them complete a task using the prototype and collecting their feedback for improvement. Also passed it to an Eductech UX tutor for heuristic evaluation to enable me determine userbility errors faster. I then presented this digital wireframe to the stake holders for review and feedback.

lofi prototype.png

4 Prototyping

Color palette
The visual design, picking our primary color was quite easy because the company has a logo with so many beautiful colors I just have to work around. I picked torquoise blue as the primary color which represents calm, friendly, and cheerful color, radiating the tranquility of blue, the growth of green, and the vitality of yellow, Turquoise can also help promote clear thinking and relaxation when learning.

color palette.png

Typography

For the type, I wanted something minimalistic and easy to read and a style that won't bore the user out while reading so I picked rubik.

typeface.png

Visual Design

The final hi-fidelity design of each page with it's dark mode design as well.  our aim was to create a design system which is easy to read and navigate in any of the modes.

Visual Design

The final hi-fidelity design of each page with it's dark mode design as well.  our aim was to create a design system which is easy to read and navigate in any of the modes.

Onboarding

From the first step, Users should learn about the application, the image of the lady with a book in her hand indicates that the app is for learning and educative.

onboard.png
login.png

Login and  sign up

Login and sign up with the option of one tap login using gmail, apple id, or facebook without having to fill in the form field.

Hompage

The Homepage was made simple and easy to understand for user. Accessibility was put in place for the defining the icons to enhance experience while the program and IT courses can easily be identified with the image selection.

homepage.png

Program and Courses

Focused on keeping the course and program page simple and easy so users can interact within a lesser time by focusing on simplicity. This pages have course available, description, fee, reviews and how to enroll.

engagement.png

Registration and payment methods

Users can enroll into the program or any of the IT course by making their payment via the app, they are able to pick a lecture mode before completing the application.

application.png

student portal and ongoing courses

Users can enroll into the program or any of the IT course by making their payment via the app, they are able to pick a lecture mode before completing the application.

portal.png

Other dark mode screen

darkmode.png

5 Testing

 

Iteration

As a first step in the iteration process, I created clickable prototypes using adobe XD

prototype hifi.png

Usability Testing

This is crucial in other to enable me find the errors and seeing the design from the user's perspective. I conducted usability testing with current students of eductech by using the prototype to gather feedback about the userflow and how quickly they can complete a task using the e-learning app. With the feedback, and the feedback I got from some of the users are highlighted below.

Payment Confirmation

Users unable to easily navigate away from the payment confirmation page to any other page on the website.

Instructions on how to navigate to the student portal after a submission on payment confirmation page.
 

iterate 1.png

IT course payment page

The instruction on the payment page for the IT courses does not indicate clearly they need to pick a learning mode before proceeding.

iterate 2.png

With this feedback I was able to improve the user experience, Improve accessibility and simplicity thereby improving user retention.

The Adobe XD Prototype
FInd below the design screens and Adobe xd prototype, Click here to view in full screen in a new window.

 

Conclusions & lesson learned

Designing an effective solution to a problem which has been around before I joined the company was very challenging yet a very rewarding journey. 

It was clear from the moment I picked up the problem statement that I wanted to design something that would not only be efficient on paper but also in practical life. 

Picking the colors was not a problem, the company already had a logo with colors that blended perfectly. 

Was glad to be a part of a disciplinary team to design an educative mobile app, prioritized and resolve new features that improved user experience.

Success Metrics

The success of the project was measured alongside a senior UX designer over time as I was working to continuously improve the user experience of the product after the project launch and this was done using the summative user testing

We tracked the number of users who download the app, sign up, and completed the registration process. Conversion rate hit 20% as of users who signed up ended up Enrolling for a course within a period of the first 3 months. 

We were able to track the effectiveness and quality of the courses as a higher percentage of users who enrolls for a course always end up completing their course within the first 3 months 

User Feedback: We sent out surveys at different intervals after course completion and monthly to gather feedback from users to understand their experience with the app and identify areas of improvement.

My Learnings

  1. Learned how to Discuss and Iterate on ideas and come up with a solution.

  2. Learned how to not get stuck on one solution and realize we cannot solve everything.

  3. Learned how to prioritize work.

  4. Learned how to not get stuck on one solution and realize we cannot solve everything.

  5. Learnt the importance of User feedback, the value of heuristic evaluation been a time saver in this project.

Reach out to me today

Do you have a project or opportunity in mind or looking forward to a collaboration? Contact me here or email me at

  • alt.text.label.LinkedIn
  • alt.text.label.Instagram

©2022 by ui_ivor

bottom of page