MWrito - Learning APP

Project Overview

MWrito is an online learning app designed to help students follow their school curriculum in online mode. The app provides features for doubt resolution, concept testing, and personalized learning statistics.

About Company

Writo Education Private Limited is a content services platform. They have a large team of students for creating Video and Text Solutions for every subject for other organizations. They wanted to create their own education platform to step into the edutech sector with their already existing content.

Discovery Phase

In this phase, we discussed the main problems faced by students during the pandemic and how they were not able to follow up with their school curriculum in the online mode.

Logo Design

The logo design was based on a mock-up of two foundation style pens joined together but a curve. This mock-up was already present with the employers and I was supposed to convert the same into a vector based logo.

Design Process

Final Logo

Style Guide

Colors

The colors were based on the instructions and logo mock-up provided by the employers themselves. Primary theme is set to dark colors so that long hours of usage is less eye-hurting, but a light theme has also been built so that users are able to navigate better in a well lit surroundings.

Some gradients were also used repeatedly through out the application for visual enhancement purposes.

Typography

Poppins was chosen as the font of choice because of its clean, professional and the same time a friendly feel. It was the perfect fit as per the desired requirements of the application.

Poppins is a free font with a lot of variants available out of the box which made it an even better choice considering the visual hierarchy that can be created with it.

A single font was enough to create the needed hierarchy in the user interface, so to keep the style guide easy to reuse and reproduce other products with, I decided to go with just Poppins.

Design Process

The design process of this app included:

• UX research
• User Flows
• Wireframes
• Final Design

The major thing that I like to keep a note of in each of my projects is organization, I organized the file structure on Figma as shown in the image. This makes my workflow much smoother and also the handover process becomes a lot less clumsy when the client gets to see each section individually.

UX Research

The other big apps have so many features that it makes them look cluttered in a way. The user wants to have a simple and straightforward way to gain knowledge and also the ability to ask his/'her doubts at any time.

User Flows

These user-flows were made using FigJam. Userflows helps us to realize all the possible directions a user can take in a an app. It becomes important to take into account each and every thing that the user can click so that the user doesn't get lost in the app and gets frustrated by it.

Full View

Left Side

Right Side

Wireframes

The wireframing was done inside figma itself, so that maximum components can be later used in the high fidelity designs with a little changes. Wireframing in figma itself also gave the advantage of quick and easy iterations, that were done multiple times in the course of this project.

The employers were kind enough to provide a rough hand-drawn sketch of the doubts section of the app, which was later iterated many times to reach the final outcome.

Live Prototypes

🖐 Tap on any prototype to play with it

Final Design

Additional Sections

Onboarding Screens

Testing/Practice Interface