Reading time: 8 minutes
The municipality of Amsterdam believed that there was a lack of overview of sports activities happening in Amsterdam. I designed a mobile website that provides an overview of all the sports events happening in Amsterdam. During this short project, I was responsible for the design of the concept, the information architecture, and the UI of the website.
My role
The project was already defined when I started working on it. However, I did conduct brief research to clarify the problem a bit more. During the project, I was responsible for designing the information architecture and the corresponding wireframes for the concept. A bit of visual design was also part of my job.
About the City of Amsterdam
In 2019 I worked together with the Sports Stimulation department of the City of Amsterdam for 5 weeks. Sports Stimulation works on an accessible sports environment for all citizens of Amsterdam, where everyone can find the offer that suits him/her and can enjoy the sport with pleasure. The Sports Stimulation department had the desire to bring the entire range of sports activities from events to workshops at the center of attention through a mobile web site. Why, because they think that the amount of people participating in a sport in Amsterdam is too low. Many initiatives within the city have something to do with sport but often an overview is missing: people do not know what kind of events are happening.
After studying the project briefing provided by the City of Amsterdam and attending a kick-off meeting on-site, I decided to conduct interviews with people living in Amsterdam to find out what their needs are when it comes to finding sports-related activities. Because the project was only five weeks long, I decided to conduct so-called guerrilla interviews on the streets of Amsterdam. Within UX design, guerilla research is a quick and relatively inexpensive way to acquire sufficient insights to make informed decisions. That is exactly what I did during this project: going into Amsterdam for a day to speak briefly with many people.
I conducted interviews on parents with children and adults without children. I asked them about their way of finding sports clubs and sports events. The results were quite interesting.
People often don’t look online when researching sports clubs. When people want to join a sports club, they often just ask friends that are a member of a sports club about their experience, no digital interface involved. For sports events though, people tend to look online more often than they do for a sports club.
People, and especially children, need to be motivated to start doing sport. A sport has to be attractive to them. Children don’t want to sport because ‘they have to.’ Instead, they want to have a good time together with others (friends).
Children don’t do online research about a sport themselves. If online research is going to happen, the parents of the children do this.
People don’t want to travel far to a location where a sport takes place. They rather stay in their neighborhood to participate in a sport.
Some people know exactly what sport they want to do, while other people are not sure yet what sport they are interested in. An online overview could help both people reach their goals.
Since there was more potential for a website related to sports events and less for sports clubs, I decided during this project to focus on designing an overview of all sports events that take place in Amsterdam. Also because the municipality of Amsterdam already has a website that provides an overview of all permanent sports facilities, including clubs (https://maps.amsterdam.nl). That is why the solution I designed had to provide an overview of all sports events in Amsterdam so that people would become enthusiastic to participate in an event.
Now it was clear where the new website could offer a solution for the inhabitants of Amsterdam, I grabbed pens and papers and started sketching different screens that could be part of the new website.
Drawing possible screens for the concept in many variants made it clear to me which screens I should and should not continue with and how it would fit in the overall website. This way of working is very efficient. You can quickly sketch a screen. Going directly behind the computer and designing high fidelity takes a lot more time. If a selection already has been made with quick sketches of screens, a lot of time will be saved.
But eventually, it was clear how the overall website could look like. Down here you see a sitemap of my concept. It's a list of all the pages of the website. This sitemap helped me to make a high-level overview of the website.
When the sitemap of the website was laid out clear and the sketches of the screens I was going to use for the website were collected, it was time to start with designing high fidelity wireframes. Down here, together with flowcharts and screenflows of high fidelity wireframes, I explain how the website helps people living in Amsterdam to find new and exciting sports events.
Directed search for an event – People who already know what event they are looking for can search directly for a specific event.
Exploring events using casual browsing – People who don’t know exactly what kind of event they are looking for are also covered with the website. Using an exploration wizard that applies a search strategy called casual browsing, they can discover events that meet their requirements.
The goal of my concept is to help the people living in Amsterdam find interesting sports events they can join. The concept is capable of performing a directed search but also supports casual browsing. The user can view events in both a list and a map. Also, the user can easily filter and sort the events so he can quickly find the event that is perfect for him/her. Down here a selection of high fidelity wireframes of the result.
And down here some annotated high fidelity wireframes referring to different pages in the previously showed sitemap.
Now that the information architecture and the interaction of the new website were designed and there were still a couple of days left before the end of the project, I decided to do at least some visual design for the website. It was time to translate some of the high fidelity wireframes into visually designed screens. This was not initially something that was going to be done during this project. The Municipality of Amsterdam and I agreed that at this stage of the project well-designed functionalities on the website were more important than visual design.
I decided to go for the screens shown above here in the flowchart. This is the piece of flow starting from the results screen when a user searches something to the detail page of a specific event. Also, as you can see in the video, I designed some animations for the piece of flow. This is not only for the sake of beauty, but also to benefit the user experience. Well-applied animations in digital interfaces ensure a logical flow for the user. The chance of a user getting lost in an interface is reduced.
Experimenting
During the project, I discovered several options that could potentially lead to an increased conversion with the website. This makes it more interesting for sports event providers to place an event on the website. I have explored so-called seduction principles. Principles that may result in visitors being tempted to participate in an event.
Note: this is purely an experimental exploration. It should be said that all the possibilities mentioned below should be reconsidered when further designing this website.
At the end of the project, I presented my work to a council of people working for the municipality of Amsterdam. I went through my design process and explained why the website I designed improves the current situation. The reactions were very positive. It was indicated that the possibilities for further development will certainly be considered.
Because this project lasted only a few weeks, it was not possible to work out the concept in detail. Because of the time, the concept is therefore designed on a conceptual level. Of course, more tests and iterations need to be carried out to show whether this concept adds value to the wide range of people who live in Amsterdam.
Also, I estimate that during any further development of this concept, the municipality of Amsterdam may wish to use their already existing design system and brand guidelines for the website to be consistent with other digital communications within the municipality of Amsterdam. I did not take this into account when designing this concept, because the municipality of Amsterdam had the desire to experiment with the possibilities in the field of visual style.