Magna International

Corporate Website Redesign

back end development
USER EXPERIENCE DESIGN
ux audit
front end development
branding
mood boards
visual design
usability testing
personas
user flows
low-fi prototyping
information architecture

Through a digital agency partner, we have been a member of Magna International’s digital AOR since 2004, working with various stakeholders and business lines to evolve their digital presence over 3 website generations. The most recent version, launched in 2010, no longer reflected Magna’s position as a global leader in automotive innovation and product delivery.

Like many large organizations, Magna always tended to move slowly when adopting change or new communication/marketing concepts. We initiated this project with an educational session with crucial business unit leads. This session helped to paint a picture for stakeholders regarding current conventions related to navigation, page layouts and interactivity.

To help move this project forward, we prepared high-fidelity wireframe prototypes to give the client team tangible examples of their web presence could be reimagined with a specific emphasis on storytelling site-wide.

My role in this project

  • Conducted a competitive review of similar services available such as WeightWatchers®, MyFitnessPal® and Noom®
  • Developed an overall user flow depicting service onboarding, food logging and integration with 3rd party services
  • Designed and built an extensive set of high-fidelity prototypes using AxureRP
  • Created a detailed property map that presented technology requirements alonside user interactions within the application
  • Completed a full branding exercise including mood boards, logo concepts and associated collateral
  • Designed various app screens and user flows using Sketch
  • Liaised with app developers throughout MVP process
Mobile app visual design samples
Unlike other weight loss apps, Fitmethod aims to simplify the often laborious process of finding and logging food.

In three simple interactions, a food can be entered into the user's food diary. User behavior is rewarded with achievements and educational content around nutrition. is some text inside of a div block.
Navigation and flow samples
The "My day" dashboard provides users with an overview of their current food diary with macronutrient and exercise activity visualizations.
Visual identity mood boards
As part of the rebranding exercise, I developed initial logo concepts paired with mood boards to demonstrate the corresponding design languages.
High-fidelity prototyping
Using AxureRP, I developed an extensive set of high-fidelity mobile prototypes that simulated key tasks like onboarding, logging food and entering physical activity.
User journey mapping
I developed a hybrid user journey / technology diagram that presented user movement through the app alongside key technology decision points. This was developed in parallel with business modelling.
Competitive review
As part of my competitive review, I diagramed one of the key differentiators for Fitmethod - simplified food logging. In this diagram, the number of overall interactions are compared between MyFitnesspal (a key competitor) and Fitmethod for logging a simple food like a banana, and a more complex food like a sandwich.

Our role in this project

  • Conducted an in-depth heuristic website audit, the resulting recommendations which lead to the 2016 redesign project
  • Educated business stakeholders on current UX/IXD trends
  • Interviewed front-line customer support representatives to understand customer and business requirements better
  • Reimagined the site architecture to deliver a more user-centric hierarchy of information and support a more storytelling-driven approach to content
  • Validated the site structure through tree testing usability exercises with internal and external
    stakeholders
  • Developed an extensive, ultra-high fidelity set of wireframes, demonstrating a new approach
    to content, design and conversion
  • Contributed to the development of an engaging visual design for select pages and provided art direction to designers to establish a design approach that aligns with Magna’s position in the industry today with an emphasis on product innovation

The storytelling concept helped to draw relationships between Magna’s employees, their products, and the company’s philosophy about fostering innovation. While these high-fidelity prototypes were carefully positioned to the client as being conceptual (and not final visual designs), they were enormously successful in achieving buy-in from the various business units and sub-brands within the Magna family.‍

In developing the final visual design, we collaborated with Magna’s branding agency who had established an updated visual language and corporate guidelines.

View additional assets from this engagement

View more work samples

Receive user experience, product design and digital marketing updates

Sign up to receive periodic email communications from Input UX with our latest insights, downloads and tips around user experience and product design. We'll never spam you or sell your contact information to anyone, and you can unsubscribe anytime if you're not loving it.