Connecting students to drive collaboration & support

The student community hub roots, a responsive web appFilling a gap in women’s wellbeing

Sector: EdTech, B2C

Challenge: Help students to connect so that they can progress faster in their course.

My Role: Ideation, Information Architecture, Visual Design, Branding

Team: Mentor

Client: CareerFoundry UX Design Programme

Tools & Skills:  Pen & Paper, Figma, Figjam, Brainstorming, Problem-Solving, UI Design, Responsive Design

The problem

Some people choose to study alongside their jobs while also needing to take care of their daily lives. Having little time makes it hard for them to work with other students, get feedback on their assignments and find relevant information.

While the research for this project had already been done, the insights were yet to be translated into ideas and designs.

My solution

I applied the design thinking methodology's define, ideate and prototype phases for two months. I designed a high-fidelity mobile prototype and responsive designs of my app that help students connect and collaborate.

Responsive designs of the home screen of Roots

The team and my role

I analysed the research, created and designed the project and received feedback from my mentor.

Dissecting research insights

This project provided a detailed brief with research findings. So, I started by analysing the brief to understand the business requirements, insights and target audience. 

Meet Alex, who has little time and is anxious to finish his course. He needs a way to stay motivated and get support.

I learned that people like Alex had four main goals:

#1

find study materials

#2

get advice from peers

#4

collaborate with like-minded students

#3

receive peer feedback

Aligning my ideas with the user goals

After digesting the information, I started generating ideas by brain-dumping them into a notepad. Once I wrote everything that came to mind, I mapped my ideas to the main goals. 

These are the key features and what they entail:

Home 

  • Keep track with exam tracker to be aware of due dates

  • Stay motivated with study tips and motivational content

  • Notifications of messages etc.

Feedback

  • Module where people post assignments for review

  • Split into my assignments / review others

  • Feedback can be requested written, audio, video for different learning styles

Collaborate

  • Messenger to write individual students or groups

  • Set up virtual study events

  • Create study groups with peers

  • Filter by course, location etc to find fellow students

Community

  • People can share content / thoughts through posts

  • Label with tags

  • Users can filter by tags / categories

Creating the framework

With these ideas in mind, I thought about how Alex would move through these features and created user flows. Outlining his actions helped me to uncover all the essentials needed for each feature.

Flow #1 - Feedback

Goal
Request feedback from peers

User Story
As a frequent user, I want to get peer feedback on my assignments, so that I can improve my classwork before submitting it to the instructor.

Task Analysis
Entry Point: Reminder
Success Criteria: Send feedback

  1. View Reminder

  2. Find a way to request peer feedback

  3. Upload assignment and select peers

  4. Send feedback

Getting [too] stuck in the details

With my structure in place, I started with pen and paper to visualise my ideas. Together with my mentor, I kept iterating and refining my ideas, and she gave me invaluable feedback that informed my mid-fidelity wireframes.

Wireframe evolution of home screen

Rough sketch including course time lines and study tips

Low-fidelity wireframe with added shortcuts that user can edit to access the functions most important to user

Simple mid-fidelity wireframe visualising the time lines in a progress bar

Defining design patterns, adding details and applying font choice.

At some point, I started to get caught up in details in the mid-fidelity design phase. As there were so many rounds of updates, I began to get overwhelmed by the amount of screens I had to iterate and the little time I had to finish the project.

➔ I took a step back and a little break. I discussed my designs and ideas with my UX mentor, which helped me to refocus on the MVP's essentials.

Going green

Once I was happy with the content, hierarchies, spacing, and design patterns, I started to think about the app's visual design. The brief clearly stated that the app should be friendly, welcoming, reassuring, and use green. To get inspired, I created a mood board. 

The tones of green have a calming effect; paired with yellow and lighter colours, it is warm and friendly. The app should not be another stressor but a support system.

Surprisingly, I found it challenging to pair green with other colours. Eventually, I found a solution and created a style guide including all visual design elements.

Designing for all devices

Since this project required responsiveness, I also created desktop and tablet designs. Considering what elements I could add to the larger screens that benefit Alex was fascinating.

So, I added prompts to the home screen to improve Alex's study efficiency, suggesting actions such as scheduling study events and practising flashcards. The goal is to reduce cognitive load and enhance efficiency.

Home screen on Desktop

Home screen on Tablet

Home screen on Mobile

Spotlight on the Feedback Feature

For the Feedback feature, I created multiple options for users to request and receive feedback, including writing, recording audio or video messages, and uploading pre-recorded files. Users can attach relevant files and links to provide a comprehensive feedback request, choose specific reviewers or opt for a random selection.

➔ This multifaceted approach recognises that students have diverse needs and learning styles.

Feedback main screen, where user can start a new request and view received feedback.

Feedback Preferences, where user can select how to ask for feedback.

First step, uploading the file they’d like to get feedback on

Step 3-5, attaching links, specific questions they want to ask and preferences how they want to receive the feedback.

Last step, selecting the peers they want to ask for feedback.

The final result was a high-fidelity prototype for mobile and designs across mobile, tablet and desktop.

Main challenge and lesson learnt

It was a good reminder of how easy it is to get too detailed too early in the design process and that it's worth taking a step back and recalibrating what's essential for an MVP.

While I working on this project as a One-person team, I am aware, that at times it is not possible to do extensive testing due to time or budget restrictions.

Next Steps

I plan to conduct further user testing with my high-fidelity designs and iterate my designs based on their feedback.

In the long run, I would look at sign-ups, retention rates and conversion metrics after developing and shipping the app.

Uncovering surprising insights and revamping a troubleshooting tool

This content is protected

Want to work with me?

⁓

Want to work with me? ⁓

Let’s connect!