top of page

Portfolio

Coursera App Revamped
 

shotsnapp-1621306113_edited.jpg

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

Double Diamond.png

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:

擷取.png

Through pictures from the other two apps to see which function 
I plan to add to the Coursera app.

484709.jpg

PIC 1

484710.jpg

PIC 2

Inked484711_LI.jpg

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.

sketch.jpg

Funtional Map

Then, using Draw.io to visualize my sketch ideas.

functional map.png

Wireframe

To make sketch ideas closer to the real app, use Figma to draw wireframes.

1.JPG

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. 

styleguide.png

DESIGN

UI design

Following the style guideline to demonstrate the adjusted appearance of the app and make the user's experience more real. 

2.JPG

PROTOTYPE

bottom of page