top of page
Thriving App
ROLE
UI Designer
For this UI Design project I designed a student-focused app to tackle challenges like time management, resource access, and peer collaboration. Through interviews and surveys, I uncovered key pain points and created user personas that shaped every design decision. The result is a research-driven platform where students can access resources, connect with peers, and enhance their learning experience through collaboration and organization.
COMPANY
Career Foundry
10 Weeks (Part-time Project)
TIME FRAME
-
Increase daily active users
-
-
Problem
Students often face challenges with time management, accessing relevant resources, efficient study practices, and peer collaboration.
A platform where students can conveniently access relevant resources, engage with a supportive community, and enrich their academic journey through collaborative learning and knowledge sharing, enhancing their educational experience.
Goals & Solution
"“Having a network of fellow students is the best way to stay motivated while studying”"
" I want a tool to keep me motivated and support my development as a student and beyond."
User Persona
Meet Alex, a 33-year-old student on a quest for knowledge and career advancement. Currently pursuing a Bachelor's degree in History, Alex also manages a retail store part-time. Passionate about his subject, he aims to complete his online course efficiently while acquiring valuable skills to excel in the job market.
To achieve his goals, Alex is eager to discover relevant study materials that will help him conquer the more complex aspects of his course. He seeks advice from fellow students to optimize his study routine and welcomes constructive feedback on his work.
Collaborating with like-minded peers is an essential aspiration for Alex, as he believes teamwork will play a pivotal role in his personal and professional development.
User Flows
To design a clear path for app users to accomplish tasks efficiently I created a user flow. I prioritized their needs and pain points, resulting in an intuitive and satisfying experience that drives engagement and success, informed by the following tasks:
" I want to connect with like-minded students to share my work and collaborate."
“I love the idea of having the right support at the right time for my course, such as study materials and advice. I think teamwork will be key to my professional development, so I’d like to find like-minded students to collaborate on projects.”
" I want to find supporting materials to help me master the more complex subjects in my course"
Wireframes
To efficiently visualize and refine the platform's design before moving on to higher-fidelity prototypes, I designed low-fidelity wireframes that served as the foundational blueprint for the mobile interface, outlining the placement of key elements and functionalities. introduced more detail and visual representation, incorporating basic colors and styling while maintaining a focus on functionality and layout.
Moodboard
Serving as a visual inspiration and reference for the platform’s overall look and feel, through a careful curation of images, colors, typography, and visual elements inspired by Bauhaus I created a moodboard with geometrical, vibrant, and abstract styles that have a visually appealing and engaging quality, capturing the attention of users.
Style Guide
Colour palettes
Typography
Iconography & logo
Icons must be black, except for the notification and online/offline status icons. Corners are rounded with a radius of 2 pixels, except when it compromises the shape of the icon. In such cases, corners can be rounded at 1 pixel or, if necessary, maintain sharp corners. Icons must not be filled and should be outlined with a stroke thickness of 2.
Angles within the icons should be at 45%. The icons should be sized at 24 pixels. Each icon should have a padding of 2 pixels around its edges.
Exceptions: Selected stars and camera icon are filled, never outlined.
Large logo to be used on the mobile Log in screen always with a white background. Header logos follow our colour palette and must be used according to the screen background colour.
UI elements
Imagery
Inappropriate
Classroom cards with busy or complex imagery must be avoided, the colour must fall within the colour pallet. Imagery must not contain text or more than one decorative icon that is in line with the brutalist aesthetic.
Social cards with busy or complex imagery must be avoided, and the colour must fall within the colour pallet. Imagery must not contain text or more than one decorative icon that is in line with the brutalist aesthetic.
Books/articles cards’ decorative icons must not have a different colour than the card, it must be a lighter colour than the one in the card. It should not be multi-coloured or have only black lines. It must be a shape in light with brutalist aesthetics.
The Classroom cards with bold block colours, decorative minimalistic icons around a central black icon. The central black icon indicates in a clear way the theme of each card according to the classroom.
Books/articles cards. Cards with block colour, a decorative minimalistic icon around the central black bold title that identifies the book or article.
Social circles cards. Cards with fluid shapes, bold and energetic colours, accompanied by the title aligned to the right with bold black typography that stands out.
Appropriate
High-fidelity wireframes
Mockups and different breakpoints
Takeaways
Throughout this project I have gained invaluable design skills, both in theory and through hands-on work, particularly focusing on Figma tools, best practises and responsive design. It also taught me the importance of understanding when it is necessary to abandon an idea that doesn't work. Embracing this mindset allowed me to iterate and refine the design until arriving at solutions that truly enhance the user experience.
This project has provided me with the perfect opportunity to grow as a designer and has instilled in me a passion for creating exceptional user experiences.
bottom of page