Establish the design of an educational service intended for school students
Start from scratch and craft the platform's look and feel by designing both the UI and UX
Design system
Pages layout (mobile, tablet and desktop)
Emphasis on user experience quality and atomic design
Luciano wanted to create an educational app that collects experiences for students
No prior design or resources were available besides the client's requirements
💅 branding
✏️ wireframing
🪄 design system creation
✨ UI layouts
The client provided me with specific requirements about the look-and-feel of the platform:
<aside> 🗣️ I want it colourful, with interesting fonts and custom illustrations!
</aside>
The client wanted all screens designed in the mobile, tablet and desktop breakpoints.
This project was intimidating at first, but by using an atomic design approach and implementing a design system from the outset, I was able to ensure consistency and scalability.
Typography section from the design system
I began by selecting the fonts, colours, and general grid specifications for the product. I progressed from designing the simplest items to more complex ones, incorporating all into the design system. Subsequently, I combined these elements into page layouts.
I also created custom illustrations!
The client and I engaged in continuous feedback loops to ensure the product always aligned with his vision.
Home page
Modal
Product page
Edit mode
One page in the three breakpoints