Art
Hand drawing by oil color, acrylic color, and pencil.
Designing After School Academy Website and MobileApp
Project Overview
MY ROLE
Wireframe
User Interview
Domain Research
Prototype
TOOLS
Sketch
Adobe XD
Adobe Illustrator
Photoshop
DESIGN PROCESS
Research
Survey/User Interview
Research Synthesis
Wireframe
Prototype
User Testing
Wireframe Iteration
UI Design Website
and Mobile App
DURATION
4 weeks
DATE
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
“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
Survey
User Interview
Brainstorm
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
Trustworthy
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.
1.
2.
3.
4.
Architect
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.
Mood board
MOOD BOARD 1
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.
MOOD BOARD 2
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
Logo
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.
Prototype
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
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.
