Strafe
UX-UI
Strafe is the first esports tracking App for iOS and Android. Strafe provides a gamified experience with results, schedules, tournament info & statistics for major esports titles.

Platform:
iOS/Android
Duration:
2018/5 – 2018/8
Role:
UX-UI Designer (Consultant)
Method:
Agile + Lean UX

Platform:
iOS/Android
Duration:
2018/5 – 2018/8
Role:
UX-UI Designer (Consultant)
Method:
Agile + Lean UX
Introduction
Esports is growing, and so does Strafe
Esports has made a significant impact on the video game industry with live streaming, increased amount of titles and large-scaled global tournaments. Strafe started as an esports tracking App, where users can follow tournaments and keep up with the news about their favourite teams/players. Strafe is also a prediction game platform with a ladder of 50,000+ esports fans. Fans enjoy the thrill of the esports in two ways:

  • Esports companion App Strafe that helps fans to track selected titles and stream live-tournaments as well as dive deep into detailed match-stats.
  • Esports prediction game Strafe Score to make esports tournaments more engaging and fun.

  • The Problem
    Strafe Score is the feature that drives the engagement of esports fans to Strafe App. Current version is widely embraced by 50,000+ active players per month. However, engagement of players during monthly tournaments (Strafe Score Seasons) drops, as the gap between the players in live-leader board grows. Strafe Score is a system where correct predictions of every video-game title rewards players to be at the top of the leader board. Strafe Score's current dynamics has encouraged players to be interested in a wider-range of video-game titles. However, having a large number of active players of various game-titles have some challenges:

  • Global-coverage of tournaments means matches to be tracked during late-nights. Esports tournament locations affect the gameplay and performance on Strafe Score.
  • Having a competition of all the players in one-division and being rewarded for every title makes the game challenging. Longer seasons make it harder to close the gap.
  • Esports fans love to talk about esports titles and interact with each other. Strafe Sports profiles are focused on user-statistics rather than personality.
  • The Solution: New Strafe Score
    I had the chance to collaborate with the Strafe Team for a short-and-fun 3-month period with the complete design thinking process to increase esports fan engagement of Strafe Score. During my time with Strafe, I have created an efficient visual design workflow including Sketch Library, Wireframe generation and Zeplin for collaboration with developers. We have introduced new features and set-up a user research framework for addition and discovery of new-features. New Strafe Score features aimed to engage esports fans with:

  • New Strafe Score Leaderboard: Multiple leader boards for each video-game title to increase engagement of title or game-type focused audience. Divisions and multiple-levels to involve a wider-range of the audience in the thrill of the competition.
  • Friends feature to increase interaction and engagement of friends. Strafe Score to display how a fan compares to friends, making the seasons more fun.
  • Brackets (playoffs) are decided during tournaments, making it hard to follow and predict real-time results. Prototypes of pre-bracket predictions for comparison.
  • The Process
    Research: Contextual Analysis, Surveys (Global esports fans), Video Interviews (Q&A, presentation, feedback), Focus groups (e.g. Top-ladder), Data Analytics
    Ideas: User Journey Map, Personas
    Design: Design for Localisation, in-App Onboarding, Heuristic Evaluation, Sketching, Design System, Wireframing & Zeplin
    Prototype: High Fidelity Prototype, Working Prototype (Staging)
    Test-Produce-Evaluate: User Testing (individuals), Field (Feature) Testing, Functional Testing, Testing & Bug Reporting
    Research of Prediction
    Popularity of Strafe as a gamified esports platform has been growing within a global audience. The research process started with the contextual goal-analysis of Strafe fans. Initially, a focus-group of highly-engaged users (top-players) were interviewed initially to understand repetitive pain-points related with game dynamics. A group of Strafe Score players from different continents, age-groups and occupations were selected initially. Video-interviews were carried out remotely involving 3 people (1 conductor, 1 interviewer, 1 esports fan); these interviews were later scripted in order to find common-patterns and frictions based on parameters (location, age, individual conditions). The questions were aimed to gain insights on daily gameplay patterns, personal friction points, interest in esports, real-life interactions of players and esports-related goals. The interviews concluded with a short-presentation of features discovery and open-ended questions which resulted in unique and meaningful feedbacks.
    Ideas: Predicting the Feature
    Interviews have provided insights about how playing Strafe Score fits into the daily routines of the players, their goals and what drives them to play at a competitive edge. Learning friction-points of the current version of the leader board helped ideation of game-title focused features. Interviews have shown that friend-engagement increases overall-engagement, even when the competitors are not at their peak. Some of the ideas to discover were:
  • Odd & Streak mechanism to reward players who predict the least-probable correct results consistently.
  • Friends feature to keep in touch and to compete with friends. Turns out it is also a way to find esports fans who share similar interests.
  • Pre-bracket predictions (discovery phase): Matches at the higher ladder playoffs are decided during the tournaments at a different time zone. Pre-bracket prediction is a way to reward players who come first.
  • Boosters (discovery phase): Interviews have shown that competitive players prefer personality over pay-to-win mechanism. A possible way to gamify Strafe Score further is to limit the number of boosters to be used at a critical point of the season.
  • Divisions (Leagues): Since the number of active players are over 50,000, players have the tendency to lose interest during the season. In addition to shortening the duration of the season, divisions and leagues similar to the league mechanisms of popular game-titles would keep the competitiveness high continuously.

  • Design: Visual Iterations on Strafe Score
    Even though I have been involved with User Interface design of the library components and new-feature screens, my focus had been on improving the user experience. Branding and visual design guidelines were not updated during my consultation sprints of Strafe Score. Initially, a library of wireframe components of Sketch App was built to increase interactive collaboration with other stakeholders (including PO and developers). Visual-design workflow in Agile sprints included iterations of high-density assets made for new Strafe Score features, such as Friends functionality. The assets included onboarding, multiple-states of screens (empty, logged-out, etc.), which finally formed high-density wireframes built by 'Overflow' App. Zeplin boards were grouped and named based on features/sprints to create a reference point when working remotely with developers.

    Test - Produce - Evaluate
    Interactive high-fidelity flow diagrams (built by Sketch App itself) form the initial and the basic prototyping of different user-states. However, discovery of new features and micro-interactions required more specificity and higher-fidelity for testing and presentation purposes. Discovery prototypes were built using Principle App to compare possible mechanisms of pre-bracket predictions. Strafe App has 2 native mobile applications (iOS & Android) and I had been available to support the development team during development-phase with questions or when modifications were required. Internal testing includes testing of both applications on staging environment and all platforms have the same feature-set and visual style aligned with relevant design guidelines. Evaluation and testing of the product features is a continuous process, which involves a focus-group for user-testing. Here are some of the images & prototypes built during the discovery phase of new features:


    Conclusions
    Strafe is an exciting project that keeps up with the growth of esports built on a solid foundation. I had the chance to work as the only product-designer as a member of a collaborative team. Setting up user-research methodology, synthesis of new ideas and improving visual design-workflow have been efficient and fun processes. During user-research we have learned a lot about the transition of an esports player to an esports fan, who needs to time-manage smartly. Strafe fits in very well to the transition from the enthusiasm of youth to responsible-fun of adulthood. Both of the core-functionalities (tournament tracking and prediction game) are balanced and future-challenges will be about having a larger user-base, localisation for the global audience and improving the dynamics of competitive edge. I think Strafe is looking to a bright future on following subjects:

  • Number of esports titles and their tournaments are increasing globally. As these numbers increase, Strafe Score would iterate into localised leagues and providing localised content.
  • Esports fans are evolving from players to spectators. With such growth the product might consider becoming an esport 'fantasy league' and branch out to different products.
  • Esports fans would like to see content from different sources curated at Strafe. Exclusive-content and future tournaments can become a part of the user experience in the future.