loader-logo
  • Client

    Flatiron School
  • Role

    research, information architecture, interaction design, UI design, testing and analysis
  • Product

    Native mobile app
  • Deliverables

    Domain Research, Visual Competitive Analysis, Design Principles, Style Explorations, High Fidelity, Mobile Design Mockups, UI Kit, Style Guide
  • Duration

    October – November 2019
  • Tools

    Sketch, Photoshop, Illustrator, Adobe Draw, InVision, Principle, Miro, Google Drive, Usability Hub

Social Activism + Gamification Design​

According to a 2018 report by Maryland’s Do Good Institute, fewer Americans are volunteering than at any time in the past two decades. However, the Millennial Impact Report indicates this issue may need more research due to the fact that younger Americans approach cause engagement differently than previous generations–specifically in the use of technology and devices. They also create leverage by acting in small, individual ways that can influence great change when networked together into larger groups.
This is known as micro-volunteerism.
In order to incentivize time-strapped users to participate in acts of micro-volunteerism, Flatiron School tasked my user interface design team to define the design system of a new mobile app, Voluntopia. Our solution focused on ways to gamify social activism in order to apply the fun and engaging elements of game-play to real-world opportunities.

Approach

As user interface designers, we were challenged to create the visual look and feel of a gamified micro-volunteering app, creating a fully-realized, high fidelity prototype in four one-week sprints. In doing so, we explored divergent style directions, produced high fidelity designs, and conducted desirability and usability testing along the way.

Ideate

a

Prototype

Plan de travail 14

Test

Goals

  • Creating a product that integrates easily into users’ lives and other social networks
  • Establishing and extending the brand experience
  • Delivering a visual brand experience that encourages users to get involved
  • Defining a scalable design system that ensures future consistency and alignment
  • Establishing clear navigation and interaction to maximize users’ time
  • Engaging with users via micro-interactions and/or animations
  • Discoveries & Evaluations

    Creating a product that integrates easily into users’ lives and other social networks
    Because of the way millennials and Gen Z cuspers appropriate burgeoning device technology, Voluntopia targets “the volunteer” persona as its main audience. Hence our primary interest was in the needs and motivations of the volunteers.
    Primary User Persona
    A gap in the US marketplace for a gamified social activism app
    Few direct competitors provided working products in the American marketplace. Those that existed, such as Nano, were aimed at a much younger audience, which left an appealing gap for our product placement. Instead, we gleaned inspiration for potential solutions from successful gamified productivity apps like Habita as well as immersive virtual-world simulation games such as Farmville.
    Establishing and extending the brand experience
    Highlighting the positive associations between gamification, brand engagement, and brand equity, we applied the mechanics of game design to the Voluntopia Brand Adjectives to develop a set of design principles.

    Brand Adjectives

    Catalyze

    Spark an interest!

    Simplify

    Cut through the noise; curate the experience.

    Retain

    Keep users engaged and coming back for more.

    Design Principles

     Inspirational & Social

    Motivate users with personalized features and engaging social components that gamify micro-volunteering and inspire social change in real life. 

     

    Designing colorful, immersive environments and playful interactive elements will captivate and delight users, even as they tackle serious tasks.  

     

    Complement the platform’s fun visual identity with an upbeat, energetic tone of voice that inspires positivity and encourages users to connect with those in need and with each other.

    Easy & Enjoyable

    Encourage time-strapped individuals to participate in micro-tasks by designing a simple, intuitive interface.

    Create credibility by organizing content with familiar patterns, clear hierarchy, accessible navigation and a flexible, personalized interface experience that will make micro-volunteering appealing.

    Resonate & Empower

    Reward user activism with immediate feedback in order to create meaningful changes in a community while building a sense of purpose.

    Delivering a visual brand experience that encourages users to get involved
    In order to appeal to an audience of Millennials and Generation Z cuspers, I took a cue from Habita and focused on the nostalgic visual design of that generation. By building social connectedness through the psychology of nostalgia I hoped to create an emotional hook that would leverage positive associations from the past and drive energy towards modern action.
    The halftone-like patterns led me into a vintage comic book pop-art theme. The sunbursts then directed me towards a more mid-century modern-retro Shepard Fairy look. I also explored the idea of a more whimsical illustrative story-book (i.e. Where the Wild Things Are or The Little Prince) designs that resonated with adults long after childhood.

    Preference Testing

    For the first round of testing, we wanted to find out what were the first impressions of each design, which of the 3 themes resonated the most with the potential users, and in what way. We showed seven participants each style tile for 5-second then asked them questions based on whey could remember of the designs to see if it communicated the intended brand message. We then asked which of the 3 were preferred and for what reason. Finally, we showed each image once more and asked the participants to choose 5 words from a list that best indicate how they feel about each design.
    1 %
    Space
    1 %
    Revolution
    1 %
    Comic Book
    Since Space and Revolutionary were so close and splitting the desirability test, I did a second round of Guerrilla testing of 7 additional participants. Those results showed 71% preferred the more Sheppard Fairy Revolution-style in comparison to the 29% that liked the more illustrative Space theme. Additionally, 71% found the Revolution-style “empowering” and “motivational” whereas the space theme mostly reflected “easy.”
    Defining a scalable design system that ensures future consistency and alignment
    Merging the design principles to the most popular concept paved the way for the construction of user interface components.
    a
    Gotham

    #C8AA54

    #02405D

    #E02122

    #FCF7D7

    peace
    voluntopia logo
    The brand colors being red, blue and beige represent the American flag, illustrating patriotism.
    The UI typeface used is Gotham, a strong slab sans serif that creates a sense of confidence.
    Similarly, the wordmark typeface and flat iconography were inspired by the distinctive minimal style of Saul Bass. The use of simple, geometric shapes and symbolism deliver a powerful message while the rough hand-cut style adds a jazzy retro vibe to the brand.
    In keeping with the retro-modern look and feel, the map was designed with mid-century modern characteristics including minimal ornamentation; saturated, vibrant and loud colors as well as some off-white borders (for stylistic purposes, which were a leftover design feature from the way postcards after World War I were produced)
    The mid-mod style pairs well with both post-war America and as a rediscovered socio-political retro style, as it was originally used to address the new societal needs of the late 1930s to 1940s.
    Establishing clear navigation and interaction to maximize users’ time
    In order to complete a micro-volunteer activity, users find micro-volunteering opportunities on the home screen via a virtual city map and then choose from a variety of categories such as civic, education, health, housing, and the environment. As the user completes tasks in the real world, a virtual city builds on the mobile app. Social integration could be addressed with the ability to invite friends and link the virtual worlds together.
    Using the UX team provided task flow and wireframes as a blueprint, I started building out the screens needed to prototype a home screen to complete micro volunteer activity task flow.

    Usability Testing

    For the next round of testing, I wanted to find out if users could understand how the interface functioned and set a baseline for usability testing to see if users could complete the task. To do so, I created a click-through prototype of the 7 high-fidelity screens, then did a moderated test with 5 participants as well as an unmoderated test with 7 participants.
    The moderated click test served as a way to check the usability to find how easy it was to complete the task by recording where the user would click on a certain screen when presented with a task. Then I followed up by asking them to explain why they clicked where they did in order to further investigate and understand the behavior.
    The unmoderated navigation test also analyzed how users moderated the mobile app given the exact same goal, however only the first-click is recorded, and in order to proceed to the next step, the user would have to click on the hit target. If the hitzone is not clicked, the test ends.
    The result formed a funnel report showing how many users clicked at the expected place at each step. Out of the 7 unmoderated participants, 57% were able to tap a category in step one. Of those 4 users, 100% were able to dismiss the modal overlay by hitting ok. All of those users were able to recognize the task cards, but none of them could understand the task instructions sheet. So both the categories and show/hide instructions needed revisiting.
    Engaging with users via micro-interactions and/or animations
    Finding and choosing a micro-volunteering task represented the hallmark action of the entire app. During previous testing, users revealed that they didn’t initially understand that the map was draggable. Likewise, participants who were more time-pressed preferred the option of having the categories listed all on one screen for quick and easy scannability.
    I used the compass pattern floating action button as a main menu in order to help the user successfully navigate the environment to points of interest and objectives.
    Prior to the last round of user testing, I also iterated upon the task-instructions page design. I replaced the top-sheet (hotbar in the wireframe version) with a floating modal that was more consistent with modals used elsewhere in the app. This solution also added more consistency by allowing the task instructions to mimic the mobile-app play instructions in a step-by-step design pattern. The instructions tab could then resemble the compass FAB in color and placement to link, but differentiate the real-world map from the virtual one.
    To validate the gamified aspects, I took the revised prototype loaded onto my iPhone to an arcade to get further feedback from Millennial gamers.
    Combined Floating Action button and Game Compass UI pattern

    Navigation testing

    4 out of 5 participants were able to complete the desired task either by taking the expected path or an indirect one. The few drop-offs recorded showed that some users wanted to skip the tutorials and upvoting options.

    Conclusion

    My biggest takeaway from working on Voluntopia was the importance of context in the design process. Therefore, thorough user research was essential in order to create a product that would suit the users needs and expectations. In order to create a customized gamified service, more emphasis should be placed on the relationship between motivations and situational relevance and the game-play mechanics during the insights phase prior to design.
    View the prototype walkthrough:

    Previous

    Share On
    Next