Sportnio Web application

Project type:
Web-based app

My Contribution:
UI/UX Design

Tools used:
Figma, Jira

Project timeline:
Jun - Dec 2020

Sportnio is an online platform and geosocial network application that connects sports lovers. The product focuses on two primary target users: the team leader in managing and coordinating the team; and players in connecting with others and finding pitches.

↑
↑
↑

The problem

Our team come together believing that getting to play sports should be easy, fun and simple. However, in Vietnam, there was no community for sports lovers and a lack of reliable information; therefore, players had no motivation to do sports.

Our solution

Creating an online platform and geosocial network application that connects sports lovers. The team, including 1 digital designer (me), 1 product manager, and 3 developers, collaborate remotely in different time zones (UK - France - Vietnam), using Jira to track and record the progress. This phase of the project mainly focuses on encouraging people to do more sports by teaming up them together, making it easy for players to find a venue to hire at the last minute.

Our Sportnio team - Jira dashboard

Define target audience

‍The product has 2 main target users: the football player and the team captain; therefore, we decided to create user stories for each target user to ensure we didn't miss any user's needs.

Some of the stories that the team produced in the brainstorming stage

Story 1 - "As a user, I want to sign up and log in to the system"

Both player and team caption have the same login and signup flow.

Design system

While designing the Login/Sign up interfaces, I also started building the first components for the design library to contribute to the product design system. Though at this stage of designing, we only focused on the mobile web app, we would soon develop the desktop version of the product. Therefore, I included some elements like hovered state and focused state for the UI inventory.

Sport.Nio Design system v1.0

Story 2 -"As a player, I want to view available venues to hire and team to join."

Home screen for "the player" with essential functions such as browsing and searching.

Story 3 -"As a player, I want to view a team's information with matches and statics."

Team detail screen

Design system update

At this stage, I continued to "design" the design system, adding a few new components and implementing the interface a bit to ensure everything was consistent and accessible. This stage also involved the product manager and other developers giving feedback and ensuring everyone was on the same page. With this primary library, I could reuse the components to speed up the process and communicate better with other developers.

Sport.Nio Design system v1.1

Sportnio Webapp