UI Case Study
Time: 4 weeks
Rol: UI Designer
Tools: Figma-Figjam, Illustrator and Photoshop
Framework: Scrum
About
Design Process
Protopersonas
We have identified two profiles of people who could be the main users of TechLearn. On the one hand, professionals who seek to update and expand their knowledge, and on the other hand, engineering and design students who are about to finish their studies and prepare to enter the job market.
Benchmark
Five brands that offer technology and design courses were analyzed. The objective of the benchmark is to analyze how different companies have solved the e-learning interface in software development and design.
Benchmark Report
Information Architecture
Information architecture only includes the necessary information for a user-student.
User Flow
The user flow shows the path that the user-student takes to view the course offerings, which consists of: entering the page, creating an account, and adding courses to their dashboard.
Wireframing
Design systems foundations
From the beginning of the project, the technical foundations of a DS are established to provide consistency, flexibility, and agility in the construction and maintenance of the digital product. The system’s foundation is established with components, color, grid, spacing and typography, always keeping accessibility and usability at the center of the decisions.
The design system is based on Brad Frost’s Atomic Design methodology: Atom, Molecule, and Organism.
High-fidelity prototype
The TechLearn website is a project that I focused on working in an organized manner, trying to control and plan the workflow for the present and the future. I am happy with the result because I feel that good UI practices result in an aesthetic, functional, and scalable digital.
