A Wheel with Purpose
The ‘Wheel of Purpose’ is a simple project that illustrates my style of working, sense of responsibility, and focus on the end-user. I convinced teams across the company to trust my expertise, then prototyped, designed, and programmed a solution that found wide adoption, from SAP to the United Nations.
The ‘Wheel of Purpose’ is both a website and a physical showcase, that are being used at SAP Experience Center locations worldwide to educate visitors about SAP’s commitment to the 17 Sustainable Development Goals of the United Nations. Recently, the UN itself started to adopt my wheel for their own conferences, which makes me incredibly proud and shows how far quality and commitment can reach.
It started with an escalation
Original, live version of the wheel
During one of our regular team meetings, a colleague from SAP’s sustainability team presented an interactive website to promote the 17 SDGs. While I liked the idea of gamifying SAP’s sustainability efforts, I was shocked by the low quality of the gamification element, which was built by an external party. I, therefore, wrote two emails: One to the colleague who presented, and one to a backend developer in my team.
To both, I suggested building a more stable, more responsive, more on-brand version, that would fit well with the rest of our SAP Experience Center showcases. While the developer liked the Friday challenge, my other colleague was worried about the team who paid the agency and us getting involved in another department’s business. She urged us not to proceed, but I saw SAP’s brand reputation at stake. (The original link is still working if you want to take a look.)
A prototype tells more than a 1,000 words
While ‘responsiveness’, ‘ease of use’, and ‘performance’ could be measured, experiencing the difference first-hand brought us the expected break-through.
My colleague and I quickly programmed a prototype with a spinning disk and a random number/color generator based on an earlier GitHub project. The presenter could immediately feel the difference, not to mention the fact that our prototype also worked on mobile devices.
That motivated her to approach the sustainability team and suggest a ‘performance improvement’ with the promise to keep the rest of the wheel close to the original. Thus, everyone could keep their face.
Widening the horizon
After positive reactions from the sustainability team, a formal project could be established and approved by management. I worked on different design proposals (in PowerPoint), which still contained the full texts of the original wheel. I also highlighted the benefits of a more playful and less text-heavy version, to improve the user experience. Seeing both variants side-by-side, the decision to a simplified variant was taken.
Having gained the trust through regular updates and involvement, I grew more confident in suggesting further improvements. My focus was to reduce the number of explanatory texts and make the game as intuitive and straightforward as possible. For that, I tried several other minigames, and observed colleagues interact with various prototypes.
A big challenge was how to switch between goal-explanation, questions, answers, and results. I experimented with different options, from popups to expanding screens, and eventually settled with simple panels that open up when clicked upon. To indicate the correct answer, I fell back on simple color-coding (plus a written explanation for including the color-blind).
Responsiveness
Mobile-first is a must, especially for such a fun and easily sharable tool. However, users who would spin the wheel with their fingers would instead scroll down on the page. To keep the wheel, I needed to make the content switch naturally, depending on the situation and resolution.
The wheel is for example replaced with the question after it comes to a halt because it cannot be spun until an answer is given. This frees up space for the question, without having to scroll the page.
On large screens, an animated ‘front view of the wheel is visible, that holds the icons and title of the current goal. This adds a visual element and continuity across spins and keeps the wheel itself clean, as required by the UN styleguide.
On smaller screens, the front-view is not visible, but instead, a static icon is shown next to the question.
Responsive - to the user
The UI constantly adjusts to the situation and user.
Finishing touches
My last updates to the wheel were subtle, but make it appear natural and hence simple. For example, mandatory legal information is displayed in a footer that is always just slightly below the visible area, to keep a clean impression. I also added a sound effect (which was not so easy to get to work across all browsers) and fine-tuned the acceleration and deceleration functions.
I added idle animations for when the wheel is being displayed at an exhibition, as well as subtle animations when the cursor hovers over the wheel, to indicate that it can be spun. For those who don’t understand the hint, a written explanation appears automatically, if no user interaction is detected for some seconds. Another notification informs users that they can spin the wheel faster if they keep the mouse button pressed for long. This notification only comes up at the first short click, to not annoy players who don’t need it. And the final message corresponds to the player’s score and is either celebrating or motivating.
Lastly, I created animated thumbnails for different social media channels, and programmed custom messages into the <media> tag, to serve them with individual pre-filled text and hashtag suggestions. This is a detail, not many developers think of. My colleague programmed a backend that allows the sustainability team to update texts and questions, as well as a simple reporting tool based on my design.
Was it worth it?
In addition to the web version, the sustainability team proceeded to create a physical showcase with our partner agency. Sustainability is now stronger than ever on SAP’s agenda! Our storytellers and sales representatives are excited to give their tours a green spin, which edges them closer to win deals. With the original version, and without my intervention and rapid prototypes, this would not have happened.
Via my personal network, I could get even the United Nations interested in this fun tool. SAP is now adopting it for official use at UN conferences. Are you ready to spin the Wheel of Purpose?