Description
Edspresso is a web application aimed at solving the challenge faced by coffee shops in training their baristas on coffee brewing and menu creation. The application will provide informative and up-to-date courses, quizzes, and progress tracking to ensure baristas have a comprehensive understanding of coffee brewing. The goal of Edspresso is to provide an easy and efficient way for coffee shop owners to train their baristas and reduce the time and effort required to do so.
Background
Edspresso project is a project accomplished while studying at Langara College. The team was composed for 7 students, 3 designers and 4 developers. I was a full stack designer. As a full stack designer, I was in charge of creating wireframes, mockups, prototypes, UX researchs, and provide support to the development team as required.
Process
I helped the team define the project's scope and the features we were going to implement. After defining the project goals, I worked with the design team on UX researching, running interviews, user personas, paper prototypes, mind maps, questionnaires and supervised user testing. After that, I started to work on the wireframes and the mockups for the lesson execution, lesson creation and lesson questionnaire. I created the wireframes and mockups using Figma and Adobe XD. I helped the development team with the design implementation and provided support to the team as required.
Design Tools
Development Tools
Application architecture
Logo
Application icon, grid and favicon
Colour Pallete
Primary
Secondary
Accent
Neutral
Typography
We used Komet as primary typeface and Source Sans Pro as secondary typeface.
Iconography
We created our icons from scratch, aiming for readability.
UI components
We created all the components from scratch, following the material angular design system.
Wireframes
Mockups Desktop App
Mockups Mobile App
