top of page
Portfolio
Coursera App Revamped
Overview
It's my personal revamped project for adding new features to an app called "Coursera".
One day, I came up with that I'd like to learn something via online resources. Finally, I find about this online platform. Most of the time, I prefer studying courses on Coursera Website. I think it should be had an app service as well.
After downloading its App, I consider the function of browse could be optimized. Since the most important function of online education platform is forum could be used by students who can share and discuss their point of view with their classmates more effectively. As a result, the idea of replicating the Coursera app is in my mind.
Expertise
UX, Prototyping
Platforms
Android
Role
UI/UX designer
Duration
9 weeks
Setting our goal
-
Redesign browsing page
Giving users more time to scan other courses.
-
Update UI design-- demonstrate how it may look like after redesigning.
(Followed by Android design guideline)
New Features
Browsing Courses
Before sign in to the app, users could browse what else courses they may interested in instead of bothering by the login scene first.
Changing Profile Picture Easily
After creating a new account on the App, users might want
to add more personal
information to the account, such as update their profile picture.
DESIGN PROCESS
RESEARCH
Product Characteristics
-
Using blue as symbol color, and light grey one as the background color
-
UI design pattern- Card pattern
Competitor Analysis
Here are two apps that I've used: Hahow & Jella. They give me some inspiration for the revamped project.
The chart below is a comparison of three apps service:
Through pictures from the other two apps to see which function
I plan to add to the Coursera app.
PIC 1
PIC 2
PIC 3
IDEATION
Sketch
After collecting some inspiring ideas, I start to tidy up and sketch how I hope to redesign the screen looks like.
Funtional Map
Then, using Draw.io to visualize my sketch ideas.
Wireframe
To make sketch ideas closer to the real app, use Figma to draw wireframes.
Build a style guideline
Building a style guideline for the Coursera app before doing the final UI design to help check the primary color and every size of text and buttons.
Also, if someone who wants to do a few adjustments can follow this guideline to keep the consistency of the app.
DESIGN
UI design
Following the style guideline to demonstrate the adjusted appearance of the app and make the user's experience more real.
PROTOTYPE
bottom of page