Flock is a responsive web app designed to connect students from all backgrounds who share the same career interests.
It is a social platform that gives students— in a traditional education setting or not —a supportive place to exchange ideas, team up on projects, and help each other grow into the professionals they aspire to become.
This case study is a student project for the CareerFoundry UX/UI bootcamp that focuses on a user-centered approach to design.
Role
UI Designer
Tools
Figma, paper & pen.
Timeline
October - November 2025
Objective
Modern life can be quite isolating, and even more so when one is working and studying simultaneously.
Thats where Flock comes in.
Flock offers a space for students to find that community. It opens the door for connection, community and collaboration regardless of an individual's background or study path, allowing for fresh perspectives and more well-rounded learning.
For many students, having a community of like-minded individuals to turn to for advice or share experiences/insights with boosts enthusiasm and motivation while learning.
My Process
I started out by first understanding my target user and their experiences. I was able to then conduct some further research into social platforms that potentially offer a similar solution or have solutions that may help Flock to feel more natural to use.
Since this is a responsive web app, I began with a mobile-first approach to prioritise progressive enhancement and ensure the core UI functionality needed for users to complete their tasks were designed first. From that foundation, I expanded and refined the interface for larger breakpoints.
WHO we are designing for
User Flow
I created a user flow for the main features to better help me identify what steps are needed for users, like Alex, to accomplish tasks on the platform.
This helped me better understand and simplify the steps a user would take and give me a starting point for designing the UI.
Wireframes
Low Fidelity
With the user flow mapped out, I began with sketching wireframes to explore ideas and layout possibilities. I could start to create the UI for the foundational features in the web app.
The main screens involved the flow for logging in or signing up and creating a new account, searching for students to connect with and messaging those connected students.
Login / Sign Up Flow
This flow addresses the the diverged path of new users vs existing users.
A user can simply log in and head to the dashboard, where new users can sign up and complete the profile setup before landing on the dashboard.
Search For Friends Flow
This short flow answers the need for how the user might find other students/friends to connect with on the web app.
This simple two step process helps reduce the friction of finding and connecting with other students.
Message Friends Flow
These wireframes display the flow for how a new user would start their first conversation with a recent connection they made.
I kept in line with common UI patterns to ensure the messenger would feel easy and familiar for the user.
Mid-fidelity Wireframes to High-fidelity Mockups
Once I had the core features and functionality sketched out, I began working on mid-fidelity and high-fidelity iterations. Though every minor iteration won’t be shown here, you can still see the evolution of the UI and the way Flock was brought to life.
This was the process of refining the UI, enhancing the visual hierarchy and developing the brand’s visual identity.
Flock's Visual Identity
Mood Board
When establishing the visual identity of Flock, I started with a mood board. I was inspired by birds to "Flock Together" and naturally, the most universally identifiable bird is a pigeon. This mood board informed all the aesthetic-related decisions for the UI and branding, and kept the core values of the project in mind.
The use of the mood board was to give an aesthetic and emotional tone to keep referring to throughout the development of the visual identity of Flock. The mood board emphasises community, connection and inspiration. It further reinforces the atmosphere of fun, which fosters a positive experience for students.
Style Guide
Through the development of Flock's visual identity, I made sure to keep aligning the design decisions with accessibility guidelines to ensure that the platform would be useful and usable by anyone - reinforcing the idea of community through inclusivity.
An example of the decision I made can be seen in the chosen colour palette. My original mood board included bright colours that didn't offer enough conrast for usability.
When working on the colour palettes, I ended up with a periwinkle alternative that was still inspired by the mood board but made the web app more accessible to users.
I developed a detailed style guide for Flock to ensure that the UI is consistent at every breakpoint.
Responsive Design
I designed key screens for the larger breakpoints to be fully responsive so that the platform would work seamlessly across mobile, tablet and desktop. This displays how the layout and UI would respond at different breakpoints.
This flexibility enables users to access the platform no matter where they are or what they might be doing.
To the right, you can look around the screens.
Or
Open the Figma workfile.
Reflections and What I Learnt
This case study deepened my understanding of UI design, specifically pertaining to typography decisions and use of mood boards.
I learnt a lot about how to balance accessibility and still having a 'fun UI'. I feel more confident when using UI patterns and my understanding of them. ie, it might work the same but can still have their own flare and thus be both unique and familiar.
I have also become more comfortable with an iterative design process. Throughout the entire project, I was constantly being met with potential friction points that needed adjusting to ensure an intuitive and enjoyable experience for users.
As this is a student project with CareerFoundry, I found the guidance and feedback of my mentor vital in my growth as a designer.
Comparing it to my first student project with CareerFoundry, the growth and evolution of my design skills and understanding of UX is evident.