Sketching & Wireframing

After identifying our primary use-cases, we began ideating on our design opportunities.  Sketching our ideas, we found our main challenge was to to maintain simplicity and cleanliness in our design, but also provide access to features from the screens they pertained to.  A card sort helped us structure our app in a way that made sense to users.  The scope of the app, however, was still large.

my role

My teammate and I ideated based on the design opportunities from our research.  I started with pen and paper sketches, eventually moving to higher fidelity mockups using Sketch, which we then put into a clickable prototype.

THE Tools

  • Lo-fi pen and paper sketches
  • Mid-fi sketches in Sketch App
  • Hi-Fi Mockups into prototypes  

Key Takeaways

  • Consistency with Amazon style guide proved key to user comprehension: reducing UI clutter helped focus on content.
  • It was obvious users could switch between main functions of the app: placed all main functions in tab bar with only one side nav needed (group page).  This let the content take center stage.
  • Separating main actions into tabs allowed for clearer understanding of the apps capabilities, as it didn't blur the tasks together.  Users could use one or all tasks independently.
 
 

User Flows

User flow for making a note

User flow for making a note

 
 
User flow for entering a group

User flow for entering a group

 

Low Fidelity WIREFRAMES WIth Annotations

High Fidelity Mockups after Testing and Feedback