OM - Brand replatforming
Rebuilding the digital experience
< Prev
Case 02 / 03
Next >
Context & Goals
The Olympique de Marseille Football Club came to Emakina with the goal to continue their digital transformation by renewing their brand and technical platform. Led by its new Head of Digital, Frederic Cozic, the club is rethinking their market and the way they are addressing it. He thinks that the club should have a data centric approach to enhance OM brand experience and ultimately their customer experience. When they came to us their website was ageing through its design, it looked like an old WorldPress template with a hazardous information architecture. As the project already begun on their side and the football season starts in August, we had a really short time to deliver and put live the expected website and mobile application.
Team & Stakeholders
- 1 UX Designer
- 2 UI Designer (1 for the Website & 1 for the App)
- 1 Consultant
- 1 Projet manager
- 1 Product Owner at Olympique de Marseille
- And the Developers
Timing
- 10 weeks Design
- Mai-Jully 2019
Responsabilities
- Arboresance & Information Architechture
- Ergonomy
- Experience design
- User research advisor
- Backlog
Problematic & Challenges
They came to us in March, to begin the work in April and to deliver a first version of the website for July, before the beginning of the football season. So the real challenges were about time and prioritisation, what the user needed the most and what the client needed the most the user to access. The critical problematics were : How do we do that ? How do we organise ourselves to deliver good materials fast ? How do we prioritize the content and features ? The other challenge of this project was that Emakina is based between Paris and Limoges and the OM is based in Marseille, so all the communication were remote.The last one was how do we enlarge the OM customers to a community attached to their new brand vision while keeping the old fan base composed by football lovers? In their brand experience, the Olympique de Marseille wanted to emphasis on their community, called OM Nation.
Timeline
-
W1_Concept/website
- Personas
- Typography benchmark (international use)
- Arborescence / Wenu (Website)
- Listing template (Website)
- Batch versionning (Website)
- Priority Guides (Website)
-
W2_Prototype/website
- Priority Guides (Website)
- Backlog ceation (Website)
- Themes & Epics
- US templating
- First glance of Mockups (Website)
-
W3_Prototype/website
- Priority Guides (Website)
- Information Architechture (Website)
- Backlog alimentation / US writing (Website)
- Mockup (Website)
-
W4_Prototype/website+app
- Survey to build the next personas
- Backlog alimentation / US writing (Website)
- Mockup (Website)
- First glance of the Website
- Arborescence / Wenu (App)
- Listing template (App)
- Batch versionning (App)
-
W5_Prototype/app
- Priority Guides (App)
- Backlog ceation (App)
- Themes & Epics
- US templating
- First glance of Mockups (App)
-
W6_Prototype/app
- Priority Guides (App)
- Information Architechture (App)
- Backlog alimentation / US writing (App)
- Mockup (App)
-
W7_Prototype/website+app
- Iteration on mockup (Website)
- Priority Guides (App)
- Information Architechture (App)
- Mockup (App)
- Asset production (App)
-
W8_Prototype/app
- Mockup (App)
- Asset production (App)
Solutions
Product organisation
As usual at Emakina we used a co-design approach but we couldn’t work with the same timing that we are used to. The solution was to get close to a product organisation with fast iterations with the project team and the OM stakeholders. Usually we work on Sprint, from conception to production and during the design sprint we share with the client team 3 days in the week. For this project we chose to exchange with the PO each time we finished a batch. The project team was composed of a UX/UI duo, a PM and a consultant for the Emakina side, and the PO at the client side. Aware of the short timings, I proposed to go further on the conception to relief the PM and PO of a part of their work by beginning the writing of the backlog. And to do so, we ruled together how we would write it and we decided the format of the EPICs and User Stories. Before starting, we did a brief step backwards to better understand the growth vision and their target by reworking on the personas and we created a survey for the international consumers to prepare for the next step (translating the website and addressing it for the Arab and Japanese users). After that, we directly hit the production of the website based on the older version and what new content and features the client wanted.
Website
So we began with the information architecture to get the arborsence. At this point we prioritized the pages to versionize the website releases, once it was done and validated by all the team and stakeholders, we started the design of the pages by batches which represented the website versions. As UX, I made the priority guides (a kind of Zoning with the content of each block), instead of wireframes, to be more flexible with the UI and leaving him a greater space of creativity. Once they were done, we discussed them with the UI and shared some ideas of layouts and after that we iterate on them with the team. Once they were validated, the UI worked on the mockups while I wrote the associated EPIC and User Stories. And again, we iterated on them as a duo first, secondly with the technical team, and then, as a team project before shipping them to development. All these discussions took place in JIRA and Google Meets for the talking sessions. As the design process goes faster than the developpement, we designed every panned versions of the website
Mobile Application
As soon as we finished our design work on the application, we went straight on the mobile application and did approximately the same work. Because of the agency context we were in, we had to switch off the UI designer with a more junior one, the first UI Designer was here as backup if needed. We began with the information architecture of the application based on what we’ve put on the website and what was on the old application. We thought with the team about which content and features would take place in the mobile app according to the global experience that we want to deliver to the users. Because the emphasis was on the community, one of the main features of the application was the gamification, that isn’t provided on the website yet. But besides that, we didn’t want to make a copy of the website as an app, even if some of its content will be, we had to focus on what the users will want to access and interact with in mobility. As we have already worked together and because a lot of the content produced for the website will be reused for the app, we tried to go faster on the app by delivering directly wireframes instead of priority guide, and to guide the new UI designer that had less experience than the first one, but because of its more advanced and precise level, the PO felt uncomfortable. He had the impression that he wasn’t building the solution with us anymore, so we did a step backwards on the priority guides so everyone could be comfortable and aligned with the conception. Once all the screens were roughly designed and validated, we worked the same way as the website.
Results
As I write this case, the first version of the website is live, the development of the application has fallen behind schedule but will soon be available (posted on the stores in 2 weeks). We built trustful and flexible work organisation by applying and learning from agility. The client is satisfied and we are working on a long-time collaboration. As an agency, we are very proud of the adaptability that we have shown and of the evolution of our mindsets and methodologies. We did answer to the first needs of our client and their users and, hand-in-hand with him, we will continue to answer their consumers and build a disruptive brand experience by enlarging it with the physical experience in the stadium.
Delivrables
- Workshops
- Design Sprint
- Personas
- User research survey
- Consumer journey map
- Information Architechture
- Priority Guides
- Wireframes
- Mockups
- Interactive Prototype
- Design System
- Recommandations
- Design Backlog
