WEB & SURVEY DESIGN

STARBUCKS

01

STARBUCKS

01

Siren Ideas is a Starbucks internal business development team that was tasked with testing a new product.  In order to gather data, the team wanted a simple elegant looking landing page with a survey function that would engage people.  

Role

Product Designer, UI Designer

Year

2018

Role

Product Designer, UI Designer

Year

2018

What are Survey best practices?

SURVEY INTEGRATION OPTIONS

There are many ways to integrate a Survey into a website;  WordPress plugins, Google Forms, Survey Monkey or even hand code a form.  

One survey integration option stood out 

TYPEFORM.COM

Typeform allows for a progress bar indicator and micro-interaction icons when answering questions.  

One survey integration option stood out 

TYPEFORM.COM

Typeform allows for a progress bar indicator and micro-interaction icons when answering questions.  

A variety of ways to integrate a survey

HTML/CSS CODE

Preformatted code is just one option available to integrate a Typeform survey.  

A variety of ways to integrate a survey

HTML/CSS CODE

Preformatted code is just one option available to integrate a Typeform survey.  

Analyzing the results 

DATA GATHERING

A results tab offers both written and visual options to analyze survey data.  

Analyzing the results 

DATA GATHERING

A results tab offers both written and visual options to analyze survey data.  

Destination page design

FIRST DESIGNS

A five-day project timeline and one web page allow for early visual concepts and user interaction discussion.  

First Visual Concepts

FEEDBACK ON INITIAL DESIGN

The Siren Ideas team had two key pieces of feedback.  The scroll interaction design and progress for the survey was excellent.  The destination page visual design was too busy.    

First Product Concepts

FEEDBACK ON INITIAL DESIGN

The Siren Ideas team had two key pieces of feedback.  The interaction design and progress bar for the survey was excellent.  The destination page visual design was too busy.    

Product Photography

NEW VISUALS

Using my photography background I spent four hours producing different images for a web page background.  

Product Photography

NEW VISUALS

Using my photography background I spent four hours producing different images for a hero image that might capture what the Siren Ideas team wanted in a simple and elegant look.   

Micro Interaction

FINAL DESIGN

The final product introduced one interaction specifically geared towards mobile users.  A launch button as a micro interaction to draw users in and let them know they are starting the survey.     

Micro Interaction

FINAL DESIGN

The final product introduced one interaction specifically geared towards mobile users.  A launch button as a micro interaction to draw users in and let them know they were starting a survey.     

Click for Next Project

Touch for Next Project