JARVIS
Jarvis was an internal name for an educational assistant product for private school math teachers to create math assignments and manage their classrooms.
Back
Jarvis was an internal name for an educational assistant product for private school math teachers to create math assignments, and manage their students easily. The target students ranged from 3rd grades to 12th grades, but the focus was on the high school students. The product had 2 sides, one for the teacher's view, the other for the student's view. When I joined the team, the designs were heavily focused on the teacher's side of the view. The project had many ups and downs, and went through many design updates and changes. But in the end, the company decided to terminate the project due to financial difficulties and laid off half of the employees. The product was not able to hit the market.
For 8 months working at Riiid Labs, I was one of the main designers who worked on this product until it got deleted.
There were many designers who touched this product. I collaborated with 3 designers to work on the project.
The original designs for Jarvis looked nice and clean from the outside. But when you dive in, all the functionalities and features are unclear. There was no clear hierarchy of information throughout the page. Most of all, the designs were made without considering the user personas: the teachers.
The design was also made in both light mode and dark mode. The leadership team loved how dark mode looked and wanted to hold on to it. While the UX was not clear on the product, considering 2 color modes was a waste of resource. Our team decided that we can only focus on one mode, light mode. We decided that dark mode is not bringing any value to the product, and decided to throw it away. Another reason why we had to give up on dark mode was because of our question bank's graphics. Math graphics were scanned images with white background, not on transparent background. It was a problem to show the image in dark mode designs. This fact itself was enough to convince the leadership team to give up on fancy looking dark mode.
1. No clear User Flow.
2. No clear hierarchy in information.
3. No Design System Library.
4. Accessibility Issues.
Another big hurdle we had to go through was to create a design system library from scratch. The current design had over 19 different shades of grays and it was in dire need of organization. The developers were building the design already, and they were confused every day about simple things such as colors. Along with fixing up the colors, the designs needed to be audited to make sure the contrast ratio was good enough for AA level of accessibility. A lot of information was being conveyed through red, orange and green colors, which were not clearly visible under the color blind users' eyes.
After several months of building the design system library, and fixing up the design, the slides below are the before and after of several designs.
Designs were all retouched based on the hierarchy of information, and understanding the user's most important needs on why they have to use this product. We focused on what is the most important matter for each screen and slowly cleaned them up according to its importance.
While existing designs were being updated and fixed, we had to work on a new feature, "Dynamic Assignment Creation" in tandem. The top image shows the organization of user flow of this feature with design annotations for developers, explaining different states of a component. This is how the team started to lay out the designs for the design-dev design handoff meetings.
The leadership team didn't approve the budget for user testing. Instead, we hired a new product manager who used to be a teacher, and worked on education related products. She gave us a lot of guidance on what teachers care when they're assessing the students. We also relied on our coworker's spouses who were working as a teacher. On the other hand, we completely lacked any user testing related to students' views. As we considered the teacher's view more important, we kept the student side design as minimal as possible.
In the beginning, there were challenges in the process of the work as well. Designers and Developers were not talking at all. The product manager was working as a middleman between designers and developers. There were no official design handoffs being made whenever the design was done. The designs were not properly annotated for developers to build without confusion. The Jarvis team seemed to be split in two and barely held together.
A lot of the communication problem has been solved while we were working on the Dynamic Assignment Creation feature, and started doing proper design - dev handoff meetings.
Cleaning up the design based on assignment creation and management made the whole project simpler, easier to understand how it works. The team focused on bringing a better system on how the product manager, the product designers, and developers could work in a 2 weeks sprint. The design system library was developed in Storybook, and the designs were more accessible than before with better contrast rate and colors. Although the project was shut down and never had the chance to see the light, it was an opportunity for me to learn how to fix up the existing problematic design and make it into a useful tool for the users.
