Togoparts
Togoparts is a social SaaS platform that connects cyclists and runners through challenges, events, and marketplaces. It is the largest virtual events platform and marketplace for cyclists and runners in South East Asia. It aims to build a community of cyclists and runners passionate about cycling and running through its events platform.
Task
Redesign the Togopart platform to improve its user experience, visual appeal, and functionality.
Key challenges included:
- Improving the overall user experience: Making the platform more intuitive, visually appealing, and accessible across different devices.
- Enhancing platform features: Introducing new functionalities to encourage user engagement and competition, such as ranking systems, leaderboards, and exclusive rewards.
- Strengthening brand identity: Developing a cohesive and memorable brand image that resonates with the target audience.
- Effective communication CMS: An easy-to-use email marketing CMS to promote new events and engage users.
I was hired by Togopart to redesign their brand and web and mobile platform, creating a more approachable, pleasant, and user-friendly experience. Throughout the project, I focused on:
- Revamping the user interface: Visual elements to make it more intuitive and visually appealing, improving overall user engagement.
- Introducing new features: Implemented features such as personalized recommendations, social sharing options, leaderboard and marketing CMS to enhance the user experience and encourage community interaction.
- Balancing diverse user needs: Conducted extensive user research to understand the needs of different user groups, including experienced cyclists and beginners. This helped me create a platform that catered to all levels of users without compromising the overall experience.
After 5 months of iterative design and A/B testing, we launched a new SaaS platform. Our strategy of providing personalized landing pages for each challenge/event, featuring dynamic sections and static banners, proved effective. Today, the platform showcases a refreshed brand identity, enhanced user experience, and innovative features.
In addition to this, I’ve defined a simple design system around colours, typography, pairings, modules, spacings, and components. This collaboration was so successful that Togoparts’ marketing team has entrusted me with designing a suite of sub-products, including their in-house Cross-Platform Push Notification System that can be cater to all or specific group of users, offering premium features based on user data (will discuss this another case study)
Key Learnings:
- Versatility and adaptability: Successfully juggled multiple roles.
- Effective communication: Maintained open dialogue with stakeholders.
- Prioritization and resource management: Balanced demands and delivered on time.
- Agile development: Adapted to changing requirements.
Before I could help Togopart, I needed to understand who is Togopart. I started my discovery process by getting to know the market, the company, and its users.
Analysis
Research started by analyzing the market, competitors and identifying Togopart’s current position. We analyzed quantitative information about how people were using the web app. This included audience data, retention and referral data, user behavior, and examining standard user flows and conversion points. Luckily the site was linked with Google Analytics which also provided valuable clues about how riders interacted with the app, revealing where they got lost or abandoned their journeys.
Research
We carried out both user and team interviews to better understand why and how people are using Togopart. Insights from the growth, partnerships, customer support teams, and users helped us define target personas. These personas allowed us to better respond to each customer’s different challenges and highlight what Togopart does better than its competitors.
Home (old site)
Home (old site)
Mobile old app
Mobile old app
Leaderboard old site
Leaderboard old site
After the kick-off call, I created a Google Document and shared a Figma file, which helped us efficiently discuss and refine company details, terminology, fonts, colors, and design styles. This approach prevented overwhelming the key stakeholders with messages and ensured they felt involved in the project from the start.
Product Management Assistant 🤗
Jira was our central tool for crafting a comprehensive project schedule, defining milestones, and outlining deliverables. Working closely with product lead, I meticulously assigned sprint weeks and parent issues tasks. We established clear workflow statuses and ensured all team members were assigned relevant user stories for seamless collaboration.
- Tech-savvy & Mobile-first: Smartphones are their go-to for cycling needs.
- Community Craving: They desire connection and shared experiences.
Budget-Conscious: Value for money is a priority (used equipment marketplace). - Event Enthusiasts: Diverse cycling events catering to various skill levels.
- Efficiency Seekers: A smooth and user-friendly experience is key.
Apps like Eventbrite and JomRun offered neat time-saving features, while Stridekick impressed with its user-centric design. However, the overall landscape felt…rough. Many apps lacked intuitiveness, and several grappled with delivering truly user-focused solutions.
To enhance user experience across different devices, I choose to implement a responsive layout that seamlessly used a two-column fluid layout for each section, which stacked into a single-column view on smaller devices. The Leaderboard page was a critical component of the Togopart redesign, requiring careful consideration of user experience and data visualization.
Despite the challenges associated with designing a data-rich page, but through iterative concept creation and revisions, I achieved a clear, concise, and user-friendly structure. Continuous user feedback and testing throughout the process ensured the final design effectively met the needs of Togopart’s cyclists.
To enhance the mobile app, I implemented a hybrid approach using native and custom solutions, ensuring compatibility across iOS and Android platforms. Working closely with the team, I focused on a globally-appealing design that prioritized spacing, typography, and color systems for an optimal user experience.
To maintain consistency with the desktop app, I replicated key features like live chat, real-time leaderboards, customizable chat boxes, multilingual support, and live translation. By streamlining the design and restructuring elements, I aimed to provide a seamless and intuitive mobile experience for existing users.