Sport360.fit

The project 

Lifestyle magazine Sport360.fit mainly speaks to the women of Dubai. Its parent company already had a successful sports magazine read mostly by men. However, they realized a lot of women read their health and fitness related content, so they decided to create a separate product for them. 

In October 2017 we partnered with Sport360.fit for a three-month project to design a responsive website and companion mobile application. Among Dubai magazines to this day, only they rely on influencer content, while in the app, users can contact influencers for advice, tips etc.

The team

At UX Studio, we mostly work in pairs: a designer and a researcher. This vast project had a tight schedule, so we worked as a bigger UX team: four designers and four researchers. We also collaborated with a large team from the client in Dubai and their developers in Spain.

1. Kick-Off

Two of us flew to Dubai for a two-day kick-off meeting. There we mapped out the project scope and potential fears and gathered some knowledge about the market and the target audience. For this we used

• user stories and personas
  
• user journeys
  
• competitor analysis
  
• brand personas

2. Information Architecture

Back home, we built up the information architecture and held several brainstorming workshops. We had to cover a lot of categories and subcategories also keeping in my how users group information. 

We also had to keep in mind that the mobile app had additional features such as following influencers or chatting with them. 

1. Axure Prototypes 

We built up functional prototypes for both the mobile app and the website. These prototypes were tested each weak to pinpoint usability and other issues. 

The Problem
The biggest challenge was the menu structure of the mobile app.
We had a hamburger menu which highlighted the content of the site and a bottom navigation which relied more on the app's functionality. 

The Solution
In the end, we went with the bottom navigation because users found what they were looking for much quicker. 

2. Marvel Prototypes

While working on the detailed UIs we were continuing with the user tests each week. Week by week we added the new screens to a Marvel prototype. Since the core functionality and navigation was already set we could focus on minor UI elements and smaller issues. 

The Problem
Our biggest discovery came from a pure cultural difference: For a bilingual website, we assumed users would find the language selector quicker if we used flags. We chose wrong. User tests showed that some people found that offensive, as many countries use the Arabic language and one particular flag would not identify it. 

The Solution
So, we dropped the flags in the next iteration. Since we used only two languages, we got rid of the dropdown too. In the new version, clicking on the shortened written name of the target language would switch languages. The next usability testing sessions proved it a great solution because the users understood it very well.

The Problem
The platform has many mix-and-matchable content types: articles, videos, slideshows and photo-galleries. While we could easily put a video in an article or make an in-text photogallery, we had more complicated content types as well. The slideshow containing a whole photo-gallery on one slide caused us the most headaches, e.g. more complicated exercises had to be explained with a series of photos.

The Solution
We started with the simplest solution and worked our way to the end result. We played with the slideshow's look and prev/next buttons, also the indicators in each iteration. Our favorite was the third version but we had to make a compromise with the client so we ended the whole process with the fourth version.

1. Look and feel

Since the site mainly targeted women, the client wanted to go for a light, friendly (even a little cute), fresh-yet-traditional look and feel. We created four different versions of the home page to show our ideas, then had a workshop with the client to get feedback.

2. Detailed UI Screens

After they told us which UI elements they liked from each version, we combined them to create the final version.

3. Illustrations

We pinpointed some steps in the user journeys where people experienced outbursts of emotions – such as excitement or frustration at the end of the influencer application process or when seeing error states. We wanted the applications to reflect these emotional states. In harmony with our look and feel, we created some cute illustrations to make people smile or to lower their stress level.

1. Always test with the right target audience

In most UX projects this goes without saying, but here it gained even more importance. Having limited knowledge about the culture and the market, our target audience gave us crucial insights which we wouldn’t have gotten otherwise.

2. Create a precise schedule for a short-term project

Plan out every team members’ task day-by-day if needed. This avoids two designers working on the same screens simultaneously. Plan so designers can use each other’s assets and screens to speed up collaboration.

3. Keep flexible in collaboration

We all have our preferred working and communicating methods, but if the client wants to introduce something else, don’t say no right away. Start using it, test it, see if it works. You never know, you might end up with a method you’ll love later on.

4. Don’t fear trying out new tools

Implementing new tools during a live project can overwhelm, but you don’t always have the time to try them out beforehand. If you have an inkling that another tool might work better, use it and avoid the infinite loop of “coulda-shoulda-woulda”.

5. Pay attention to details

Create a user journey and identify points to introduce little delights (illustrations, feedback screens). Forming a personality for a product is not only fun, but it will engage your users in a whole different way.