Tuto
An online tutoring platform designed to easily connect learners
with the right tutors.
Context
Tuto is a fictional project designed to make finding tutoring simple
and less intimidating. The platform focuses on an accessible experience
and engaging in encouraging learning.
Tuto is a fictional project designed to make finding tutoring simple and less intimidating. The platform focuses on an accessible and engaging experience to encourage learning.
UX Design
Wireframes, prototype
and userflow
UI Design
inspiration search, colours and typography
User testing
Iterations and prototypes
My role
Typographic choice
After a typographic exploration, these fonts were selected
for their readability and their soft, organic shapes.
Figtree
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn
Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
123456789 !@/$%?&*
Inter
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn
Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
123456789 !@/$%?&*
Design objective:
Typographic choice
After a typographic exploration, these fonts were chosen for their legibility.
and their soft, organic shapes.
Figtree (Titles)
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj KkLl Mm Nn
Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
123456789
!@/$%?&*
Inter (Texts)
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj KkLl Mm Nn
Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
123456789
!@/$%?&*
Color palette
The color palette was chosen to create
a warm and reassuring atmosphere.
Faded Jade
HEX: 3D796F
Mango Orange
HEX: FF7A37
Timberwolf
HEX: DED6C8
Mango Orange
HEX: FF7A37
Faded Jade
HEX: 3D796F
Mango
HEX: FF7A37
Timberwolf
HEX: DED6C8
Système visuel
The move to high fidelity established the visual identity. Between WCAG standards and graphic hierarchy, I balanced rounded shapes and square structures to combine comfort and precision.
The move to high fidelity established the visual identity. Between WCAG standards and graphic hierarchy,
I balanced rounded shapes and square structures to combine comfort and precision.
The transition to high fidelity helped bring the project’s visual identity to life. By following WCAG standards, color and typography are used to structure and prioritize information, while the balance between rounded angles and square layouts ensures both visual comfort and rigor. Here are a few examples.
Color palette
Faded Jade
HEX: 3D796F
Mango
HEX: FF7A37
Timberwolf
HEX: DED6C8
The move to high fidelity established the visual identity. Between WCAG standards and graphic hierarchy,
I balanced rounded shapes and square structures to combine comfort and precision.
Sketches and ideas
At this stage, I was able to explore and visualize different concepts, evaluating which ones would best meet the project’s objectives.
The move to high fidelity established the visual identity. Between WCAG standards and graphic hierarchy, I balanced rounded shapes and square structures to combine comfort and precision.
At this stage, I was able to explore and visualize different concepts, evaluating which ones would best meet the project’s objectives.
Design system
The shift to high-fidelity design locked in the visual identity.
Balancing WCAG standards with visual hierarchy, I blended rounded forms
with angular structures to achieve both comfort and precision.
Design system
The design system ensures visual consistency and a cohesive user experience across the product.
The move to high fidelity established the visual identity. Between WCAG standards and graphic hierarchy, I balanced rounded shapes and square structures to combine comfort and precision.
Final product
This project was a balancing act.
between a rigorous visual identity
and a human and accessible interface.
The use of rounded components for
The interactive elements made the experience more intuitive, while retaining
the geometric structure of the logo.
Final product
This project was an exercise in balancing a rigorous visual identity
and a human and accessible interface. The use of rounded components
The interactive elements made the experience more intuitive, all
while retaining the geometric structure of the logo.
