Ford Motor Company

Redesign the Ford Investor Relations website into a responsive, mobile-optimized experience that puts the information front and center for the user. Using Ford Global UX and keeping it in touch with the Ford Corporate homepage redesign. Improve upon navigation clarity and reliance on PDF, PPT, and nonstandard content to display charts and graphs.

  • Senior Visual Designer responsible for creating and delivering pixel-perfect design comps.

  • Adobe Photoshop

  • I worked closely with our digital partner and developers at Investis on investor relations tools, feeds, content and components.

  • The clients and I are excited to see the end result. This was one of the first projects VML ran in Agile sprints with the Ford clients. And it did come with some challenges. It was difficult to get the clients to give feedback in a timely manner and for them to attend meetings on our 2-week sprint cadence. We worked ahead and tried to anticipate their feedback on both visual design and wireframes. Our team worked closely and openly communicated with agency partners, Investis and GTB, WPP partner agency, and, the Ford client engagement team.

    Overall, we are all happy with the final site and have discussed things to do differently on our next Agile project with Ford.

Wireframes

First I did research into the best-in-class Investor Relations sites and sites done by Investis, our technology partner that was running the build. We looked at every site’s interaction, content, and navigation. Took notes on what I liked and presented that information to the client. Getting the IA and navigation right was a key success measure for this project. After working closely with the UX team, I designed multiple navigation examples that I presented to the client.

The Solution

Taking what users were looking for and putting it front and center. I gave the site visible left-hand navigation, which allows access and wayfinding for quick, repetitive tasks. The top navigation maintains the Ford global Corporate navigation, orienting the user and allowing access to Corporate content that helps build the brand, maintaining that connection was useful in the site map exercise and met our client’s business goals for the site. I added utility navigation to feature quick links to often lost content such as FAQ and social links to share the page.

The most desired content is displayed in a versatile mosaic as the page header. One Investis feature the client was excited about is the Investor Briefcase, where users can save reports and come back later to download them. I added the briefcase in the utility navigation that shows how many reports you, the user, have waiting. Similar to a shopping cart on an e-commerce site.

Homepage Design

The home page went through a few rounds, and client presentations. It was necessary to do more than one option to get a feel for what the client was looking for and how comfortable they were with moving away from the corporate home page design, if at all. I presented three versions, I did the first two and I art directed a junior designer on the third option. The client liked parts of all three, so I combined the elements they liked, and that went through a few rounds of refinement.

Reports and Filings

For these content-heavy pages, the clients wanted to keep the majority of the content from the original site, but use Investis tools for the charts and graphs. Investis used my design patterns defined in the design system and gave them functionality. A part of this process was working closely with the client, Investis, and UX to do a content audit, and figure out what content was necessary and what new content was needed based on the new functionality and user wants.

The internal pages are broken up into subpages and each page is titled appropriately to orient the user and meet Accessibility requirements. I designed tab navigation that allows the user to easily and clearly tab between the subpages within each page. The user always knows where they are and the rest of the site content is easy to find.

For the chart patterns that display different years, I designed similar toggle navigation, so the user can easily move between the years. Each line item on the chart has a rollover state, so the user knows where they are since the charts can get as deep as 20 line items. I designed all the icons to fit within the Ford Global UX standards. 

Stock Chart

I looked at all the best-in-class examples of stock charts and created a loose mood board. Knowing that I would be skinning an already existing pattern, I still wanted the chart to fit within GUX. Adding accent colors that complemented the Ford pallet.

Even though 86% of users viewed the site on a desktop, it was important that I still thought mobile-first. I viewed every best-in-class chart on my phone and tablet, to see how it scaled and functioned. This was important since the chart is interactive.

Design System

I had just finished redesigning the Ford Corporate homepage and the Investor Relations page lives within the Corporate page. So when I was developing a style for IR, I didn't want to stray too far from the corporate look and feel. The client and the team wanted the page to have its own identity while maintaining Global UX, also known as GUX.

I started out by designing a style guide that also acted as a mood board. Gathering all the fonts, typography styles, and colors I wanted to use. This allowed me to have a 360 view of everything Ford GUX and using this as my design pattern library I could work within and design any new styles from there. I also began putting together a PSD tool kit to be used by developers and other designers, to ensure consistency in all page elements.