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
Fun and Playful
Client Liked:
Brighter colors
Informal tone
Illustrated graphics / emojis
More playful type/icons
Silicon Valley Start-Up
Client Liked:
More tech-y look and feel
Informal tone and voice
Limited color palette
Bolder type/icons
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
