New York Tech Journal
Tech news from the Big Apple

Design First: All about prototypes

Posted on December 16th, 2014

Design First @DesignFirst

12/15/2014 @WeWork 69 Charlton St, NY

Four presenters talked about different aspects of #prototyping in the design process. The four speakers were

Matt Hartman, @Betaworks
Jessica Phan, @Zurb
Will Dawson, @Huge
Donna Lichaw, @Parsons

How to build your prototype without code 

Matt Hartman @betaworks argued that quickly prototyping an idea is the best way to test a concept. The most efficient way to do this is by using off-the-shelf utilities (that do not require programming) to put something into test quickly. He underlined his point by saying that when Zappos was started the founder went to the store and bought shoes to fulfill orders.

Matt illustrated how a prototype stack might work with an example. The hypothetical concept was “lunch roulette” in which people received a daily email giving them a single restaurant suggestion.

To quickly test this idea, Matt assembles and monitors a one-day, trial email campaign as follows

  1. Select a top New York restaurant from UrbanSpoon
  2. Create a flyer using typeform
  3. Attach the flyer to Zapier to create a usage monitoring tool
  4. Use MailChimp to set up a broadcast email to a test audience

The test gives him some idea of the size of the funnel by counting the number of users that opened the email and eventually proceeded to go to the restaurant site.

To see more suggestions go to Matt’s site.

What’s product design?

Jessia Phan talked about how design fits into product creation. She started by breaking down product design into various areas of expertise which include: analytics, front-end coding, writing storyline, UX, design mgmt, UI, user testing, Ideation, design strategy,…

She stated that prototypes are important to design efficiently & communicate effectively. In the development cycle of

ideate -> prototype -> build -> analyze -> define -> ideate -> …

prototyping has an important role to play in three of the steps:

Lo-fi prototype  (ideate) – sketches. Mock up pages using paper & pen.

Medium-fi (prototype) understand hierarchy and content placed. Use wire frames to evaluate the details of interaction

Hi-fi prototype (build) – front end code. Test responsive web design. For web, tablet, mobile

Prototyping for Clients

Will @ Huge focused on two aspects of using prototypes as a communication tool with clients

  1. Why prototype when designing for clients?
  2. How to use prototyping with clients

Will started by saying that every project is designed to solve an issue or meet a demand. This means communication is the key and a picture is worth a lot of words. A prototype is an easy way to explain how a user will interact with an application. He then extended this is idea to show how a series of pictures can 1. show a sequence of layouts, 2. show the flow. 3. Can show animations, etc.

Story First – a narrative approach

Donna Lichaw  @ Parson talked about how to improve a product by thinking of it like a story.

Donna started by talking about how story telling is one of the oldest forms of human communication. A compelling story line is especially important in film making as it provides a flow that engages the viewer and makes the experience memorable. In traditional story telling there is a narrative arc, (similar to creating a narrative for a game) – beginning, middle and end

Within this structure, the best stories have the following path:

exposition – inciting incident – rising action (journey, chase, search) – crisis – climax – falling action – resolution.

Donna then talked about how two types of stores can used when creating the same interest in products

  1. Concept stories – e.g. the story of the first iPhone. The challenge is that I already have a flip phone and an iPod, climax: the iPhone is better than both combined. Creating a climax is important. For example the original iPhone prototype looked like an iPod (digits in a circle), but the story is flat. 1.what is this thing 2.does it make sense? 3.How does it fit into my life? 4.why would they use it? (the last step is the usage story)
  2. Usage stories – e.g. I want to fill my skills gap, try the product, climax: teach myself/take a class. To complete the story one needs to fill in a climax and continue engagement. Otherwise people will drop out of the course.

She talked about how a product is more than a hierarchy of needs (see Maslow), but requires a narrative to be compelling. One more thing, this narrative, as in any good story, needs peaks and valleys to engage.

posted in:  DesignFirst, UX    / leave comments:   1 comment