Overview

Timeframe

5 Weeks

stakeholders

Founder
IT Lead
Software Engineer

responsibilities

User Interviews
C&C Analysis
Design Systems
Low-fi Wireframes
Mid-fi Wireframes
Hi-fi Prototype
Usability Testing

Let's do Something about climate change.

During an ultra-marathon swim, Will was alarmed by the pollution he saw, sparking his drive to take action. This led to the creation of Something, a climate-action program designed to cultivate a purpose-driven culture within companies. This web-based platform aimed to encourage employees to learn about climate issues and advocacy.

Beta testing resulted in user engagement declining. Users mentioned to the team that the experience wasn't stimulating after completing a module. I was asked to re-design the experience, and utilized insights of team dynamics and gamification to improve engagement.

Through user testing, users mentioned they enjoyed the new dynamics with increased awareness of personal progress and team camaraderie. This led to a 60% increase in motivation to engage with product.

Defining goals

Client wants to increase engagement.

After initial beta testing, the company discovered a decline in user engagement with numerous reading modules and no reward. Given that the app was intended to foster team bonding in business environments, I brainstorm goals that my design needed to incorporate in order meet the founder's needs.
  • Goal #1: Increase reading engagement
  • Goal #2: Create user interaction among users
  • Goal #3: Create an environment where users felt that their progress contributed to a larger goal

the problem

Users were bored.

Through user interviews, I asked professionals what they looked for in mobile apps they use. From language learning to fitness tracking, I learned that users valued:
  • Community: "I am more engaged in apps that establish a sense of community so that I can stay up-to-date with peers and their accomplishments."
  • Competition: "Mobile apps that have a sense of competition are addicting and make me feel productive with my time."

  • Interaction: "Interacting with the app and seeing my progress helps me feel accomplished and keeps me motivated. It reinforces that the small steps I’m taking are making a difference, making the journey rewarding and encouraging me to stay consistent."

redefining the experience

Ideating and Iterating

With the goals and issues defined, I conducted a competitive analysis with gamified apps to understand how points, competition, and teamwork were integrated into the user experience. I took note of the visual display and organization regarding ranking and point information to emulate in my own design.

With ideas in mind, I translated my user flows into wireframes to communicate my gamified ideas with the founder and IT lead. This helped us all align on the overall product vision, and allowed me to understand coding interactions and capabilities before creating prototypes.

Improved Design System

With a loud, bold, modern branding system to revamp a decades old topic of climate change, I utilized their primary colors and fonts to enhance their web app design system to keep consistent with their reading materials and branding.

User testing for new iterations

Tracking Progress

The team had an existing point system in place, but the initial design provided minimal visibility of users' progress. Beta testers mentioned that they didn't understand the goal of collecting the points.

Through a competitor analysis, I was able to isolate successful point system features that would inspire my design. I landed on an interactive line graph that showcased users' weekly progress in a visually dynamic way. This graph provided users with a clear, upward trajectory of their achievements, giving them a visual representation of their journey and motivating them to continue engaging with the platform. Users could also filter by type of points to gain insights into how points were accumulated and in which focus areas.

Subsequent user testing reported that 100% of users felt more engaged as they became aware of their progress. By blending visual motivation with functional insights, this feature encouraged a stronger connection to personal goals and kept users invested in their continuous learning journey.

Before

After

Teamwork and Competition

Users needed to feel that individual achievement contributed to a team success. After analyzing gamification strategies and iterating user flows, I designed a team profile view with a dynamic leaderboard feature to track user contributions across specific learning modules. This feature allowed users to visualize their individual progress while motivating them to strive toward shared objectives. It offers two primary features:
  1. Team Goal Progress: Users could see their team's overall progression toward a common points goal, creating a sense of unity and shared purpose.

  2. Individual Module Leaders: Users could also view a breakdown of top contributors in each category, introducing a friendly competitive element that encouraged continuous learning.
    Users praised the new feature during testing, with 60% mentioning an increased motivation in contributing to their teams success. This balance between individual recognition and team-based motivation helped users feel both personally rewarded and invested in the team’s achievements.
Users needed to feel that individual achievement contributed to a team success. After analyzing gamification strategies and iterating user flows, I designed a team profile view with a dynamic leaderboard feature to track user contributions across specific learning modules. This feature allowed users to visualize their individual progress while motivating them to strive toward shared objectives. It offers two primary features:
  1. Team Goal Progress: Users could see their team's overall progression toward a common points goal, creating a sense of unity and shared purpose.

  2. Individual Module Leaders: Users could also view a breakdown of top contributors in each category, introducing a friendly competitive element that encouraged continuous learning.
    Users praised the new feature during testing, with 60% mentioning an increased motivation in contributing to their teams success. This balance between individual recognition and team-based motivation helped users feel both personally rewarded and invested in the team’s achievements.

Lessons Learned

  • Cross-functional Collaboration
    During the lo-fi phase, I found it important to collaborate closely with engineers and IT leads to ensure technical feasibility and gather valuable input. This approach allowed me to identify potential challenges early on, align on requirements, and iterate quickly based on feedback, leading to a more refined and implementable design solution
  • Color Accessibility
    Considering their branding, I had to ensure that colors were bright enough to be visible, but not takeaway from any primary or secondary CTA's. I also had to revisit their font style guide to ensure that content would be legible with the dark background.
  • Qualitative > quantitative
    As the primary goal was to increase engagement and utility, it was more important to understand how users became motivated, and what competitors did to engage and enhance motivation.