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
As the in-house designer, I concepted, wireframed, designed high-quality mock-ups, and animated the experience from when the user logs into the web app to confirming their session with a “Guru”. Gurus perform tasks all over campus. They're typically tutors who meet at optimal times/locations for the student.
- 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
The styling for the profile derives from the Uguru brand guide. Each category profile is designed to highlight a brand personality based on previous user research, yet is based on foundational design elements.
-
-
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
To learn more on how to differentiate each category, I was tasked with interviewing student entrepreneurs at UC Berkeley. Berkeley is Uguru’s first campus, and students have been expanding. I reached out via e-mail to different sellers in the active Facebook group, Free or For Sale at UC Berkeley. I also looked at current Uguru seller account descriptions to find recurring themes in how they present themselves. From my my interviews and research, here are a few user personas that were created based on their motivations, pain points, and usage patterns.
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
Baker Persona: Come check out my cute cakes!
About
Jeremy is proud of his culinary work and needs an outlet to show it off. He looks up to famous bakers like Buddy Valastro and Christina Tosi. Currently, he uses Instagram to post pictures of his baked goods. He enjoys the positive feedback in the comments, but finds the platform difficult to field new customers.
Business isn't his strong suit. He's having a difficult time creating a pricing model by budgeting quality of ingredients versus shifting customer demand. He usually gets lucky by breaking even, but there have been occasions where he has lost money.
Wish
An interface that allows him to exhibit and sell his baked goods in one place. It can be customizable to follow the decoration standards he sets for his baked goods.
Skills
Tech Persona: I'm a wiz when it comes to tech,
why not make some side cash?
About
Greg is eager to turn a quick profit with his talent for repairing mobile devices. Yet, he's confident in his abilities to the point where he would take a lower session rate if a problem becomes an interesting challenge. He likes to "game" systems: once he squeezes the most money out of app service, he then moves on to the next best platform.
Greg would not consider himself a social butterfly. Where most people flock to social media, he prefers to spend his time online at HackerNews, Wired, and Reddit forums about tech. During his sessions, he's quick to solve any customer issues. The tricky part for him is describing in layman's terms the problem and the best fix.
Wish
He wants an app with limited barriers to the best features, maximimum access to clientele, and no fees. Bonus points if he can track patterns of his customer transactions.
Skills
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.
-
Photography
The Photography personality is artsy. Neutral colors drove the palette to highlight the guru's original photographs.
-
-
Academic
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.
-
-
Baking
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.
-
-
Household
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.
-
-
Tech
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.
