top of page

Designing After School Academy Website and MobileApp

Project Overview



User Interview

Domain Research




Adobe XD

Adobe Illustrator




Survey/User Interview

Research Synthesis



User Testing

Wireframe Iteration

UI Design Website

and Mobile App


4 weeks


March 2020

About Afterschool Academy

Afterschool Academy is community programs that maximize their customer reach. The Academy targets 13 years old to 18 years old students.
The school offers free and low-cost programming for young adults across a wide-ranging socioeconomic spectrum by generating revenue through advertising and premium partners that pay to have their programs on the platform. Because the business will be primarily funded by these premium partners, the Afterschool Academy needs the platform to build an active online community that brings value to partners and incentivizes continued funding. Also, the faculties can manage and collaborate on one platform which brings the convenience for teachers and customers.

The Challenge 

Bitmap Copy.png
“I want it to be as convenient as scrolling on Instagram and liking a bunch of stuff while you’re standing in line at the grocery store.” 

Problem statement

Creating an attractive website and mobile app which is user-friendly to engage the customers. Also, to help teachers collaborate with parents, and students easier, the platform needs to be easy to use so that the teacher can manage classes, communicate, and prepare lesson plans.

Research Methods

Competitive Analysis 

Domain Research


User Interview

Screen Shot 2020-05-19 at 11.40.41


Screen Shot 2020-05-07 at 4.59.57 PM.jpg
Screen Shot 2020-05-07 at 4.59.57 PM.jpg

Design Principles

User Friendly

The design should be friendly with any kind of user. Users who never use the product before should still be able to understand how to use it in the first try. 


Visual first

The design should prefer to use visual material rather than text. People tend to remember and recognize visual data better than text data. Design with visual first will help users recognize and remember the product more easily



The design should make people feel the product is trustworthy and worth any value that they spend for. A new product with no brand recognition yet should have a design that makes people trust the product and willing to use it.


Elegant and beautiful

The design should be elegant and beautiful. Human nature is to love beautiful things. Therefore, design at a core has to be beautiful and attractive to users. 





User Flow


User Flow

for Website

User interview

Taking the user interview to understand the pain points and demand of users. Then revising the design to not only fit with the user’s need but also look aesthetic.

A4 Copy 14.png
A4 Copy 13.png
A4 Copy 12.png
Design Style

Mood board


The mood board 1 has vivid colors with a bright tone which creates a happy mood and fresh. These colors stimulate students' imagination. Also, the color combination with cute illustrations helps students reduce stress, easy to understand lessons, and avoid overload information. Moreover, using many images, illustrations, shapes, and diverse materials will make students curious to learn.



In the second mood board, the main tone is the natural colors of an environment that create a friendly and closely feeling. However, it is still enough to evoke the students' curiosity about the world around them. This tone helps users feel peaceful and relax. It is combined with nice illustrations which will bring the students deep into the lessons, and open the new world through the computer screen.


Typography and Color Palette



Key Insight

  • Visual appeal is important to engage the audience and reach new customers.


Key quote

  • I want a resourceful platform for my organizational needs and my educational content. It must be consistent in design and easily using.


Key finding

  • Educational and working professionals need assistance most in task management. They prefer to clean and clarify designs.



Flow 1: Users can check Academy locations and contact information



Flow 2: Faculties/ Teachers can edit classes, manage classes, and prepare the lessons/assignments.  


Flow 3: Faculties/ Teachers have a dashboard that is organized by the charts. The mailbox includes managing emails, saves contact information, and chatbox.

Hi-Fidelity design

Hi-fidelity design

After iterating the usability testing wireframe and mockup design, I have a final solution for the Afterschool website and mobile app. The solution is to create a consistent color and logo for both the website and mobile app to have strong brand recognition. Also, I design the website with many helpful and convenient functions for users such as calendars, email, and collaboration. The navigation is organized very clearly. Teachers not only are able to contact parents and students but also can build lessons and manage class on one platform.

Mobile App

The mobile app shows popular courses and hot courses on the homepage. Also, users can search and explore the new courses by clicking the suggesting buttons. Therefore, finding information will be more convenient for customers. Chat, email, task management, and class management are included in the app. Although the mobile app has many functions, it is well organized and has clear navigation which is easy to use for the users.

bottom of page