Swiss Chalet Mobile App

⁠— Swiss Chalet Mobile App

Platform: Flutter Mobile App
My Role: Senior Product Designer
Project Length: 9 Months
Team: 2 Product Designers, 2 Product Managers (lead & support), 4 Engineers, 1 QA Engineer

— My Role

My role as senior product designer on this project included the full product lifecycle from inception and discovery to delivery and handoff. Recipe Unlimited (the parent company of Swiss Chalet) was in between a few design agencies and debating whether to have the design be done in-house, so I provided a pitch design to show them what we could create and build for them and it was ultimately my design that won the contract for us.
We were responsible for a complete UI redesign of the app which included accessibility guideline adherence as well as discovery, user surveys, user testing, persona building, heuristic & competitive analysis, information architecture mapping, user flow mapping, design QA, and asset handoff.
We also made sure to follow AA level accessibility guidelines for all aspects of the designs.

— Vision & Discovery

The project was to create a complete redesign of the app on the Flutter framework while leveraging existing back-end configurations as much as possible. The redesign included not only UI changes but also identifying user pain points through user research and testing and providing a better experience for users overall.

The business requirements were:
-increase basket size, reaching an audience of young families (households of 2+ people with adults aged between 25-35)
-reduce calls to customer support (identify and fix UX pain points)
-improve overall UX throughout the app.

We began by sending out a user survey to existing Swiss Chalet customers to identify the user base and trends in behaviour, which we then turned into user personas. Through this survey we were able to identify that the biggest appeal of a mobile food application was coupons & deals, ease of use, and ability to accurately track orders.

We took these insights and held a design discovery workshop where we went through multiple activities with our internal team as well as stakeholders (Swiss Chalet product team) to align on prioritizing features for the MVP build, and back logging any other ideas that came up along the way.

— User Research

Once we had created user personas and aligned on features for the MVP build, we dedicated 2 weeks to user research.

We had 3 sources of user data:
-User feedback from app store reviews
-User feedback from customer support call centre
-User analytics through Fullstory (digital analytics platform)

We synthesized these 3 data sets and were able to create a user journey map that identified the crucial pain points and dropoff points (where users had to revert to calling the customer support line due to inability to complete tasks within the app)

We then did a heuristic evaluation of the existing app to correlate the user feedback and see for ourselves what the problems were. We also did a competitive analysis to see what competitors are doing well, how they’re solving similar problems, and where they are lacking.

My pitch designs that were submitted to Recipe Unlimited for a design challenge to compete against other design agencies. Ultimately it was this design that won the deal for our team.

A snapshot of our initial user survey that we used to build our personas.

Our user journey map that identified pain points and dropoff points at which users had to leave the app and call customer support

— Information Architecture

Since adding coupons was identified as a big value add as well as a pain point for users, we decided to add a “coupon wallet” feature. We mapped out this feature as well as all other existing and prioritized features for the MVP build in an expansive information architecture diagram.

The information architecture diagram was discussed with the stakeholders, PMs, and engineers to ensure that everything was feasible and aligned with business requirements and took user experience into consideration.

— Style Guide & 1st Design Iteration

Branding colours and guidelines were provided by the Swiss Chalet team. We did not have room to add any additional colours and so had to use the brand red and yellow exclusively (along with white/black/greys/success/error colours).

We started to build out a basic style guide that included colours, fonts, icons, form field states, and other components that we knew would be used/needed in the app. This included things like toggles, headers, navigation bar, popups, dropdowns, radio buttons, quantity selectors, and so on. I like to start with a style guide because this allows engineers to start building reusable components while I work on screen designs.

The first iteration of the app came together and we had designed the flow from start to finish for placing an order.
We had designed a solution for the coupon wallet but this was a net new feature for the app, it needed testing to validate our design choices.

Snapshot of the extensive style guide and the main food order flow designs for the 1st design iteration

— User Testing & 2nd Design Iteration

We built a prototype on Figma to test new features that we were planning to roll out for the app. The prototype was extensive and had multiple paths that the user could take, since the point of the test was to see what entry points users were clicking to access certain features. The main features we were testing were the coupon wallet and order setup, since these were identified as big pain points from our past user research.

We set up a remote test where we recorded the user’s screens as well as their webcam and mic to get a full range of feedback from them.

Snapshot of one section of the user test which tested what entry point users clicked in order to change their order setup details from delivery to pickup & synthesis of our user test feedback data

View Prototype

— Feedback & Iteration Loop

The next step in the process included a weekly round of design walkthroughs with stakeholders to close off design sprints, and hand-off to developers to build features. This feedback loop continued for a number of months until all features were designed. As features were being built we provided rounds of design QA to ensure that the engineers were aligned with any design inconsistencies and these were added to the next sprint to be fixed. The app is currently in its final build phase and will be launched soon!

— Challenges & Limitations

The main challenge with this project was that we were required to leverage existing backend configurations which were being handled by a third party vendor. Our team and the client often had no control over the time it took to make changes or get information on APIs that the engineers needed to build or test certain features. The backend code was also outdated which made it more complicated to improve existing features or add new ones.
One example of this was this was a scenario in which a user places items in their cart and then changes their address - since not all items are available at all locations, the current application was simply wiping the cart without notifying the user. There was no failsafe in place to either notify the user that this was happening or what items were no longer available, or offer substitutes. The engineers had to push for cleanup of the backend code in order to implement a better user experience that provided a warning for the user, identified exactly what items would be removed, and even notify a user if a side choice was not available and allowed the user to select an alternate side choice and move forward with the address change.

— Impact & Next Steps

The designs for the app are complete and the project is on track to launch in the app store by the end of the summer. The stakeholders are happy because all business requirements have been met. We are also providing user analytics tracking capabilities to measure success metrics and ensure that the new features are working as intended and moving users off of the customer support line, and there are bigger cart sizes overall.

Next steps are to iterate on the MVP build with user feedback that is gathered through app reviews, call centre feedback, and the newly implemented user analytics.