Sketching & Wireframing  

my role

  • Converted feedback themes into IA & UI 
  • Designed all screens for MVP task flows
  • Collaborated daily with other stakeholders to adjust design according to business goals, style preferences, and usability
  • Annotated wireframes and led handoff to development team

THE Tools

  • Pen and Paper Sketches 
  • Lo-Fi Wires in Sketch 
  • Hi-Fi, pixel-perfect annotated wireframes

Key Takeaways

  • Iterative design process based on stakeholder, developer, and user requirements
  • Putting features together in task flow revealed trouble spots 
  • Narrowed features for MVP release, planned future features 
 

Early sketches

I began with pen and paper sketches to solidify Information Architecture, translate customer journey mapping into user journeys, and continuously validate.  To do the latter, I put paper prototypes in front of the team and asked them to accomplish tasks.  The initial design sprint lasted one week, at which point I began drawing screens in Sketch App.

Home Page.PNG
 

Key Takeaways

  • Rearranged site hierarchy in iterative designs to direct users through conversion funnel
  • Eliminated one main category of merchandise to simplify user experience and reduce burden of developing
  • Created several versions of product filtering task, based on direct user input
  • Accepted criticism and input from CEO, CMO, and CTO and redesigned accordingly

ANNOTATED WIRE FRAMES

Following the initial design phase, I created high fidelity mockups in Sketch App: every screen for every task.  Design changed aesthetically based on feedback from stakeholders, and functionally based on guerrilla usability testing.  Annotations provided client and developers precise specifications on functionality.

 
 
 
 
 
 
 
 

SEE MORE PROJECTS