Group.y App

Project Type: UI & UX Design - University Project

Date: 2022

Tools: Figma

Overview

Designed to combat overthinking and enhance productivity, Group.y is a groundbreaking app that brings together individuals struggling with studying and learning. By facilitating connections based on shared interests, Group.y creates a platform for users to discover relevant groups and communities. Whether seeking study partners or aiming to learn collaboratively. Group.y offers a supportive environment where challenges are conquered collectively.

Problem Space

In today's fast-paced and highly connected world, individuals often need help with overthinking, lack of focus, and low productivity, especially when studying or learning new things. The Group. y app recognises the need for individuals to connect with like-minded peers who share their struggles and goals, providing a platform that fosters group-based learning, support, and collaboration.

Process

Field Diary

At the beginning of the research, a field diary was documented for five days while using four different applications for the research. In the design of the Group.y app, similar apps were observed to identify their strengths and weaknesses, which will be highly beneficial for the future development of the Group.y app.

Comparative Analysis

Comparative analysis was employed as one of the research methods in this project. Feature comparisons were analysed among mobile applications that share a similar vision with the app that will be designed. This method greatly aided in sorting features suitable for application implementation and those that require further development.

Persona

Journey Map

Derived from the persona I crafted to portray the app's users that I am designing, a user journey map was subsequently created for a specific scenario. The user journey was segmented into several stages to shift attention towards potential pain points and opportunities that can be considered for the future design of the application.

Storyboards & Scenario

The user scenario was then developed, and a storyboard was created to visualise the user's experience from the beginning to the end of their journey in using the Group.y application.

Solution

Moodboards

These mood boards depict the aesthetics of the Group.y app design. I collected these images and decided to use purple as the primary colour because it provides a calming vibe that aligns with the Group's vision.y application. For the colour palette, I used variations of shades of purple as the primary colour palette to achieve consistency.

Task Flow

This task flow helps show the step-by-step journey a user takes within the app. The tasks are based on the previous scenario and persona. The main task for this flow is to join a study group, with steps from registering to joining a group.

Low Fidelity Prototype

Based on the research and design process, I have sorted out the features needed in this app for a specific task: joining a study group. I began designing its user interface with simple sketches on paper.

Mid Fidelity Prototype

I translated the design from paper to a digital prototype using Figma. I created a straightforward design and made it interactive to facilitate testing of the flow and user interactions. This process also helped me identify areas that could be improved or further developed for the next prototype.

High Fidelity Prototype

After ensuring that the mid-fidelity prototype had a suitable and logical flow for the user, I then elevated the prototype to high fidelity. Utilising components within Figma and appropriate and consistent icons create a neat and user-friendly design.

Wire Flow

With the high-fidelity prototype finish, I continue to make a wire flow that follows the task flow. This wire flow visualises the flow with the layout of screens and the connections between them. It shows the user's path as they interact with the app. It helps to understand the app's structure, interactions, and user navigation, aiding in developing a coherent and intuitive user experience.

Final Prototype (Figma)