Theatre Galleria Banner.png
Theatre Galleria User Research Banner.png
Theatre Galleria Sketching Banner.png
Theatre Galleria Banner.png

Overview


SCROLL DOWN

Overview


Website design

designing The mvp for an e-commerce startup

Overview

Theatre Galleria is an online marketplace for the peer to peer resale and rental of theatre goods.  After exhaustive market research and business planning, the Theatre Galleria team hired me to create their online store.  

THE PROBLEM

Theatre Galleria is setup to be a content strategy and IA challenge.  Allowing users to sell, buy, and rent merchandise from several major product categories meant I would be doing a lot of research, and a lot of trial and error.

THE OPPORTUNITY

By speaking directly to theatre professionals about how they consider their purchases, I understood and analyzed how the site should be structured.  I addressed user pain points and incorporated user behaviors into innovative, interactive UI solutions.

MY ROLE

I was a UX team of one, collaborating directly with Theatre Galleria's CTO, CEO, and CMO to clarify and define requirements, style guides, and stay on target with business goals.  I researched, synthesized, designed, prototyped, and annotated wires.

 
Theatre Galleria User Research Banner.png

User Research


User Research


User Research

my role

  • Sought out industry professionals and hobbyists 
  • Wrote interview script
  • Conducted 12 interviews
  • Compiled user responses into spreadsheet 
  • Synthesized user feedback to draw out design opportunities

THE Tools

  • Screener Survey
  • Online Card Sort
  • Scripted Interviews
  • Affinity Mapping
  • Journey Map
  • User Personas

Key Takeaways

  • Understood demographic trends
  • Observed how users behave, what they like and dislike, and what apps they use
  • Identified two separate use-cases
  • Revealed ways to convert target users 
 

Screener Survey

56 theatre and film professionals took part in my survey, providing actionable information that directly informed design.

      KEY TAKEAWAYS

      • Identified primary use-cases within each broad merchandise category
      • Confirmed some beliefs about users found in market research, but also uncovered some areas that differed.  This opened a dialogue with the CEO to restructure certain business goals.
      • Identified buyers' primary considerations for various types of theatre merchandise.  User interviews would reveal why.
       

      User Interviews into Journey Maps

      I created a scripted interview based on screener survey responses.  Speaking to users let me get a deeper understanding of some of the trends I noticed.  Especially important for me was to understand why users bought or rented certain things, how they already went about doing it, and what they liked and disliked about their current methods.

      First, I sorted feedback in an affinity diagram: separating responses that were pains, pleasures, user behaviors, or contexts of use.  I then divided these responses further into themes with titles like "using pictures," and "buy or build."  

      First, I sorted feedback in an affinity diagram: separating responses that were pains, pleasures, user behaviors, or contexts of use.  I then divided these responses further into themes with titles like "using pictures," and "buy or build."  

      Themes from the affinity diagram could then be plotted chronologically in a Customer Journey Map.  I used this method to help frame user feedback and user goal in the same context.  

      Themes from the affinity diagram could then be plotted chronologically in a Customer Journey Map.  I used this method to help frame user feedback and user goal in the same context.  

      This helped me to both identify design opportunities that corresponded to real user needs (represented here with blue stars), and explain to stakeholders why those opportunities could help with customer conversion, satisfaction, and loyalty. 

      This helped me to both identify design opportunities that corresponded to real user needs (represented here with blue stars), and explain to stakeholders why those opportunities could help with customer conversion, satisfaction, and loyalty. 

      SOME EXAMPLES

      Costume designers described the process of flicking through racks of clothing for the right look:

      I created a Tinder-like carousel UI for quick browsing of vendor merchandise.  The idea was to replicate the feeling of physically swiping through options.  This won't be in the MVP, but is being considered for later versions.

      Users described cases in which they'd need to physically see something before purchasing, usually if it had a special function--like a prop or large costume:

      Including the option for vendors to upload multiple angles and videos of their products would prove imperative.

      When searching for costume pieces, designers often send inspiration photos to costume rental shops ahead of time, and those shopkeepers pull relevant merchandise:

      I suggested and mocked up a "request for proposal" interface, in which buyers could upload a picture of what they're looking for, and vendors could link them in merchandise in their online catalogs.  Again, we left this out of the MVP, but it will be incorporated in the future.

       

      User Personas

      Feedback from the survey and interviews lead me to identify a few use-cases, and some distinct user personas.  Each persona would use the site differently, so I put myself in their shoes as I designed to ensure I had their needs in mind.

      Camille Shaw, my first persona, is my "one-stop-shop" user.  Camille is an amalgamation of many people I spoke to directly, though she became such a familiar personality, we all started to think of her as real.

      Click to Enlarge

      • Wants to outfit a whole show from external sources (i.e., avoid building costume and props)
      • Hates traveling to and from several rental shops
      • Extremely loyal to a handful of vendors, expects some form of discount for her loyalty
      • Is most concerned with era-appropriateness.  Size variations and aesthetic perfection are secondary, as she can adjust things in her shop once they arrive.
       

      My next persona, Karen Clemente, prefers to build her own costumes, and rent or buy only as a supplement.  She's a young freelancers with something to prove.  When she can't make something, she needs to be able to buy it, often on short notice, and it has to be perfect.  Some design opportunities for Karen are natural language search, messaging vendors, and a share feature so she can get approval from her director.

      Click to Enlarge

       

      • Has very limited budget and time
      • Wants exactly the design aesthetic she and the director envision 
      • Motivated by aspiration and recognition--she wants to be rewarded for her work
      • Crucial to be able to search for items with a high level of specificity
      Theatre Galleria Sketching Banner.png

      Sketching and Wireframing


      Sketching and Wireframing


      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