Back to Blog

Design Inspiration: Interactive UI & User Engagement

Author

Slaveryfootprint.org is a website that does a tremendous job of engaging users and directing them on a prescribed path to reach an end goal. There’s some very well-crafted interactive UI in place that sets up a fluid user path to conversion.

About the site: SlaveryFootprint.org is a website that allows users to “calculate your slavery footprint;” it’s aimed at raising self-awareness, pulling back the curtain for site visitors about how their consumption habits are feeding the global slave labor market. Site users are prompted through a series of questions to calculate their slavery footprint score, revealed at the end.

The UI Skeleton: Slaveryfootprint.org uses an interactive user interface and illustrative designs to drive users through a data entry process; from the user’s responses, it generates an info graphic to depict each user’s resulting slavery footprint score.

 

For the purpose of focusing on the user interface design aspect of this site, I created a video that gives a visual summary of the UI in less than a minute.

Click below to watch it now, then read the design takeaways below in context.

Biting Off SlaveryFootprint.org: UI Design Takeaways For Better User Engagement & Conversions

1.) Create A Strict User Path
There’s only one path that any given user takes through this survey. Constructing a strict user path that doesn’t allow users to regress or stray is a surefire way to drive conversions. To keep users engaged while limiting their navigational options, see the next takeaway.

2.) Let Users Customize Their Results
This UI empowers users with the ability to customize their results. The customization options even go a step further on some pages, where additional second-tier elements pop up for more detailed figures. Although the user has no input on their path through the site, they have ultimate control over their responses.

3.) Responsive Design
The best way to deliver a seamless user experience and provide a sense of control for the user is through a really responsive design. Every slide and click you make in answering each question renders precisely in the visual design of Slaveryfootprint.org. The way the graphics change incrementally to reflect the user’s selections is an example of really well executed responsive design.

4.) Beautiful Design, Great Calls To Action
The info graphics that represent your survey responses on sSaveryfootprint.com are incredibly illustrative. Most info graphics look like charts and graphs, but there’s something special about these detailed illustrations that makes you want to interact with them. As a user, the design is beautiful and original, which catches my eye, but it also uses tried and true calls to action, which get me to click with confidence.

5.) The Right Balance of Consistency vs Variation
Consider the bigger picture, the process that the Slavery footprint survey abides by from one page to the next. There’s a consistent pattern or formula that it follows—click continue on the right tab navigation to move to the next question; arrive on a new page, point or click to enter content, read the slavery factoid provided, tweet it from the button below. This provides great usability and a sense of stability for the user. At the same time, I’m kept surprised as each new question appears with a different action required. On one page there’s a circular gauge to pull, on the next a slide, and then a zipper to drag. The formula and calls to action are the same, but the interactions are varied.

Case Study Wrap Up

Why I’m Impressed: Getting your users to provide data or feedback is typically a big challenge. It’s boring and tends to repel users (think of filling out a consumer marketing survey or a detailed evaluation form.) Usually it comes in the form of multiple choice or 1-10 scales, tedious black and white words on a screen. Slaveryfootprint.org has discovered a new approach to getting users to enter data & provide feedback; it’s fun, interactive, and progressive; it’s no longer an after-thought and a chore, it’s central to the process. User feedback is so valuable to refining & improving products and services; imagine how easy it would be to collect that data if you presented it to users with an interface design like Slaveryfootprint.org’s?

Author Alex Stetson

More posts from this author

How we work Process

Product Hero Talin Wadsworth