Usabilla Gift Shop Demo

An E-commerce experience designed with the Voice of Customer in mind.

Overview

Usabilla (acquired by SurveyMonkey and re-branded to GetFeedback) is a suite of feedback collection tools that allow you to collect and analyze user feedback improve features and solve pain-points in your app. Passive surveys can be initiated by the user via the Feedback Button, or you can actively show users targeted micro-surveys which are triggered based on certain events. The purpose of this project was design and develop an online Gift Shop where we can launch mock surveys to demo the capabilities of Usabilla.

Using Sketch to design the screens, and React JS to develop the site, we created a working gift shop experience, where live surveys are launched during the checkout flow.

My Role

As a React Developer, my role was to collaborate with my colleague, Andrea, to design screens for the Gift Shop, and decide when to trigger surveys. Using Zeplin, the final designs were handed off to me, where I developed the code in React JS and Gatsby JS as the CMS.

Team
Danny Graugnard - React Developer
Andrea Iori - UX Designer
Timeline
August 2020 – September 2020
Project Type
Front-end coding exercise
Tools
Sketch, Zeplin, React, Gatsby JS

Open prototype

Design Process

Design Requirements

Implement the Usabilla Feedback Button
Trigger a survey when the user successfully completes the checkout flow
Trigger a survey when a user experiences an error during the checkout flow
Utilize user personas to design the checkout flow and trigger surveys based on happy/sad paths

Technical Requirements

Implement the Usabilla Feedback Button
Use ReactJS and Gatsby as the CMS to develop the e-commerce website.
Implement the Usabilla script which installs the Feedback button and micro surveys
Use SASS to style the pages

Design Handoff

By generating static websites, Gatsby significantly reduces page load times, creating a seamless and faster user experience. This is especially crucial in e-commerce, where swift page loading can improve conversion rates and customer satisfaction. Additionally, Gatsby's ability to pull in data from various sources, like APIs and databases, allows for dynamic content while maintaining static site speed.

See the code