Guru Profiles
The fluid marketplace.
-
Role
- Graphic Designer
- Product Designer
- Photo Assets Manager
- User Research
Team
- Gabrielle Wee: UI Developer
- Jason Huang: QA Engineer
- Samir Makhani: Developer and Founder
-
Tools
- Sketch
- Adobe Illustrator CC
- Zeplin
- Atom
Deliverables
Designed a customizable shop interface for the five different seller categories for this marketplace app that felt modern and young. This includes creating samples of the “ideal” profiles for each category personality to onboard sellers.
Uguru started out of UC Berkeley where most tutor-student transactions were through their app, where customer growth came primarily out of word of mouth or social media. When I was hired, they were building their user interactions to be completely in-app: students could look for their tutors in one place, tutors could market their specific services in a dynamic fashion.
Profile Preview
Click any of the the category icons below to experience the final live prototypes. You can also skip ahead to view more about the profiles and play with the tile animations.
Existing Framework & Planning
-
Home Dashboard
-
Category Menu
-
Guru Pairing
-
Guru Profile
-
Session Request
-
Confirmation
In this case study, I will be highlighting the guru profile flow at the center of the user story. I needed to create an interface that was customizable, but also cohesive the interaction across the app.
There are five category profiles: Academic, Baking, Photography, Tech and Household.
- Home Dashboard
- Category Menu
- Guru Pairing
- Guru Profile
- Session Request
- Confirmation
In this case study, I will be highlighting the guru profile flow at the center of the user story. I needed to create an interface that was customizable, but also cohesive the interaction across the app.
There are five category profiles: Academic, Baking, Photography, Tech and Household.
Style Guide
-
-
Typography
The “Source Sans Pro” font family is represented with weights varying from Semibold to Black.
-
-
Academic
-
Baking
-
Photography
-
Tech
-
Household
-
-
Color Scheme
These are the accent colors in Uguru’s style guide, chosen to fit a flat-design aesthetic. Each category’s color palette derives from one of these colors.
Internal Guide
A sample of the internal branding guidelines for designer use, featuring many of the graphic elements I illustrated.
User Personas
A composite of e-mail interviews, first-hand research, and user behavior with students from UC Berkeley. Internally, I wrote user personas for each type of profile.
Academic Persona: You can ace this class because I aced this class.
About
On a typical school day, you can catch Kelly at the library or computer lab. She likes to get the most out of her school resources. If you look over her should in class, she has flawless notes. She enjoys tutoring because it is another way to master the subjects in her major.
Kelly's biggest challenge is managing her packed schedule. She likes to be involved in her school, organizations, and stay on top of her assignments. If her schedule becomes too hectic, tutoring becomes less prioritized. Her biggest annoyance are students who only seek solutions but not to learn how to solve the problem.
Wish
An easy way to integrate her tutoring sessions to her Google Calendar.
Skills
Working in Sketch
Guru Profiles
These were the final mockups for the profiles. Many of the visual assets made it into the live profile, coded by Gabrielle Wee. Additionally, I planned and coded the animations for each profile. You can see them in action when you press the play button next to the category tile.
-
The Photography personality is artsy. Neutral colors drove the palette to highlight the guru's original photographs.
-
-
This guru has the highest demand. I was inspired by textbook designs, think 90s Scholastic or McGraw-Hill, with the rectangular motif. The live component (seen below) was changed from a darkened cerise to a contrasting gray to highlight the entering animation effect.
-
-
Rounded edges, bold stroke-widths, heavy font-weight. I wanted the components to have a sense of softness that coincides with the soft, doughiness of the Baking Guru's baked goods services.
-
-
Suds was the name of the game when creating these tiles, which are cartoonishly framed within bubbles. Originally, the Household tiles looked too similar to the Photography tiles because of the white border. My solution was to take Household in a more soothing, friendly direction.
-
-
For these tiles, particularly the cardlet, I wanted to bring a wired theme using drawn-in borders as well as an electric feeling animation for the date.
-
Conclusion
The desktop profiles are the project that I am the most proud of from my time at Uguru. User research, interface planning with the developers, and designing assets for animation culminated in a keystone experience within the overall Uguru framework. The category-based assets challenged and elevated the Uguru style guide. This informed the direction for designing the rest of the workflow, as well as extending the profile interface to be responsive for mobile and tablet.
