Product Designer + Manager

Earnster

 

EARNSTER

Earnster was in it's very early stages when I joined the team. The app's goal was to create a marketplace for kids where they could "earn" toys and clothing by completing household chores.  Some initial documentation existed; mainly wireframes and some flowcharts and personas. My job was to take these pieces and design a product.  

 
 

Existing workflow. 

PROBLEM

Initially, the company needed a high-fidelity prototype - and fast. However, to get to the prototype stage, the product needed a lot more definition. Existing documentation needed assessing and further documentation needed to be created. Since I joined so early in the product's development cycle, the vast majority of the product specifications and direction still needed to be fleshed out. 

So I immediately got to work. 
 

Process

The first thing I jumped into was the information architecture. I asked the following questions:

  • What are the app's primary workflows?
  • Where during the user journey are each of these workflows encountered?
  • Does the content on the screen match the workflow stage?
  • Is the app organized in a usable fashion?

To find answers, I took at look at existing workflows and compared them to what was documented of the app's architecture. Started creating user journeys for both parent and child. Surveyed each screen and determined the primary call to action, then began simplify the desired user behavior of each screen, and ensured that, added up, this behavior made a cohesive workflow. 

Then, I began refining the app's user personas and conducted some user research. Returned to the workflows and compared them to the audience. Brainstormed on what changes could be made make the app better suited to our targeted demographic. Since teens and tweens are digital natives, they are acutely attuned to bad mobile usability, so I wanted to be as clean and focused with the UX as possible. 

 

Updated in-app workflows.

 

Updated wireframes leading to UI design. 

Solution

The first solution was to define the product. This involved:

  • Clarifying and simplifying 2 major workflows
  • Adding an additional user persona (the "adult" or parent, who pays for products)
  • Removing some proposed features
  • Creating a list of screens and identifying content and desired user behavior for each

The second solution was to start visually designing the product. This involved:

  • Redoing the wireframes
  • Creating a style guide for the app that included color palette, typography, and a logo
  • Building out the UI from the wireframes

Lastly, I was able to whip together a prototype. After a couple iterations, the prototype was perfected and handed off so the development team could begin building. 

Takeaways

I learned a lot from this process, all the way from the early stages, right up to the app's deployment. 

  • Navigation is key - without a solid, easy to use navigation and search, any app will fail. 
  • Since screens are small, there isn't enough room for multiple workflows on one screen. CTA per screen must be clear and focused, and easy to engage with. 
  • Mobile users (especially teenagers!) have VERY short attention spans - you need to cover every point along the user journey. If they reach a state you haven't designed for, you'll lose them. 
  • Using clearly understood icons goes a long way towards improving usability.
  • Emojis are an awesome addition to the user experience - bring play and fun back into any UI!
  • User test, user test, user test!

 

 

Constructing the screen flow for the user dashboard. 

Lessons learned

The only way to truly fail is to never learn from one's mistakes. As such, looking back on the project, I'd do a few things differently or advocate harder for certain decisions.

  • Shopping cart placement - maybe should have been the central icon in bottom nav bar, but principle expressed it was more important to keep the user shopping than to close a deal, the icon was placed accordingly. 
  • Using logo as home button - I made this mistake on my own, not remembering that it isn't intuitive for users.
  • Copy errors - using technical phrases instead of young, fun terminology.
  • Onboarding - I should have added it to the initial sign up process.