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!
The Problem
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
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
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
Silicon Valley Start-Up
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 –
Desktop Application –
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.
