Introduction
Overview
Aruma is a digital platform for teachers. It offers the possibility of purchasing courses and other pedagogical materials produced by other educators.
Objective
The goal was to create a proposal for an online course application and develop my skills as a UI Designer.
Tools & Process
Following some user stories provided by CareerFoundry, I created a user flow, wireframes (Low-, Mid- and Hi-Fidelity), mockups, and brand guidelines for the app. I used Sketch, Miro, Adobe Illustrator, InDesign, and Photoshop as tools.
User Flow
The goal of this task was to create an application for an online store. Breaking away from the traditional store concept, I decided to devise a platform for courses – in this case, specifically for educators. The first step was to create a user flow for my Minimum Viable Product (MVP).
Wireframes
Low-Fidelity
Once you have a clearer vision of the product, it is time to put the idea down on paper and draft the interface.
Mid-Fidelity
From paper to computer: at this point, the biggest concern is the arrangement of the elements on the screen.
Hi-Fidelity
Finally, it is time to apply colors, typography, and images. After some user feedback, I made some changes, such as the position of the price on the course screen and the arrangement of the options on the search screen – from a dropdown menu to a grid of buttons.
Responsive Design
Branding
Values
Excellence | Knowledge | Collaboration | Ethics & Trustworthiness | Engagement
Origin Of The Name
Aruma is a plant found in Brazil, initially cultivated by native peoples who used its leaves for making baskets - very convenient for carrying objects and storing food. The word - in Portuguese spelled arumã - comes from Tupi, the language spoken by the indigenous Tupi people in northern Brazil.
The word Aruma was chosen because it represents the idea of weaving, in which loose threads gain meaning by being intertwined and forming objects of resistance and great beauty.
That is also the idea of an application that offers content for teachers made by teachers. The relationships between the people in this community gain strength through the content they produce themselves, giving them support and inspiration.
Logo
The logo shows the idea of weaving and intertwining. The letter A formed by the straw design refers to the brand and relates to education and high-quality standards (grade A).
Colors
The palette brings a composition of sober and elegant colors with a hint of perkiness.
Typography
For the typography, we have IvyPresto Bold - mostly headlines - and Rival Sans Light - copy. IvyPresto’s high degree of contrast between thick and thin strokes adds elegance and refinement, while Rival Sans gives the design a modern and dynamic touch.
Photography
The photos should feature teachers in the school environment, preferably in the company of students or other teaching staff. They should also contemplate the new reality in times of pandemics, i.e., online classes.
Writing Style
Despite being a product for teachers, the language of the application‘s texts should avoid a solemn and academic tone. It should not abuse informality as well but rather bring the lightness of a conversation among peers. It should show knowledge and professionalism without resorting to jargon.
Final Thoughts
Doing this job was very gratifying, mainly because I could design something within the field of education I have worked in before. Below are the more challenging aspects of the process and, in counterpoint, the more delightful.
Challenging
This project did not have user research as its scope. Working without feedback from the target audience makes the designer rely predominantly on prior knowledge and intuition, which is not ideal for any UI project.
Delightful
Create wireframes and follow their gradual evolution after careful study to choose the typography, the color palette, and the imagery.