Nike - City Retail Tour
An internal Progressive Web App for Nike teams visiting Paris
Context & Goals
The EMEA market place development team at Nike France came to Emakina with the goal to promote and accelerate retail development onto their tours. Through 2 to 3 days tour that they organize, top management at Nike and partners go to visit their “Key Cities” to gather all the information about the retail, the market, the city and the products. And by retail we mean here all stores that sell Nike products, from the athletic specialists to department stores, such as Nike stores, of course, but also retail partners like Courir, Go Sports, etc. The documentation that was given to them was old school printed and stapled papers, so imagine what they all were doing with it…
Team & Stakeholders
- 2 UX Designer (an intern and me)
- 1 UI Designer
- 1 Consultant
- 1 Planner Strategist
- 1 Projet manager
- 5 Developers
- 1 Product Owner from Nike
Timing
- 5 weeks Design
- February-March 2019
Responsabilities
- Arboresance & Information Architechture
- Ergonomy
- Experience design
- Wireframing
- User tests
- Recommendations
Problematic & Challenges
The documentation was a guide, the “Paris retail guide” where a visitor can find all the information about each store, trade zone and consumers in Paris. When they came to us, the guide was in a pdf, not interactive at all, with more than 200 pages. The users of this solution were the City Tour Managers and the visitors who are stakeholders at Nike top management or Nike Partners. For the visitors it was complex to find the information within the 200 pages and for the City Tour Managers it was complex to update, to make evolve. Finally, it took a lot of time and effort to make, wasn’t used at its potential, so of course, it was not really efficient. The problematic was clear: Replace this pdf by something to offer a better and more efficient experience to the Nike Visitors and City Tour Managers. The key features were, for the visitors, to get information about the city, the tours and to leave feedback and, for the City Tour Managers, to create a tour and keeping the information up to date. But we had some challenges to overcome to achieve the user context. First, the visitor will be on trip, so he needs the right amount of information at the right moment. Often he’s a foreigner and doesn’t always have a local carrier. The second was to answer both of the personas. The third was more a business challenge about scalability, to easily scale the app for the different “key cities” around the world, to have in mind that the interface would evolve for different cultures and to think about technical architecture according to the interface.
Timeline
-
W1_Concept
- 2 Personas*
- 2 Customer Journeys*
- 2 Value Proposition Canvas*
- Key Challenges
- Design Backlog
- 2 User flow (app)
- Priority Guides *cocreated
-
W2_Prototype
- Information Architechture
- Iteartion on the user flows
- Iteration on the priority guides
- First mockups
- Prototypes
-
W3_Prototype
- Iteration on mockups
- Prototypes
-
W4_UserTest
-
made with Invision & Lookback
- Test Protocol
- Contextualised prototypes
- Survey
- PSSUQ Scoring
- Recommendations
- Backlog Review
-
W5_Iteration&Deliver
- Iteartion on mockups
- Prototypes
- First glance of the PWA
Solutions
A Codesigned PWA
As usual at Emakina we used a co-design approach with Nike teams. At Emakina we work on Sprint, from conception to production. At the conception the sprints are one to two weeks long similar to the GV Design sprint with different parting and timing. During the design sprint we share with the client team 3 days in the week. The design team was composed of 2 UX and 1 UI with the punctual interventions of the technical team to be sure that everything is achievable and numerous exchanges with the consultant to ensure that business and methodology are aligned. This approach was particularly effective with them as they were really committed and immediately convinced by it. We came up with a lot of ideas and focused on a common solution: a progressive web application with it:
- City Tour Managers are able to create, manage tour among the Nike’s and partner shops and update their city data.
- Visitors are able to find relevant data about the city, the consumers, their habits and the market and sharing feedback about stores
In order to manage on live different situations during the trip, we added a geolocated notification system. For iOS we plugged the notification system to the planning as an alternative solution for the moment (as many PWA features aren’t supported yet on iOS).
Iterations through user test
After several iterations by following the agile creative process during the ideation and the first wireframes, we generated plenty of ideas through the design sprints that we had to prioritise. Thanks to the constraints that we had to deal with, like limited time and resources, we stayed in an MVP the scope. After converging it organically by prioritising the features with the Emakina and Nike teams, we managed to run user tests within the given time and budget to validate the MVP and lock the scope of it. The test was passed on 2 persons of each role (2 City Tour Managers and 2 future visitors) three in English and one in French. Since the journeys are just slightly different (one creates the tour, the other consumes it) and could have another qualified user, we considered that 4 testers were enough to cover almost 80% of the usability problems (according to Thomas K. Landauer and Jakob Nielsen with an average of 31% of usability errors on the total by users). And the results of the tests were really satisfying as it confirmed our design (with some small modifications on the UI) and led us to a better prioritised backlog based on user feedback.
Results
From a tour guide pdf to a fully interactive PWA where you actually can live a real experience, that is responsive, so can easily be used on desktops for the tour creations. A very satisfied client and a convicted company who want to deploy the solution to other cities and make it evolve through the element of the backlog. As an agency, we are also very proud of the development of this solution as a product with its organisation and vision. So we did answer to the first need of our client and actually went way further thanks to the co-design methodology.
Delivrables
- Workshops
- Design Sprint
- Personas
- Consumer journey map
- Architechture d’information
- Priority Guides
- Wireframes
- Mockups
- Interactive Prototype
- User tests
- Design System
- Recommandations
- Design Backlog