Thrive by Teracube is an app that helps you manage your child's phone.
Teracube is in the business of making phones. Their phones sell because they are repairable and eco friendly. They are also really cheap, but are tough and last long.
What needs to be done?
In my first call with the teracube team, they said:
The app is wildly incosistent with design, and we don't have the bandwidth to change the flows because of how the API is structured. We would like to stick to default Flutter widgets as much as possible.
Roughly translated:
The app needs to look consistent in design, using just default components from Material Design / Flutter, without changing the flow of the app.
Design inconsistencies with current design
Broadly there were issues with
-
No signifiers for multiple text input states
-
Inconsistent Typography and Buttons
-
Non tap-able surfaces look very similar to tap-able surfaces
-
Randomly center aligned screens
-
Non MD3 pickers being used
Designing a Solution
Since I have worked as a developer in my early career, I had a strong hold on how states were being managed in the app, and all I needed to solve the design issues was the IA, and MD3 guidelines.
Understanding the architecture
After spending some time with the backend dev at Teracube, I was able to come up with the API architecture, based on which I created an Information Architecture for the app.
Material Design Guidelines
Many native apps adhere as much as possible to MD3 guidelines, but often break away when needed. This was also my approach to designing for Thrive.
Importance of Flutter
Flutter has many of the MD3 widgets by default and all that needed to be done was run a demo app to get a feel for all the widgets. Having worked as a Flutter Dev previously, this was pretty easy to achieve.
The Solution
After a nice splash animation, people land on this screen. Sometimes, they might open it much later and forget what this app is needed for. They also can't uninstall this app - so it's imperative that we explain what this app is for.
Also, handling the onboarding of a new user is much easier this way. Obviously, for later - but a nice touch nonetheless.
The "Apps Mangement" header created quite some confusion among users, so I fixed the heirarchy of the screen, and fixed the surface colours.
Had to retain the tab structure, however I have changed this in the next version, to accomodate more functionality on this page.
Similar problems with the page title here as well, MD3 has clear guidelines on this so I followed them and moved it to the center of the "App Bar".
Now, since both of these controls were toggles, it was easier to show them this way and reduce the cognitive load for the user.
Moved the picker to a dialog box, as indicated by MD3 guidelines, and added a signifier for the selected value.
There is a lot more to this app. I would love to explain over a call sometime.
Feedback from users
Cleaning up the Child Controls screen and App Controls were a big part of the success that Thrive sees right now with it's early users.
This gave them the opportunity to build on the goodwill and add more features.
Thrive Beta, coming soon!