Whoa. Slow down!
Your browser finally caught up to 1998.
Are you really still trying to access the internet through Internet Explorer?
Sorry Boomer, you'll have to use a real browser.

Background

Cotopaxi is a company that creates outdoor gear and apparel while also having a mission to alleviate poverty and promote education in the countries where they source their products. They practice sustainable manufacturing and fair labor practices. They also have a program called "Gear for Good" where they donate a portion of their profits to different organizations and causes related to poverty alleviation and education around the world.

Questival is a 24-hour adventure challenge and competition event organized by Cotopaxi, featuring a mix of physical and mental challenges such as hiking, biking, running, and other outdoor activities. Teams compete to complete as many challenges as possible, pushing participants out of their comfort zone and encouraging exploration and teamwork. The event also includes features such as progress tracking, picture and results sharing, and socializing opportunities.

In the past, Questival participants tracked their progress through an app available on the App and Google Play Store. However, the app was prone to crashing, making it difficult for users to complete challenges and track their progress. To address this issue, the Questival team focused on improving the virtual platform's user engagement and navigation to create a smoother and more user-friendly experience.

Objective

Improve user engagement and navigation for Questival, through a low-code web-app to increase user retention and participation.

Methods

Conducted user research through surveys and interviews to understand user needs and pain points.

It was difficult to find individuals who had previously competed in Questival; however, I was able to locate several vlogs online that documented their 24-hour experience. This provided valuable insights into potential pain points of the app during actual use. In hindsight, I realize the importance of reaching out to these vloggers for more in-depth interviews. While this project is not fully completed yet, I plan to reach out to them in the future for further feedback.

Hi-fi prototype designed in Figma

Created wireframes and prototypes using Figma to test and iterate on different design solutions.

The research phase is a crucial and enjoyable part of any UX design project. In the case of Questival, it required extra effort to gather information as there was limited data available online. Despite the challenges, we were able to find previous versions of the app and analyze the functionality and user experience. Unfortunately, there were no existing user journey maps available, not even on Mobbin. We did find some inspiring projects on Bēhance, which I utilized as reference material. Here is the link to each project, incase you want to learn more about the app.

Lastly, my favorite. A full blown Low-Code App

Building low-code web-apps with Webflow is my favorite thing, as it allows me to create interactive web experiences without extensive coding. I enjoy the flexibility and ease of use of low-code platforms like Webflow, Wized, Xano, and Airtable, which allows for quick prototyping and design iterations. The platform's drag and drop UI and pre-built elements make it easy to create modern, responsive web-apps with dynamic interactions.

Results

The redesigned navigation bar improves the user experience making it easier for participants to access and complete challenges, view the leaderboard, and track their team's progress. It's intuitive, simple and easy to use, allowing the users to access all necessary features and functionalities with a few clicks. This change resulted in a more efficient and seamless navigation experience for the Questival participants.

Gradient icons that try to mimic color blocking patterns from Cotopaxi

A new team dashboard for the user profile to provide real-time information and enhance the user experience. The dashboard allows participants to easily access their progress, statistics and other details of the challenges they joined. This new feature enables teams to track their performance in real-time and make data-driven decisions, as well as to keep track of their team members' progress, this resulted in a more collaborative, competitive and efficient experience for the Questival participants.

Implemented a new "Challenge Feed" that displayed challenges based on difficulty.

I haven't yet begun A/B testing, but I have plans to do so in the near future. I intend to gather a diverse group of participants, including friends, family, and random individuals who are interested in the project, to gather accurate and reliable results. Once the testing is complete, I will update this section with the results and insights.

Conclusion

The implementation of these improvements, such as the new navigation bar, the team dashboard and the challenge feed, have led to a significant increase in user engagement, retention, and satisfaction. The process also allowed for the creation of a more personalized experience for users through the use of user personas and tailored design solutions. This project showcases the effectiveness of a user-centered approach in driving business success and the importance of constantly gathering feedback, testing and iterating to provide the best experience for the end user.