Binar Academy App Redesign
Year 2021
Role Research, Wireframing, UI Design,
UX Design, Prototyping,
Usability Testing, Team Coordinator
Project Bootcamp Challenge
Binar Academy is an end-to-end digital career solutions platform. In the Binar Academy app, users can learn skills to enter the digital industry from the ground up or upgrade skills to become better at it.
Binar Academy has 2 main programmes:
- Binar Bootcamp (current features: registration & course materials)
- Binar Live Events (current features: registration)
Live Prototype → New Binar Academy App
Framework
Framework : Design Sprint & Scrum (remote)
Time : 2 weeks (5x times online meeting, @2.5 hours)
Team : 4 members
Pain Points
To understand the pain points we collected the comments from 4 Binar Academy Bootcamp participants about their experience when using the current Binar Academy app.
How Might We (HMW)
After collecting and analyzing the user's pain points, we defined the How Might We (HMW). Each member submits one HMW idea and we choose the best HMW that suits with the user's pain points.
HMW: “How to make users comfortable using the Binar Academy application”
Solution Ideas
At this stage we brainstorm & collect various ideas to solve user's pain points.
Affinity Map (Solution Ideas)
From the list of solutions that we collected, we created an Affinity Map and obtained 3 categories of solutions to user problems:
- Academic
- Payment
- Service
Prioritize the Solutions
Due to limited resources and time, we group the solutions that we have collected by priority.
In determining the priority of the solution we create 4 quadrants:
- Do it now (high user value, low effort)
- Do next (high user value, high effort)
- Do last (low user value, low effort)
- Later (low user value, high effort)
There are 8 solutions on "Do it now" quadrant that we will implement into Binar Academy app:
1. Submit challenge feature
2. Reward feature for completed challenge
3. Learning progress features (attendance, grades, chapters)
4. Job connect feature (job list, job list)
5. Consultation feature with Binar Academy customer service
6. Onboarding survey feature for Binar Bootcamp & Binar Insights class recommendation
7. Promo
8. Improve the infomation architecture of Binar Bootcamp & Binar Insights to make it easier to browse
Crazy 8's
We sketch the design for each solution using Crazy 8's method. And then vote them to choose the best design for each solution.
Information Architecture
We created new information architecture to accomodate new features & new screen flows
Wireframe
Wireflow
Add Course
View Promo
View Binar Insights
Binar Premium Course (Bootcamp)
Submit Challenge
View My Schedule
View My Attendance
View My Report
Browse Job Vacancies
Help/Customer Support
Account
UI Design (Before-After)
Home
Changes on the "Home" page:
➊ Main menu changed from "Home", "Insights" & "Profile" to "Home", "My Course", "Jobs", "Help" & "Profile".
➋ The content on the "Home" page was changed from "Course" & "Register Premium Course (Bootcamp)" to "Course (Free & Premium/Bootcamp)", "Promo" & "Binar Insights". With this change, users are expected to be able to access all information on Binar Academy classes (Binar Course & Binar Insights) and ongoing promos from the main page.
➌ Because there is more content on the new "Home" page, we made changes to the card design to be more compact so that it can fit more content.
➍ Changed the UI design style to make the app looks neater
➎ Changed the icon of the main menu to make it in line with the new UI design.
➏ For colors, we keep using the Binar Academy brand colors: Purple & Yellow.
➐ Change in typography, from Open Sans to Lato. We chose Lato because the typeface is more compact than Open Sans, has a lot of weight variations & good readability. Lato is suitable for mobile applications where the screen area is limited & requires high readability. We also made changes to the font size hierarchy to make the text easier to read.
Binar Insights
Changes on the "Binar Insights" page:
➊ Besides users being able to search for the "Binar Insights" class using the "Search" or "Topic Category Filter" features, we added the "Recommendded Topics" feature. Binar Insights classes in "Recommended Topic" are based on users interest that selected when first time using the app & previous course/classes the user joined.
➋ Change the card design & font size to make the text easier to read.
Binar Insights (Details & Register)
Changes on "Binar Insights (Details & Register) page:
➊ Tidy up the typography, especially increasing the font size to make it easier for users to read.
➋ Added detailed info about Binar Insights: "Mentor Name" and "Topic Tags".
➌ Price text changed from Yellow to Purple for better contrast so it's easier to read.
Courses
Changes on the "Course" page:
➊ Separation of selected & unselected Course sections
➋ The illustrations of each course are made clearer
Courses Reading Materials
Changes on the "Courses Reading Materials" page:
➊ Added reading material progress indicator (%)
Profile
Changes on the "Profile" page:
➊ "Need help? Contact us" menu moved to main menu as "Help" menu
UI Design (New Feature)
My Course & Premium Course Details (Bootcamp)
For participants of the Binar Academy Premium Course (Bootcamp) they will get additional features besides the complete "Reading Materials".
The features are:
➊ "Reading Materials & Challenge": full access to reading materials & submit challenge/quiz
➋ "My Schedule": bootcamp schedule
➌ "My Attendance": bootcamp attendance report
➍ "My Report": bootcamp quiz & challenge score report
➎ "My Points Reward": Binar points reward earned by finishing the challenge & quiz. Users can redeem the points for some Binar Academy benefits (course discount & merchandise)
Reading Materials & Callenge and My Schedule
"Reading Materials & Challenge":
➊ Users who registered to Premium Course (bootcamp) can access full reading materials.
➋ Users who registered to Premium Course (bootcamp) can submit their challenge & quiz work through the app and earn Binar points reward.
"Bootcamp Schedule":
➊ The mentor
➋ The schedule (date & time)
➌ Bootcamp venue (offline bootcamp) or Zoom link (online bootcamp)
My Attendance and My Report
"My Attendance":
➊ Bootcamp attendance report
"My Report":
➊ Bootcamp quiz & challenge score report
Job Connect
"Jobs (Job Connect)"
Currently, the Job Connect process for Binar Academy bootcamp graduates is still done manually through Newsletters & Google Form that are notified every week. That's why we created a "Jobs" feature so that users can search for vacancies & apply more easily.
The features are:
➊ Users can browse available job vacancy from various companies (Binar Academy hiring partners)
➋ Users can apply for jobs they are interested in through the app
Help/Customer Support Chat
The "Help" feature is added to the main menu to make it easier for users to ask/consult Binar Academy.
This feature is expected to:
➊ Help users consult related to Binar Bootcamp & Binar Insights
➋ Help users upgrade their account to a premium account
➌ Help users consult related to Job Connect etc
Usability Testing
- Methods : Unmoderated usability testing using Maze
- Number of testers : 4 testers
Results
- Testers successfully completed all tasks (100%) related to "Home", "Jobs" & "Help" features.
- For tasks related to “My Course” feature, 75% of testers successfully completed the tasks but had difficulty at the beginning. May be because they are not familiar with the UI and the new features.
- Testers gave an average rating of 8.5/10 for the new design.
- In general, the testers like the new design.