Binar Plus: Documentation of interface design process
March 2019, Binar Academy decided to change its business model. The higher-ups came to think that Binar App, one of their product, should be redesigned as the impact of this change. A lot of ideas came up while everyone also has different priorities for other products.
On the other side, we had to release the new version for the non-scholarship program — Binar Plus — that will be opened soon. Although the current Binar App already had a scheduling feature, it couldn’t be used as it had different flow from what we implemented in Binar Plus program. So the tech team resolved to build a new scheduler app which, for us the developer would gladly used as an opportunity to familiarize ourself with Flutter.
First step: Gathering insights
The first thing I did was to gather information about the already existing Binar App, especially the scheduling feature. Most of the tech team in Binar were mentors as well in Binar Academy, so interviewing them were done easily.
I asked every mentor’s experience in the academy when using Binar App (They were the ones who built the app though, so I learnt the page flow from them as well, tee-he).
From those interviews, here are mentor’s pain points that I found out:
- Cannot edit submitted student’s scores
- Cannot edit submitted student’s absence –for each day
- Place and time of scheduled classes can be changed manually only (not via the app)
- Student update only showed once a class’s done
For the student’ perspective, though I can relate it myself to my own experience when I was a student in the academy, I also added some insights from other alumni who joined Binar’s design thinking workshops.
I conclude the pain points from the student as below:
- Sometimes the score feature doesn’t show up immediately after the class is wrapped.
- Although the students already attended the class, sometimes the system didn’t record it
- If a class was canceled, there’s no notification from the app
- Scheduled classes cannot be changed from the app, yet we have to arrange a schedule for 2 months before the academy started
As an addition, Binar Academy’s masters who conducted all of the academy programs gave me some ideas. That helped me a lot to decide the flow for Binar Plus app. These are the solutions that I got:
- Make the scheduling system flexible for both mentor and student because students are the ones who pick the time and material of a class,
- Add a history feature, so user can trackback their previous classes and things that were taught inside,
- Design an app for both android and iOS.
Second step: Building the architecture
I was tasked to design the new app that can use the existing API of Binar Academy. So, creating a flowchart for it is not a simple task. I’ve created a couple flowcharts and bring it to discussion with the dev team. It took us some time and energy but here is the final flowchart:
After the team agreed and made sure that we were on the same page, I started to create the lo-fi and shortly, the hi-fi as well.To decide which navigation that should be implemented in Binar Plus, I discussed a lot with our mobile developers.
While I had done it halfway, a mentor just told about the ‘switch’ feature. “Mentors can ask for a replacement if they’re unable to attend the class. The feature is already attached in the Binar apps so it won’t be an impediment for developers.”
This is the architecture of Binar Plus:
Third step: Coloring and decorating
Since we already have built Binar Plus homepage, I just adapted the design system for the apps. When I generated the picture, I got this color palette:
For the typography, I used Roboto that already applied in all of Binar products.
Based on the system, I started to design Binar Plus apps as follow:
Design Version 1
Design Version 2 (Last version)
I felt that Version 1 was too crowded, so I revised it to Version 2.
Before, we chose Design Version 1 since the ‘Add’ button is the main attraction of Binar Plus (since users are encouraged to add more and more class). And I had implemented it in the Hi-fi design.
The developer team just realized that Flutter had a different approach from the native that they usually used. I was asked to change the navigation bar interface. The ‘Add’ button removed into the schedule page only.
For additional decoration, I added 3 illustrations for these pages:
- Schedule (when your schedule’s empty, we encourage users to start/add the new one)
- As transition when users have done a review
- Profile (as a substitute of profile image)
Fourth step: Entrusting the blueprint
For the handover, I transferred the whole design by using Zeplin (setting Android, mdpi).
Since the mobile developer built up the app using Flutter, I don’t need to create the iOS version of this design.
In the development process, I developed the icons and generated each of them in http://fluttericon.com/. It helped the developer team a lot since we found out that Flutter’s quite sensitive on generating the assets e.g. I cannot include any frame as the icon’s background.
Finally, there’s a lot that I still have to learn on developing a design system. Because this was our first encounter to Flutter, there are many things that we left behind but we can overcome any of them. The whole process for making the Binar Plus app is really enjoyable!
