Uguru users could set up shops in-app and on the website to provide services in five different categories - Academic, Baking, Photography, Tech, and/or Household. Jeselle and I worked together to create profiles that were highly customizable and unique to each category while still keeping in line with the Uguru style.

As the product designer, Jeselle conducted research both in-app and from outside sources, and interviewed student entrepreneurs at UC Berkeley, Uguru’s first campus. She created user personas that served as the base for our "ideal" profiles - users that would benefit the most from using the Uguru app.

After feedback from me and other team members, Jeselle created wireframes and high-quality mockups for each profile. We also created the profile tiles and cardlets for each category. I took Jeselle’s mockups and worked with her to form cohesive styles and animation patterns that would be shared across the categories. I then coded each profile from scratch, using HTML5 and CSS animations.

• You can ace this class because I aced this class.

• Jeselle’s User Persona

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

• My Thought Process

  The academic user shop would be the most commonly used one since Uguru’s primary service is tutoring, so the styles from this profile would inform the other four category-specific profiles.

  While the cerise pink we chose was a good highlight color, it needed to be used sparingly - it’s too strong to use as a main background color. I switched the original cerise tones for more slate greys.

• Jeselle’s Mockup read her case study

  

• My Live Version preview live version

  

• Come check out my cute cakes!

• Jeselle’s User Persona

  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.

• My Thought Process

  The baking user shop benefited from the golden yellow accent, which softens and warms up the overall look of the profile, just like baked goods. I used the yellow accent more prominently than the other category colors for other profiles.

• Jeselle’s Mockup read her case study

  

• My Live Version preview live version

  

• My Thought Process

  The photography user shop needed neutral colors so that the primary focus - the photos - would pop more prominently. I isolated the photos from most instances of the green accent color to prevent distraction.

• Jeselle’s Mockup read her case study

  

• My Live Version preview live version

  

• I’m a wiz when it comes to tech, why not make some side cash?

• Jeselle’s User Persona

  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.

• My Thought Process

  The tech user shop has the darkest theme of all the profiles, so I had to make sure the colors didn’t blend in with each other at any point. The profile benefited from the more complex format for cardlets, which required additional time to layout because of the borders.

• Jeselle’s Mockup read her case study

  

• My Live Version preview live version

  

• My Thought Process

  The household user shop had a strong recurring bubble motif, which originally didn’t exist for the profile cardlets. I suggested adding them not only to match the profile tiles but to more visually distinguish them from the photography cardlets.

• Jeselle’s Mockup read her case study

  

• My Live Version preview live version