Click here to go back to the main site
MWrito - Learning APP
Mobile based e-learning platform
About Company
Writo Education Private Limited is a content services platform. They have large team of students for creating Video and Text Solutions for every subject for other organizations.
Product Details
They want to create their own education platform, so that they can step in the edutech sector with there already existing content
Deliverables
App UI Design
UI in both dark/light mode
Convert the mock-up into a vector based logo
Create a style guide for the brand
Discovery Phase
In this phase me and the employers themselves discussed the main problems faced by students in the time of pandemic, and how they were not able to follow up with their school curriculum in the online mode. These were some of the key points of the discussions over several meets
Problems and goals
To be able to learn anytime, anywhere
Test of concepts to retain them better
To be able to communicate doubts easily
To be able to track yourself better
Key metrics
Ease of asking a doubt
Ease of attending a course
Personalized Statistics
Testing of the concepts
Solutions
Give users their data back with stats
Provide a 24 X 7 Chat support for doubts
Pre-recorded video content for easy revision
Challenges
Working to very little user data
Keeping the app professional yet friendly
Working within the development constraints
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.
Logo Design Process
Final Logos with several variants
Style Guide
Colors
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, those are displayed in the final design at the bottom.
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
Users feel overwhelmed by the cluttered interfaces and excessive features in other apps.
There is a strong preference for a clean and straightforward design focused on knowledge acquisition.
Users value the ability to ask questions or clear doubts instantly without navigating through complex workflows.
Simplicity and ease of use are key priorities for users when interacting with the app.
Userflows
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 of user flow
Detailed left side of user flow
Detailed Right side of user flow
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.
Overview of wireframing done in figma
Live Prototype
🖐 Tap on any of the prototypes below to interact with them
Light Mode
Dark Mode
Misc. screens
These are the sections of the app that you might have missed in the prototypes above
Onboarding flow
Testing interface
Mockups
