Designing for a running event — Grand Raid 2020 — Case study
Helping runners to meet the race requirement and offer training advice before the event.
The Grand Raid is the most important race of the Reunion Island.
On the paper, The “grand raid Reunion” simply looks like one of the hardest mountain trails you can find.
In reunion, this annual running event carries an important social significance because the path crosses the island from the most important southern city to the “capital” passing by the two volcanic mountains in the middle. People train all year in the mountains for this event, runner are highly respected and participating is seen a life milestone accomplishment.
I choose to do a project on this event because the admission for it is complex, the required training intense and despite all the preparation a large number of participant (22%) have to give up. I think we can help people prepare better to succeed in this event.
This event is reserved for intensive runners.
The race is reserved for true running hero and trail addict as most people are likely to not have the physical condition to even qualify for it. But on the other side, it is very social and people come to support those who are participating.
In my app, I wanted to be able to help the runners complete the required steps but also encourage supporters to join on the adventure, going to supporter area and visiting the island.
In order to be a runner, you must first to win a lottery to be among the 2500 participants. You then have to qualify by doing two trail equivalent race of a 100points (1pts = 1km = 1m of uphill) and finally, you have to perform a medical assessment.
Project, Process and Research
In this mission offered by Ironhack Amsterdam, the requirement was to create an “event microsite” that would promote the event and have a different stage, before, during and after the event itself.
Because the “Grand Raid” is an outdoor event people are going to be outside in the mountains most of the time so I decided to create a mobile progressive application.
Self-organisation was the key to success.
This project was to be done in autonomy and while I received a lot of feedback from my teachers it was important for me to follow a tight production schedule and not fall behind.
I use this notion to stay organised and document my process along the way. As the amount of work was intense, it became the only way I had to know if I was on time with the deadline. The truth is this project is once I started to be late with the schedule I had to give on certain thing to keep up and deliver on time.
I conducted multiple tests before going to high fidelity
This project appeared to me has highly complex with multiple things to get right, such as the subscription process, the qualifications, the practical info of the event itself and the training info.
I knew that developing this app would require a lot of screens so I decided to say on paper and test on low fidelity as much as possible to avoid spending too much time fixing the final design. This was a crucial time-saver in my process and I could never be glad enough to have done it and really spent the time to make understandable low fidelity prototype that you can test.
Finding the right feeling
For my mood board I user imagery provided by the grand raid as well as some flat illustrations. My idea was to develop a colour scheme around the saturated blue of there logo, to use a few pictures and to add flat illustration with popping colours such as green, yellow and red.
Finally, I was greatly inspired by the work of Vlad E. on dribbble who helped me define a direction for the app.
Steps to create a unique experience
Once my low fidelity wireframe was created I jumped directly in high fidelity with building a design system following atomic design principles.
This for me was the other trick to save time, instead of growing from low fidelity and improving preexisting symbols, I choose to create a completely new set but with the maximum attention to details. The key when you build this way is to only finish a component once there is no other fix or improvement needed on it.
You can find and downloads all the assets with this Zeplin.
Icons and illustrations
I want to be a better graphic designer and I took on the path of building my own icons and illustrations, I could have potentially saved time by downloading a pack but it would have made the app feel more generic.
The key to this style is to remain simples with the shape as the people who are going to use will most likely be running. and incorporated a slight round of 1pts for each like icon in order to make them blend easier on the screen.
Cards, states and buttons
In my design process, I try to limitate as much as possible the number of different type of cards I would need in this app. One key to making sure this happens was too different background states (bold, active, silent and informative) to create and hierarchy within the elements.
Another visual cue that I use to help the user was to use a gradient of blue for every buttons and action possible on the screen. That way primary actions and input fields tend to stand out and appeal to the user as an action to complete.
The solution
The final application comes in 3 stages :
_The preparation before,
_The tracking during,
_The sharing after the event.
I spend most on my focus on the interaction before the event as it is the longest period in the life of this app.
Preparation is about 9 months, the race spans over 4 days and there is only a 3 month period before the subscriptions for the next year opens again.
Before the race
Before the race is all about getting the runner ready and making sure he gets the right racing information. He needs to complete his profile and his qualification and he is encouraged to run across the island as part of is training.
On the promotion side, I tried to increase the hype around the race with an audio podcast, the idea was that everyone would be able to hear how it feels like to do this race and what challenges you have to face. And because this event is also known as an occasion to see the island landscape I developed the idea of a hiking trip that you can take in 5 days and sleep in refuges. That way a runner can bring his friends on the training and have a proper discovery of the race track.
During the race
During the race, the tide shifts a bit.
The runners are going to be focussed on their effort, they are asked to keep a phone with them but to save battery, they will most likely not use it.
My approach was to only provide critical information, if you have decided to open your phone in this race the most likely reason is “emergency” and if you do so we will activate you phone GPS to act as a beacon for first responders.
You can also get important information about the status of the race, one of the dangers that can happen to you while running is to hear and believe a rumour such as “this checkpoint as been cancelled, it was a gift due to bad weather” as a runner you must not fail to them. We can help you do that by providing a single truth of information and a warning if you failed to checkout.
Stuff gets really exciting for the supporter during the race.
They get to take pictures and see lives picture of the event as they come through. A supporter can also see the lead of the race or search for a runner to follow. Once you do select someone you can access a special page that will give you his position and help you determine at which time he/she will arrive at one of the 3 supporter areas of the race.
The typical journey of a supporter during this event is to be there at night when the race begins, to go back home, wake up early the next day and go in the mountains to see their friends at one of the dedicated posts, and once he/she is gone to come at the finish line either the same night or the following day.
After the event
After the race, the runner’s account is no longer needed and the key goal is to share your accomplishment, you can find your runner finisher card that will contain our speed profile during the race as well as a picture of you doing it. The way we can achieve this is because runners carry a bib number and we can use computer vision to identify them on the pictures.
Desktop version
Because this is a web application I also imagined a way to expand the experience to the wider screen.
The system is built around 4 columns, and the first one is used as a navigation element. The idea with the desktop version is to keep the same information that is available on the phone but to use the screen as an advantage to emphasise certain elements.
What I keep from this project
Next steps
Despite this being intensive, there are still many screens that need to be developed as for example how would each training and the hicking trip look like. It was one of my primary goals to build the complete training program but the requirement of the first pages and of the user made it something that I didn’t have time to complete.
This app was designed for only half of the participant (the locals), in this race, there is also a section of internationals that come with a hotel package (don’t participate in the lottery) and also can’t train on the island itself. The future would really to be more inclusive and offer a section that would talk to all runners.
Then, there are also volunteer to help this race, it would be great to create a set of the page for there subscription, helping them reach the pit stops and organise the event.
Finally, I would like to go beyond hardware limitation for this project. For the phone app of during the event, I limited a to a maximum the app functionality because most phone or GPS smartwatch can’t hold a charge of 66h full usage.
But I really would like to also develop something that as a wearable integration and active health tracking during the race.
Learnings
This project was a huge exercise of making a UI a design system and interaction design.
However, the greatest lesson was to how to manage my time regarding what was needed. I definitely gave myself too much and reach my limit of what could be done in 2 weeks for this.
I really need to manage my personal expectation of the work I can accomplish or not in a given time for the next projects.
Credits
Videos and photos inside the prototype are provided by The Grand Raid and Unsplash.
