PlayArena

PlayArena

PlayArena

PlayArena

A mobile app built with JavaScript to easily organize, manage, and join events.

A mobile app built with JavaScript to easily organize, manage, and join events.

A mobile app built with JavaScript to easily organize, manage, and join events.

A mobile app built with JavaScript to easily organize, manage, and join events.

MY ROLE

MY ROLE

MY ROLE

UX/UI Designer

Front developer

UX/UI Designer

Front developer

UX/UI Designer

Front developer

TOOLS

TOOLS

TOOLS

Figma

JavaScript

Figma

JavaScript

Figma

JavaScript

TEAM

TEAM

TEAM

3 Developers

3 Developers

3 Developers

DATE

DATE

2022

2022

SCOPE

SCOPE

SCOPE

8 days

8 days

8 days

Overview

CONTEXT

Coding bootcamp final project : MVP

At the end of our coding bootcamp with La Capsule, we had the opportunity to develop our own MVP.

During two weeks, we worked in team of 3 with Julien and Cédric, to prototype and code PlayArena Mobile App.

At the end of our coding bootcamp with La Capsule, we had the opportunity to develop our own MVP.

During two weeks, we worked in team of 3 with Julien and Cédric, to prototype and code PlayArena Mobile App.

At the end of our coding bootcamp with La Capsule, we had the opportunity to develop our own MVP.

During two weeks, we worked in team of 3 with Julien and Cédric, to prototype and code PlayArena Mobile App.

At the end of our coding bootcamp with La Capsule, we had the opportunity to develop our own MVP.

During two weeks, we worked in team of 3 with Julien and Cédric, to prototype and code PlayArena Mobile App.

OUR APP
PLAYARENA

OUR APP PLAYARENA

OUR APP PLAYARENA

An app to manage your events easily

Playarena is an app to organise and/or participate in events of all kinds (sporting, board games, cultural..)

Make it easy to search for and create events, save and add events of interest to your calendar, share it with friends and inforrm organisers your wish to take part in it.

Ultimately, the application aims to validate registrations using a payment system and provide a comprehensive monitoring tool for organisers.

Discover

MARKET
OPPORTUNITIES

MARKET OPPORTUNITIES

MARKET OPPORTUNITIES

Booming sector

Booming games sector: board games, sports, esports. Upward trend in recent years.

2020 : France is Europe's No. 1 board games market, with €630 M sales reprenseting a 10% increase compared to previous year.

3M Esport players : +15% sales in 2021

More than 16 million people take part in sporting events

.

CHALLENGE

Centralizing & Managing Diverse Leisure Events

Managing a clear calendar of leisure events—such as sports, board games, and cultural activities—presents difficulties, as users must consult multiple sources and manually add each event, leading to a fragmented and inconsistent experience :

Numerous sources are required, many of which are not mobile-friendly.
Manual calendar configuration is tedious and prone to errors.
Updates like postponements, cancellations, and access conditions are not automatically reflected.

Develop

USER STORIES
MAPPING

USER STORIES MAPPING

USER STORIES MAPPING

Focusing on user needs to prioritize features

We conducted a user story mapping session to develop a clear understanding of our two primary user groups:

Organizers: Focused on creating, managing, and updating events.
Players: Centered around discovering, participating in, and interacting with events.

This process allowed us to identify key tasks and prioritize features that directly address user needs. It provided a solid foundation for the design, ensuring alignment between user expectations and the core functionalities in our first wireframe iterations.

We conducted a user story mapping session to develop a clear understanding of our two primary user groups:

Organizers: Focused on creating, managing, and updating events.
Players: Centered around discovering, participating in, and interacting with events.

By identifying the key tasks and goals for each group, we were able to prioritize features that address their specific needs.

This exercise allowed us to identify key features and focus our efforts on delivering the most valuable functionalities for both organizers and players

We conducted a user story mapping session to develop a clear understanding of our two primary user groups:

Organizers: Focused on creating, managing, and updating events.
Players: Centered around discovering, participating in, and interacting with events.

By identifying the key tasks and goals for each group, we were able to prioritize features that address their specific needs.

This exercise allowed us to identify key features and focus our efforts on delivering the most valuable functionalities for both organizers and players

We conducted a user story mapping session to develop a clear understanding of our two primary user groups:

Organizers: Focused on creating, managing, and updating events.
Players: Centered around discovering, participating in, and interacting with events.

By identifying the key tasks and goals for each group, we were able to prioritize features that address their specific needs.

This exercise allowed us to identify key features and focus our efforts on delivering the most valuable functionalities for both organizers and players

We conducted a user story mapping session to develop a clear understanding of our two primary user groups:

Organizers: Focused on creating, managing, and updating events.
Players: Centered around discovering, participating in, and interacting with events.

By identifying the key tasks and goals for each group, we were able to prioritize features that address their specific needs.

This exercise allowed us to identify key features and focus our efforts on delivering the most valuable functionalities for both organizers and players

Player

Create an

event

Modify a

created event

Update game results

Invite participants

Publish a public/private

event

Organiser

Fill relevant

event info

Sign-up

Sign-in

Select preferences

Complete

profile

Check

organiser info

Add to

wishlist

Rate events & organiser

Share with friends

Search an event

Follow organiser

Participate

Check event details

LOW-FI
PROTOTYPE

LOW-FI PROTOTYPE

LOW-FI PROTOTYPE

Wireframes V1

Based on the insights from the User Stories Mapping, we created these mid-fidelity wireframes to visualize the core features and user flows for both organizers and players.

Given the time constraints, these wireframes were designed as a quick prototype to:

Test initial ideas.
Validate the user flow and core functionalities.
Identify areas for improvement early in the process.

Onboarding and preferences:

Allow users to personalize their experience by selecting their preferences at the application's launch.

Search an event

Users can browse and search for upcoming events without registration. Registration becomes necessary only when users confirm participation or save an event to their favorites.

View event details

Once participation is confirmed, users can access event details through the calendar icon in the bottom navigation bar. Saved events are accessible via the heart icon representing their wishlist.

Create an event

Users can organize public or private events by clicking on the CTA button, which redirects them to the event creation screen.

USABILITY
TESTING

USABILITY TESTING

USABILITY TESTING

Test procedure

To validate our low-fidelity prototypes, we conducted 30-minute usability interviews with 4 potential users. These sessions helped us assess the user journey and identify key issues and strengths.

We focused on:

Free navigation: Observing real-life user flow between screens.
Actions: Creating events, searching events by name, checking event details, and saving events.
Observations: Noting testers’ reactions, behaviors, and areas of confusion.

This ideation stage ended with a Crazy 8s. During this fast sketching exercise, we generated many different ideas within a short period of time and then began converging on some ideas to start working on our prototypes.

This ideation stage ended with a Crazy 8s. During this fast sketching exercise, we generated many different ideas within a short period of time and then began converging on some ideas to start working on our prototypes.

This ideation stage ended with a Crazy 8s. During this fast sketching exercise, we generated many different ideas within a short period of time and then began converging on some ideas to start working on our prototypes.

Anne Sophie, 32 yo – Fan of Board Games & Social Events

Pain points

Lack of clarity : onboarding, create events

Missing option to invite friends when creating an event
No reservation possible for several participants or families
Intention to participate, not a final confirmation
Some event details during creation are not necessary depending the type of game

Positive feedback

App name : Easy to recall and catchy
Filters search are considered relevant
Preview of upcoming events in the home page carousel
Possibility to explore the application prior registration
Ratings on events or organisers

FINAL LOW-FI
PROTOTYPE

FINAL LOW-FI PROTOTYPE

FINAL LOW-FI PROTOTYPE

WIREFRAMES V2

We took users’ feedback into consideration when updating our final wireframe to make navigation easier and optimise user’ experience.

Unfortunately, we had to maintain participation as an intention to participate rather than a confirmed booking as users would need to make a payment directly on the platform, but this was not a priority for the project.

We took users’ feedback into consideration when updating our final wireframe to make navigation easier and optimise user’ experience.

Unfortunately, we had to maintain participation as an intention to participate rather than a confirmed booking as users would need to make a payment directly on the platform, but this was not a priority for the project.

Deliver

FIGMA

MOCKUPS

REFINING USER EXPERIENCE

FIGMA

MOCKUPS

REFINING USER EXPERIENCE

Focus on User-Centric Design

These mockups were essential in transforming ideas into tangible interfaces, helping us validate and refine the app's design before coding.

App Development

Process

Development Process

Development

Process

Development Process

AGILE

WORKFLOWS

FROM SCRUM TO KANBAN

AGILE

WORKFLOWS

FROM SCRUM TO KANBAN

SCRUM : Rapid Implementation through Sprints

Utilized SCRUM to facilitate the rapid development of the application via short iterative sprints.
Defined & listed key functioalities in the form of user stories, prioritizing them in the sprint backlog for efficient development.

Utilized SCRUM to facilitate the rapid development of the application via short iterative sprints.
Defined & listed key functioalities in the form of user stories, prioritizing them in the sprint backlog for efficient development.

Utilized SCRUM to facilitate the rapid development of the application via short iterative sprints.
Defined & listed key functioalities in the form of user stories, prioritizing them in the sprint backlog for efficient development.

Utilized SCRUM to facilitate the rapid development of the application via short iterative sprints.
Defined & listed key functioalities in the form of user stories, prioritizing them in the sprint backlog for efficient development.

Utilized SCRUM to facilitate the rapid development of the application via short iterative sprints.
Defined & listed key functioalities in the form of user stories, prioritizing them in the sprint backlog for efficient development.

KANBAN : Progress Tracking Dashboard

Transitioned to Kanban to create a collaborative dashboard, enabling the classification and tracking of tasks across "To Do," "In Progress," and "Completed."

Ensured real-time monitoring of task progress and team collaboration.

SPRINTS

ORGANISATION

SPRINTS ORGANISATION

SPRINTS

ORGANISATION

SPRINTS ORGANISATION

Four 2 days sprints

Sprint Preparation:

Translated user needs into actionable functionalities.
Prioritized features based on user and business impact.
Distributed user stories across the team.

Implementation:

Conducted daily standups for updates and alignment.
Reviewed sprint progress at the end of each iteration.
Leveraged Kanban (via Trello) for transparent task tracking.

Determine a framework that facilitates the rapid implementation of a project through short development iterations, called "sprints".

List and describe the functionalities to develop in the form of "user stories" and classify them according to their order of priority. Those user stories constitute the sprint backlog

Determine a framework that facilitates the rapid implementation of a project through short development iterations, called "sprints".

List and describe the functionalities to develop in the form of "user stories" and classify them according to their order of priority. Those user stories constitute the sprint backlog

Sprint Preparation:

Translated user needs into actionable functionalities.
Prioritized features based on user and business impact.
Distributed user stories across the team.

Implementation:

Conducted daily standups for updates and alignment.
Reviewed sprint progress at the end of each iteration.
Leveraged Kanban (via Trello) for transparent task tracking.

Determine a framework that facilitates the rapid implementation of a project through short development iterations, called "sprints".

List and describe the functionalities to develop in the form of "user stories" and classify them according to their order of priority. Those user stories constitute the sprint backlog

DASHBOARD OVERVIEW

User stories classification : Sprint 4

By day 8, most of the primary user stories (red tag) had been implemented.

Only the functionality for adding an image to a created event wasn’t finalised

Prioritise app features

Prioritise app features

Prioritise app features

Prioritise app features

Login
Navigate the application
Search an event

Login
Navigate the application
Search an event

Login
Navigate the application
Search an event

Login
Navigate the application
Search an event

Filter results
View event details
Add to favorites

Create an event
Add a photo to profile and events

Create an event
Add a photo to profile and events

Create an event
Add a photo to profile and events

Create an event
Add a photo to profile and events

TECHNICAL

STACK

TECHNICAL STACK

TECHNICAL

STACK

TECHNICAL STACK

MVC Architecture

To build this mobile application, we used the MERN stack:

MongoDB

Express.js

React.js

Node.JS

Image storage on cloud

Cloudinary API

Securing sensitive user data

Uid2 Bcrypt

Front

React Navigation asyncStorage

React Native Elements

Back

Fileupload Uniqid

Add-on modules

Versioning

Git (version control software)
Github (hosting and collaborative development platform)

Local user data storage

Local Storage
Redux

Image storage on cloud

Cloudinary API

Securing sensitive user data

Uid2 Bcrypt

Front

React Navigation asyncStorage

React Native Elements

Back

Fileupload Uniqid

Add-on modules

Versioning

Git (version control software)
Github (hosting and collaborative development platform)

Local user data storage

Local Storage
Redux

Image storage on cloud

Cloudinary API

Securing sensitive user data

Uid2 Bcrypt

Front

React Navigation asyncStorage

React Native Elements

Back

Fileupload Uniqid
Add-on modules

Versioning

Git (version control software)
Github (hosting and collaborative development platform)

Local user data storage

Local Storage
Redux

DATABASE

STRUCTURE

DATABASE STRUCTURE

DATABASE STRUCTURE

MVC Architecture

Our database is designed to handle dynamic and interconnected data efficiently. By focusing on modularity and clarity, it supports user management, event organization, and interactive features seamlessly.

Two main collections:
- Users: Stores user information, preferences, and associated events.
- Events: Manages event details, participants, and rules.
Four supporting documents:
- Comments: Enables discussions on events.
- Teams: Organizes groups and guests.
- Matches: Tracks game details and scores.
- Rankings: Manages performance and rankings.

Our database is designed to handle dynamic and interconnected data efficiently. By focusing on modularity and clarity, it supports user management, event organization, and interactive features seamlessly.

Two main collections:
- Users: Stores user information, preferences, and associated events.
- Events: Manages event details, participants, and rules.
Four supporting documents:
- Comments: Enables discussions on events.
- Teams: Organizes groups and guests.
- Matches: Tracks game details and scores.
- Rankings: Manages performance and rankings.

Our database is designed to handle dynamic and interconnected data efficiently. By focusing on modularity and clarity, it supports user management, event organization, and interactive features seamlessly.

Two main collections:
- Users: Stores user information, preferences, and associated events.
- Events: Manages event details, participants, and rules.
Four supporting documents:
- Comments: Enables discussions on events.
- Teams: Organizes groups and guests.
- Matches: Tracks game details and scores.
- Rankings: Manages performance and rankings.

Our database is designed to handle dynamic and interconnected data efficiently. By focusing on modularity and clarity, it supports user management, event organization, and interactive features seamlessly.

Two main collections:
- Users: Stores user information, preferences, and associated events.
- Events: Manages event details, participants, and rules.
Four supporting documents:
- Comments: Enables discussions on events.
- Teams: Organizes groups and guests.
- Matches: Tracks game details and scores.
- Rankings: Manages performance and rankings.

Our database is designed to handle dynamic and interconnected data efficiently. By focusing on modularity and clarity, it supports user management, event organization, and interactive features seamlessly.

Two main collections:
- Users: Stores user information, preferences, and associated events.
- Events: Manages event details, participants, and rules.
Four supporting documents:
- Comments: Enables discussions on events.
- Teams: Organizes groups and guests.
- Matches: Tracks game details and scores.
- Rankings: Manages performance and rankings.

BACKEND

ROUTES

BACKEND ROUTES

BACKEND ROUTES

14 ROUTES

We listed our dynamic data and grouped it into two collections and four documents to structure the information of the database .

We listed our dynamic data and grouped it into two collections and four documents to structure the information of the database.

We listed our dynamic data and grouped it into two collections and four documents to structure the information of the database .

We listed our dynamic data and grouped it into two collections and four documents to structure the information of the database.

DEPLOYMENT

ENVIRONMENT

DEPLOYMENT ENVIRONMENT

DEPLOYMENT

ENVIRONMENT

DEPLOYMENT

ENVIRONMENT

DEPLOYMENT ENVIRONMENT

Project Tech Stack & Workflow

This diagram highlights the technologies and tools used for developing and deploying our application.

REGISTRATION

PROCESS

REGISTRATION PROCESS

REGISTRATION

PROCESS

REGISTRATION

PROCESS

REGISTRATION PROCESS

Registration process

User is asked to enter a username, an e-mail address and a password. If the username or e-mail address is already in use by another user, the backend will return an error.

PASSWORD PROTECTION

PASSWORD PROTECTION

Bcrypt Module

● Encryption of passwords stored in DataBase via hash function

Hash = character string returned and stored in DataBase instead of plaintext password

Verification = hash of password at login, and comparison with the one stored in the DataBase

Bcrypt Module

● Encryption of passwords stored in DataBase via hash function

Hash = character string returned and stored in DataBase instead of plaintext password

Verification = hash of password at login, and comparison with the one stored in the DataBase

Bcrypt Module

● Encryption of passwords stored in DataBase via hash function

Hash = character string returned and stored in DataBase instead of plaintext password

Verification = hash of password at login, and comparison with the one stored in the DataBase

Bcrypt Module

● Encryption of passwords stored in DataBase via hash function

Hash = character string returned and stored in DataBase instead of plaintext password

Verification = hash of password at login, and comparison with the one stored in the DataBase

Passwords stored in the database have nothing to do with the ones typed by users.Bcrypt incorporates a mechanism ensuring a password isn’t hashed twice in the same way: the "salt" used during hashing.

Passwords stored in the database have nothing to do with the ones typed by users.Bcrypt incorporates a mechanism ensuring a password isn’t hashed twice in the same way: the "salt" used during hashing.

Passwords stored in the database have nothing to do with the ones typed by users.Bcrypt incorporates a mechanism ensuring a password isn’t hashed twice in the same way: the "salt" used during hashing.

Uid2 Module

● Second security : token to identify users on the application

Registration = Backend generates a token and stores it in the DataBase (character string)

Browsing = verified at each request with the one stored in the store (or DataBase if reconnected

UX writing
alteration

Replaced “Learn more” with a straightforward “Why” to explain applicable fees. This direct approach aims to reduce confusion and potentially optimise user engagement with limit pages.

UX writing
alteration

Replaced “Learn more” with a straightforward “Why” to explain applicable fees. This direct approach aims to reduce confusion and potentially optimise user engagement with limit pages.

UX writing
alteration

Replaced “Learn more” with a straightforward “Why” to explain applicable fees. This direct approach aims to reduce confusion and potentially optimise user engagement with limit pages.

Main advantage of using a token is that it can be replaced, unlike the MongoDb Id.

Main advantage of using a token is that it can be replaced, unlike the MongoDb Id.

Main advantage of using a token is that it can be replaced, unlike the MongoDb Id.

SECURE

BACKEND

SECURE BACKEND

SECURE BACKEND

Frequent use of services requiring weak authentication for the backend, in the form of API keys (characters strings) and passwords to connect to the Database.

Securing API keys is essential as data should not appear explicitly in the backend code if it is shared or public.

A simple way of securing data is to use the environment variables of Heroku instance hosting the backend. The Heroku control panel is used to enter sensitive data.

Frequent use of services requiring weak authentication for the backend, in the form of API keys (characters strings) and passwords to connect to the Database.

Securing API keys is essential as data should not appear explicitly in the backend code if it is shared or public.

A simple way of securing data is to use the environment variables of Heroku instance hosting the backend. The Heroku control panel is used to enter sensitive data.

*We use Heroku control panel to store sensitive data.

AUTOMATIC

JESTING

AUTOMATIC JESTING

AUTOMATIC JESTING

Jest Framework

Testing was essential to progress serenely with our project.

We therefore set up simple and effective tests with Jest, a JS framework, to ensure our functionalities were correctly implemented and operational.

Testing was essential to progress serenely with our project.

We therefore set up simple and effective tests with Jest, a JS framework, to ensure our functionalities were correctly implemented and operational.

Testing was essential to progress serenely with our project.

We therefore set up simple and effective tests with Jest, a JS framework, to ensure our functionalities were correctly implemented and operational.

Testing was essential to progress serenely with our project.

We therefore set up simple and effective tests with Jest, a JS framework, to ensure our functionalities were correctly implemented and operational.

AUTOMATIC

JESTING

Reflection

Reflection

OUR MINIMUM VIABLE PRODUCT

During these 8 days, we managed to
develop the PlayArena App.

During these 8 days, we successfully developed the
MVP version of the PlayArena app

Our mobile app had a minimal frontend built with

React Native framework, and a backend using Express framework, interacting with MongoDb database.

Our mobile app had a minimal frontend built with React Native framework, and a backend using Express framework, interacting with MongoDb database.

The methods used - Agile and Lean - , enabled us to create a realistic prototype in a very short period of time, and helped us prioritise our features.

OUR MINIMUM VIABLE PRODUCT

During these 8 days, we successfully developed the MVP version of the PlayArena app

Our mobile app had a minimal frontend built with React Native framework, and a backend using Express framework, interacting with MongoDb database.

The methods used - Agile and Lean - , enabled us to create a realistic prototype in a very short period of time, and helped us prioritise our features.

During these 8 days, we successfully developed the MVP version of the PlayArena app

Our mobile app had a minimal frontend built with React Native framework, and a backend using Express framework, interacting with MongoDb database.

The methods used - Agile and Lean - , enabled us to create a realistic prototype in a very short period of time, and helped us prioritise our features.

During these 8 days, we successfully developed the MVP version of the PlayArena app

Our mobile app had a minimal frontend built with React Native framework, and a backend using Express framework, interacting with MongoDb database.

The methods used - Agile and Lean - , enabled us to create a realistic prototype in a very short period of time, and helped us prioritise our features.

Time constraints limited the scope of implementation, leaving some features for future iterations. Additional user testing will be crucial to better align features with user expectations and refine the overall experience.

Time constraints limited the scope of implementation, leaving some features for future iterations. Additional user testing will be crucial to better align features with user expectations and refine the overall experience.

Time constraints limited the scope of implementation, leaving some features for future iterations. Additional user testing will be crucial to better align features with user expectations and refine the overall experience.

Time constraints limited the scope of implementation, leaving some features for future iterations. Additional user testing will be crucial to better align features with user expectations and refine the overall experience.

THANKS FOR VISITING

I would love to help bring your ideas to life

Feel free to reach out !

Get in touch

Melody Dos Santos Borges

Let's shape impactful designs together & create valuable experiences for your users.

Navigation

Infos

2024 Melody Dos Santos Borges. All Rights Reserved.

THANKS FOR VISITING

I would love to help bring your ideas to life

Feel free to reach out !

Get in touch

Melody Dos Santos Borges

Let's shape impactful designs together & create valuable experiences for your users.

Navigation

Infos

2024 Melody Dos Santos Borges. All Rights Reserved.

THANKS FOR VISITING

I would love to help bring your ideas to life

Feel free to reach out !

Get in touch

Melody Dos Santos Borges

Let's shape impactful designs together & create valuable experiences for your users.

Navigation

Infos

2024 Melody Dos Santos Borges. All Rights Reserved.

THANKS FOR VISITING

I would love to help bring your ideas to life

Feel free to reach out !

Get in touch

Melody Dos Santos Borges

Let's shape impactful designs together & create valuable experiences for your users.

Navigation

Infos

2024 Melody Dos Santos Borges. All Rights Reserved.

THANKS FOR VISITING

I would love to help bring your ideas to life, feel free to reach out !

Get in touch

Melody Dos Santos Borges

Let's shape impactful designs together & create valuable experiences for your users.

Navigation

Infos

2024 Melody Dos Santos Borges. All Rights Reserved.

1.Overview

2.Discover

3.Develop

4.Deliver

5.App Development

6.MVP