Menu

Guru Profiles

The fluid marketplace.


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.

  • Photography
  • Academic
  • Baking
  • Household
  • Tech



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


Tech
Social
Business

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
Social
Business

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


Tech
Social
Business



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.


  • Pellentesque ornare sem lacinia quam venenatis vestibulum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    Formal Events

    $25+/hr
  • Urban Symmetry

    09/23/2016


  • 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.


  • $10/hr

    Chem 133

    Organic Chemistry

  • Everything You Need to Know About Gases

    09/18/2015


  • 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.


  • Peach Pancakes

    $10.50
  • 100 Muffins in 100 Minutes

    12/25/2016


  • 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.


  • Shiny Floors

    $10/hr
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • How to Make Your Plants Live Longer

    03/19/2017


  • 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.


  • $12/hr

    Mobile Water Damage

  • Best Apps of 2016

    12/28/2016



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.