Create Your Own Challenges

A feature that allows Ten Spot administrative members to create their own personalized challenges for their company, instead of either using one-size fits all challenges or having a Ten Spot Account Manager make manual changes. Challenges focus on engaging remote teams and supporting company-wide initiatives.

A challenge is a Ten Spot tool that focuses on engaging remote teams and supporting company-wide initiatives. Each challenge includes a variety of activities that support a theme/initiative/etc which individuals can complete for points and prizes.

The Create Your Own Challenge feature allows Ten Spot administrative members to personalize challenges for their company, instead of either using one-size fits all challenges or having a Ten Spot Account Manager make manual changes.

My role in this project was UX design, UI design, research, and assisting with product ideation.

My tools were Figma, Whimsical, and Google Sheets.

Company: Ten Spot. Ten Spot is a startup designed to bring remote teams together and improve engagement through features like virtual classes, challenges, and trivia. It has grown to focus on improving management.

Overview

The Problem

Ten Spot offers a challenge feature for its members to help engage teams and help promote company-wide initiatives. Account managers for Ten Spot spend a lot of time in communication with its members to design challenges. This is both expensive for the company and frustrating for users when they need to contact a rep to make small changes.

The Solution

We will empower administrative Ten Spot members by giving them the power to design personalized challenges for their companies. They will be able to create activities, themes, set dates, and invite coworkers to participate. This will be cost effective for both Ten Spot and its users, and will make Ten Spot a more user-friendly and technologically advanced product.

For this project, user research was mostly led by our team’s account managers and salespeople. Through daily interaction with clients and potential clients, they were able to gauge what people needed and wanted. Business research was led by our product manager and founder, who surmised that we needed to make Ten Spot more self-serviceable to reduce cost and friction. With user-led challenge creation, company time would be freed up to focus on other areas.

User Research

Features

The main way I decided which features to include was by analyzing a created challenge to find what information we needed to be captured from users. I was also able to use the extremely complicated backend portal to see how challenges were currently created. Then, I collaborated with Ten Spot’s account managers and salespeople to discover which features users needed and wanted, and which features were not seeing much use. After gathering and analyzing data, I was able to work with my Product Manager to produce a list of features.

Original Flow

  • Backend Challenge Creation

    Initially, Ten Spot account managers filled in challenge information in the Backend Portal after communicating with clients. This portal is not user friendly and takes a long time to learn and fill out. There were countless fields to be filled out using one long form, which was broken into 7 sections. I needed to confer with multiple team members to learn the system. Not one person in the company considered themselves an expert. It was very difficult to use!

    After experimenting with it, I was able to uncover what information we needed from users and what was extraneous. I also noticed where the language could be improved to increase learnability and useability.

  • Created Challenge Details

    After account managers fill out information using the Backend Portal, it is populated into a user-facing challenge. It was important to study this as it is the only thing the user sees. I tried to change the language used in the backend to better match and describe what the user sees. This way, they know what is being asked of them and how to properly fill in information.

Required Features

  • About Section

    Users will need to give their challenge a title, description, start and end date/time, and banner image.

  • Design Activities

    Designing challenge activities will be the most complicated piece. Users will need to choose an activity title and type, and add points, earning rules, and their position in the challenge.

  • Enter Prizes

    We want users to be able to add prizes for the winners of each challenge. They will need to specify what the prize is, how to win it, and possibly link users to the prize.

  • Invite Participants

    Not every challenge is for an entire company. Many companies will have managers run activities for their smaller teams. Ten Spot has a huge constraint in this area, which is that the backend only allows entire departments or locations to be invited. We do not yet support individual invites.

Competitive Research

Before creating my mid and high fidelity wireframes, I researched other competitors and neighbors in the space. I drew inspiration from their layouts, functionality, and language.

A couple big inspirations were Linkedin and Facebook for their successful group creation features. Virgin Pulse is a close competitor to Ten Spot for its successful walking challenges used by many large companies. EngageWith is a smaller company that works as a Slack integration to help bring teams together (similar to Ten Spot’s goal) and allows users to create surveys either from scratch or from templates, similar to Ten Spot challenge creation.

Mid Fidelity Wireframes

I experimented with three different types of layouts for wireframes: Long form, Wizard, and Modular

Layout Type 1: Wizard

Pros:

  1. We already use wizards in other places on the platform, so designing this would take less engineering time.

  2. Wizards break down information into more easily digestible steps.

Cons:

  1. Users have a disconnect between the info they are inputting and the challenge they are outputting.

  2. Users have to press multiple times to go between pages and it may be annoying to go back and edit.

  3. Information is hidden behind tabs/steps.

Layout Type 2: Long Form

Pros:

  1. Designing a long form would take less engineering time.

  2. All information is visible and users.

  3. Users are used to this information input pattern. Account managers are especially familiar with this as it is the most similar to how they originally created challenges.

Cons:

  1. Users have a disconnect between the info they are inputting and the challenge they are outputting.

  2. Too much information on the page will cause cognitive overload and lead to mistakes.

  3. Users might be overwhelmed when they see this long form and shy away from filling it out or have trouble finishing the page.

  4. Forms are boring!!

Layout Type 3: Modular

Pros:

  1. Users can very clearly see what the information they have inputted is being used for and where it is going.

  2. Learnability is increased because users are familiar with the challenge layout and can use this to inform their decisions.

  3. There is less clicking to go back and forth on the page (no steps), items are easily editable.

  4. All information is visible at once without being too overwhelming, because I break editable sections up by using modals.

  5. Works better when using templates because users can see how all of the information is laid out and can identify what they may want to edit.

Cons:

  1. Takes more engineering time to build.

  2. Users may experience some cognitive overload as their are multiple primary buttons.

After creating my mid fidelity designs, I did some user testing. I showed the wizard and the modular designs to remote managers found using userinterviews.com. I received good feedback on copy changes, and interviewees expressed more interest in the modular challenge builder. I chose the modular layout because the pro’s far outweighed the cons! Plus, I liked that it was more fun and dynamic for a user to build a challenge.

High Fidelity Wireframes

  • Empty Challenge Details Page

    This is the first page a user sees after they click “Create Your Own Challenge.”

    A user can jump in and start filling out the description, adding prizes, and designing activities. They can also choose to invite certain locations or departments.

    A user only needs a title, date, and one activity to launch a challenge. An error message will show to explain this if they do not.

  • Design an Activity

    Designing activities was the most complicated design. I chose to use labels, sublabels, and placeholder text to help guide the user.

    After the activity is saved, it presents the same way it does in a finished challenge (with the addition of an edit/delete button). This also helps the user to understand the fields they are filling out.

  • Enter a Prize

    Prizes are a great way to get teams excited to participate in challenges.

    Admins can choose how a user can win a prize (most # of points, fastest to complete, or random).

    They can also choose if they want to link a user to the prize (i.e. store gift card) or if they want to connect with our rewards integration (Tremendous).

    They are able to adjust the prize place by moving it on the page after saving.

  • Ready-to-Launch Challenge

    This shows what a challenge might look like after it’s been filled it. A challenge template would also present the same way. Templates allow users to start with a ready-made challenge (by our Ten Spot team) which they can edit and personalize.

See Prototype

Thank you for viewing.

The prototype above shows the design of the first release of this feature, which is accessible to Ten Spot Admin members. I have received a lot of great feedback on the feature from users.

Next steps include redesigning the Challenge Details page (or launched challenge page) so that activities are the main focus, and more micro interactions are included. The redesign will use Tailwind components, which will decrease engineering cost. After this, I will redesign the Create Your Own Challenge pages to match.

This project taught me a lot about gameification and the importance of trying out multiple designs.

Next

Ten Spot User Guides