Current app: built on web-based technology, the app was difficult & costly to maintain. The app sought to deliver one consistent experience across all platforms with a single UI design, but this pleased neither iOS or android customers.
Time: the normal process gave Design two weeks to create the entire app. We had to throw out waterfall delivery and produce designs for each feature in sync with development sprints.
Collaboration: developers and product owners were eager to contribute ideas. Instead of late-stage reviews, we started as one team and used design sprints to define problems, find solutions and validate before delivery.
The redesign was a team effort. I contributed design strategy — setting the guiding principles and design language, building out the Sketch libraries, and working closely with the exceptional product designer we contracted to own the android experience. During the design sprints I contributed the iOS designs from wireframe to final mockups.
Guiding design principles
At the start I had to identify the overall UI and design language. The aim was to make the app feel like a natural native app on the customer's device. It would be simple, clean and modern, and would leverage the hard-proven UI patterns for each platform. There would be a fine balance required to ensure features were the same but platform specific.
After an accessibility review at WWDC, the lead iOS developer and I were also determined to ensure the app wasn't simple accessible but that it delivered an exceptional experience.
- Platform specific experiences & best practises
- Built with the upcoming Prairie design language (wide-open)
- Accessibility with every sprint, not after
The company wide digital design language was still undefined when we started, however we knew the overall direction that would evolve on the main canadiantire.ca website. Referring to the wide-open skies of the prairies, the design language aimed to remove clutter and focus on the product & important information. This also included giving the digital design air and calm where previously there was heavy dark colours and imposing backgrounds.
Prairie is modern, light, airy and content focused. On the app this meant avoiding heavy solid backgrounds and navigation headers, in giving content room to breathe and retaining only essential rules & borders to separate content. We also selected the brand green as a positive primary colour, and let the brand red shine where appropriate (sale tags, errors and warnings).
I used a break before the project to begin gathering research necessary for understanding how customers used our app, and to identify the goals they were trying to achieve.
- App Store reviews & in-app triggered feedback
- Customer interviews & usability tests with existing app
- Competitor analyses including Canadian, US and European retailers
I then worked with the product team to map the major painpoints against the app's core features. Each design sprint focused on a core feature, with the ideation session starting with reviewing the customer painpoints and examination of how competitors solved similar issues.
Validate, validate and validate
We lived by an important rule with the design process, to test our solutions with real Canadian Tire customers. Therefore we validated our ideas with frequent usability tests and iterated until we had removed ambiguity. This meant we also rejected many approaches and wholesale features.
Each sprint started with identifiying the cause of a customer pain point, ideated solutions, converged the ideas, building out a design & prototyping based on our hypothesis that the solution solved the problem, then finally we tested the prototype.
One feature that fell outside our scope and team was the Sign in and Join process for the new Triangle single sign-on account. Another team built cross-platform prototypes which were tested separately, and delivered after our design phase had ended.