Usually target user groups tend to be somewhat narrow, but as Sport Mates enables the creation of sporting events for all levels of play, there is no reason to have a narrow target user group. Everyone who is looking to get active is welcome to create or join a sporting event is welcome to use Sport Mates. The only tech savviness users really need is the basic understanding of website navigation. Since it is important to bring sporting activities to everyone, Sportmates is aimed for people with all kinds of backgrounds and sporting ambitions.

Sport Mates has two primary use cases: creating a sporting event and joining an event. These use cases can be divided into the following steps:

Use case 1: Creating a new event

1. User sign in to the service using email address and password
2. User clicks the “Create an event” button.
3. An event creation form is shown to the user.
4. User fills in the fields regarding the event details and submits the form.
5. The just created event is now visible to others.

Use case 2: Joining an event

1. User sign in to the service using email address and password
2. User clicks the “Create an event” button.
3. An event creation form is shown to the user.
4. User fills in the fields regarding the event details and submits the form.
5. The just created event is now visible to others.

Design technologies used in this project were Figma for fast layout design and Webflow for interaction design and prototyping. Figma is an intuitive tool for collaborative layout design and enables you to flesh out mockups in hours and develop them collaboratively. It also allows getting CSS of values of elements. However, we didn’t need to use this functionality as Webflow has a similar one. Lastly, Webflow is best used for prototyping actual websites due to its unique tool kit. With Webflow you can create actual websites with interaction which then be used as such or these websites can be used simply as prototypes or wireframes for projects that need complex backend implementation.

Structure of the site

User interface and user experience

The website user interface which takes inspiration from clutterless and simple design with pleasant colors. We designed the UI desktop first which did cause some hick-ups but in the end the mobile version’s UI looks and feels good to use.

Interactions consist of subtle on-click and hover interactions to improve the user experience through satisfaction and usability. For example, when pushing a button, the button’s border will be highlighted and on hover it will change to a darker color.

Navigation is done using buttons on the landing page and on the main page. On the landing page users have the ability to take a sneak peek (using the “sneak peek” button) of the main page but won’t be able to create or join events. Moreover, the landing page has the standard register and sign in buttons. The objective of the landing page is to quickly provide users an overview of the website and get them to register or sign-in to the website as quickly as possible. The sneak peek functionality is a great way of easing users into the website without them needing to register first. If they liked the website they might opt to register.

On the home page users see the events based on their sport preferences. If preferences have not been chosen the events shown first will be based on the events geographical proximity to the user. On the top right corner there three clickable elements: create-an-event button, sign-out button and setting menu. Both the create-an-event button and the settings menu open a pop-up window. We wanted to have as much of the functionalities on a single page and pop-windows serves this purpose well.

Fonts and colors

Font used for the UI is “montserrat” by Julieta Ulanovsky, Sol Matas, Juan Pablo del Peral, Jacques Le Bailly which is free to use both for personal use as well as commercial use and is endorsed by Google. The font is used in this design document as well. It is easy to read and pleasant to the eye. The two main colors are a neutral light blue and pure white. Light blue and pure white is a tried and true color combination that works perfectly here as well.

Front-end

Sportmates was designed to be a Single Page Application (SPA) in a web environment. This is because web applications are platform independent and enable easier and faster development and deployment to multiple platforms and operating systems.

As a core technology in the client side we used React, because of its capabilities to create modern and performant SPA and also because of its popularity, which is reflected in a wide community support. From an architectural point of view, React handles many things from the user interface components all the way to the view controls and server calls.

Back-end

For backend, we chose Node.js with Express web application framework. The reasoning behind this choice is that it’s an easy to use, modern framework that works very well with React frontend as both technologies are based on Javascript and exchanging information over the internet in JSON format is natural. We also have previous experience with Node.js.

This kind of service needed database to store all relevant information of user and event content in. We chose MongoDB for our database program. As the data structures and the tables and their relations are not very complex, a document-oriented database is a suitable choice. MongoDB is quick to set up in the cloud and can also be easily integrated into a Node-express backend with high-level ORM-libraries.

Because the nature of sports is to be always on the move, it is really important that the user interface is designed for portable devices. Responsiveness is important since many use their smartphones more web surfing than actual computers.

The user interface on smaller devices the landing is positioned vertically instead of horizontally, to retain the readability of the text. The buttons scale according to the viewport width and the font sizes are smaller on smaller screens.