UX/UI Design, Branding, Web, Desktop App

Gruepr

Overview

An open source application for placing students into optimal teams.

Trusted by 35+ top institutions worldwide, Gruepr is a desktop app created to help educators place students into optimal project teams. Gruepr mitigates the tedious process of accounting for students' individual schedules and past experiences into a intuitive and effective team formation process.

I participated in weekly design sprints to create a brand identity centered around the grouper fish and company values, redesign the UI/UX for a responsive marketing website and desktop app, all while keeping everything open-source and free.

Check out our Brand Book for a project overview!

Role

UX Designer

Timeline

4 months

Team

3 UX Designers

2 Software Engineers

1 Product Lead

The Problem

How can we increase customer adoption?

Making successful teams is difficult for teachers when there are so many factors that come into play: personal characteristics, schedules, skillsets, etc.
Background and Initial Research

Solidifying our understanding of Gruepr

To begin our research, we spent some time navigating the marketing website and desktop app to identify key features for different users: instructors, students, and our client.

  • Identifying pain points

  • Writing user stories to better understand use of application

As an instructor, I would like to group students based on availability, so that they can meet up and get work done.

As a professor who teaches different classes, I want to be able to create survey templates so that I can reuse certain questions and formats across my surveys.

As a busy college student, I would like to input my general availability into a form, so that I am put into a group with peers with similar schedules as to make coordination easier.

As a student new to a field, I would like my professor to put me into an appropriate group so that my peers mentor me.

Educators

User stories

Students

Our Findings and Answers to Client Challenges

  • The slow adoption can be attributed to the application lacking ease of use

  • UI is clunky and body copy is hard to understand

  • Desktop app provides users with too many options: overwhelming!

  • Information architecture is misleading and hard to navigate

  • Application lacks a cohesive brand design

Desktop App Before

Form Teams

Make Survey

Startup Modal

Loading Modal

Marketing Website Before

Brainstorming

Defining the Solution

  • The slow adoption can be attributed to the application lacking ease of use

  • UI is clunky and body copy is hard to understand

  • Desktop app provides users with too many options: overwhelming!

  • Information architecture is misleading and hard to navigate

  • Application lacks a cohesive brand design

Marketing website: we consolidated the 6 tab navigation bar into 3 tabs (home, how to use, and legal) to reduce overwhelming the user's flow through the website.  

Desktop app: we separated the make survey and form teams sections into 2 distinct experiences. 

After settling on a new IA structure, our project lead led us through a 2 minute sprint: a group sketch exercise in which we ​sketched ideas for as many screens as possible. After discussing and evaluating our ideas, we concluded that the new wireframes should break the form teams experience into different boxed sections as to create a cohesive and intuitive flow for the user. 

Sketching and Wireframing

After further discussion, ideation, and refinement of our ideas, we began to translate our sketches into wireframes on Figma. Over the span of two weeks, we worked cross functionally with our client and developers to ensure our layouts were functional and feasible to build.

Once completed, we used the finalized wireframes as a framework during our design stage. Having already established the layout and IA of the applications, we began to incorporate brand identity and aesthetic elements to our wireframes.

Designing the Brand

Brand Tone and Personality

In order to establish a brand identity, our team conducted a multitude of branding exercises to solidify the main themes and goal of the product that the client wanted to portray. We began with an elevator pitch exercise to ensure our understanding of Gruepr was on the same page as the client's vision.
We established the tone and specific traits of the brand, and then moved on to mood board creation. Building off of the prior themes, the designers researched examples of web applications with elements and concepts to represent how we envisioned gruepr's aesthetic. We synthesized our mood boards into 2 final boards that we presented to our client. Between the fun and playful board and the tech-y start-up one, our client decided he wanted a mixture of both. With this feedback in mind, we began to work on our style tiles. 
  1. Fun and Playful

Client Liked:

  • Brighter colors

  • Informal tone

  • Illustrated graphics / emojis

  • More playful type/icons

  1. Silicon Valley Start-Up

Client Liked:

  • More tech-y look and feel

  • Informal tone and voice

  • Limited color palette

  • Bolder type/icons

We worked on combining the approachable tone of the first board with the clean refined feel of the second board when formatting our style tiles. Building off the aesthetics of the mood boards, we created style tiles to reflect purposeful layouts, design elements, typography, and colors. 
After much iteration and client discussion, we finalized our brand direction to include bold blue and yellow hues, abstract fish-shaped elements, and bold sans-serif fonts to represent gruepr's underwater theme and collaborative spirit. 

Logo Iteration

Once downloading the gruepr desktop app, users were initially greeted with a large image of a grouper fish. In attempts to stay on brand, but incorporate the brand identity we had established, we participated in design sprints to ideate and sketch out possible gruepr logos. We then transferred these ideas into Figma to design a variety of logos that embodied the grouping of fish and diverse team themes. 

The Final Logo

The final logo depicts a pair of abstract sharp-pointed fish. The fish motif represents teamwork and collaboration, and the difference in size emphasizes the Gruepr embodiment of diversity and how it contributes to team formation.  

Design System

A Modern and Tech-y Design System

Our final step was to use our new branding guide to translate our wireframes into high fidelity mockups. The hi-fis served to represent a realistic depiction of what the final marketing site and desktop app would look like. We embarked on weekly design sprints, dedicating each week to a different aspect of the experience. We completely redid the marketing site by incorporating our new design elements to improve visual appeal and better communicate the value proposition of gruepr. For the desktop app, we rearranged the make survey and form teams experiences into smaller sections and also incorporated our brand color and illustrative elements. 

Final Designs

High-Fidelity Mock-Ups

Our final step was to use our new branding guide to translate our wireframes into high fidelity mockups. The hi-fis served to represent a realistic depiction of what the final marketing site and desktop app would look like. We embarked on weekly design sprints, dedicating each week to a different aspect of the experience. We completely redid the marketing site by incorporating our new design elements to improve visual appeal and better communicate the value proposition of gruepr. For the desktop app, we rearranged the make survey and form teams experiences into smaller sections and also incorporated our brand color and illustrative elements. 

Marketing Website –

Landing page

Download and Installation

Frequently Asked Questions

About Us

Privacy Policy

Desktop Application –

01

Make Survey

Create a survey with options to collect demographic and personal data from respondees.

02

Add MC Questions

Select the types of questions and responses you want to include in your survey.

03

Schedule

Scheduling questions optimize group formation by pairing teammates with compatible availabilities.

04

Course Info &
Group Preferences

Choose course section and identify classmates you prefer to work with or to avoid.

Responsive Design

Mobile Mock-Ups

Landing Page

FAQs

With responsiveness as a priority, we adapted our web prototypes to adhere to mobile screens for greater user accessibility and convenience of use.

Learnings

Reflection & Learnings

This project was one of my first experiences working with a client to create an end-to-end product, allowing me to grow in my ability to design for business impact and results, rather than just pure aesthetics. I learned how to defend and explain my design decisions, while still staying true to our client's vision and target user needs. Working with a small team of designers allowed me to leverage my own design style and skills in synergy with the unique design perspectives my teammates brought to the project.

Next Project

I'm so happy you're here!

© Autumn Fung 2024

Made with love and fueled by many boba/matcha runs 🧋🍵.