Mango Languages is a language learning application primarily found in schools and public library systems. My roles were to implement new features, update legacy designs, maintain the design system and work on larger scale future pipeline projects.
My primary focus was to build the front and back end client view of a project titled "Source Free Learning". Source Free Learning will focus on helping students (K-12) learn English without a "source language". There are far too many cases in the United States where students come to class and do not have the resources they need to understand the lesson their teacher presents.
We started with a discovery phase for the back end dashboard users. For this use case we had teachers, linguists, digital media asset managers and administration members. Through user interviews my team and I collected feedback to form our guide posts for the dashboard. Without our users' success the product end to end wont succeed. Through understanding their complex needs we simplified them into requirements and developed a user experience that would meet the needs of each individual team in a single platform.
We started with user flows for each teams needs and working to link those experiences together into a seamless user experience. From that user flow I began to create increasing fidelity wireframes.
Applying the design language in the context of such a large product helped evolve patterns and styles at a company-wide level — and has informed the design direction of similar elements, like cards and tables. In my opinion, this two-way relationship of consuming, modifying and updating pattern libraries when applied in context is the true key to success for any living, breathing design system. Working with such a fully-featured and established base presented an ideal opportunity to spend extra time on UX and micro-interactions, and less time worrying about colors or the design of components and elements.
As the majority of the visual styling decisions were already in place from the design system, I turned my attention to the interaction design — which involved prototyping… from scrolling interactions to focus states.
For the front end student facing application we wanted to focus on simplicity and ease of use. As our students are in the process of learning the English language we did not want to use English words where it was unnecessary. We focused on utilizing design elements like icons and color to direct the user to their next steps.
