This project was a large undertaking to redesign the entire m.lincoln.com interface. The goal for this project was to make available the same content on both our mobile and desktop sites without adding confusion, clutter or removing valued content. The learnings from this project were used to inform a later responsive lincoln.com redesign as a mobile first initiative.
We began this project with a content inventory to assess the content that needed to be accounted for on the current Lincoln desktop site. We then collaborated with the strategy and design team to prioritize content for mobile based on user needs and business goals. We created a content matrix to document the content going into the mobile site and used that to create a current state site map in order to ensure that all content and current pages would not be missed in the redesign.
We took the current state site map and used it to create a new site map to determine the new flow and break out all individual pages. We also nailed down the taxonomy and navigation. We ran a closed card sort with our target users via Optimal Workshop to validate our assumptions, and make any necessary changes.
Then we began sketching page structure and functionality ideas. We did this collaboratively, and through the course of several design sessions (samples below).
Once we agreed on our sketches, we built an HTML prototype with our technology group in order to test the functionality. We used usertesting.com to complete tests with seven users on iphone and android devices. We viewed the tests as a group, and then I facilitated an affinity diagramming session. This involved the team writing notes from the user tests – user quotes, insights, ideas, etc. – and organizing them on the wall in groups where we saw themes across all the interviews. Once completed, I prepared a report to surface out all the findings and as a team we determined what worked well and prioritized what needed more design thinking. We repeated this two more times with additional testing and sketching before moving on to wireframes.
Information Architecture & Interface Design
Once the usability testing was completed, we took our findings and began nailing down the final design. I created wireframes in Axure and added interactivity in order to ensure the entire team understood what we were doing, including clients, and that the tech team was confident of the feasibility. It was important to the client that we used the latest mobile technology and that we make considerations for adding additional functionality in subsequent phases – both to accommodate new features and continuously update functionality to reflect changing mobile capabilities and trends.
It was very important that users would be able to form a solid mental model for our site quickly so that the site was easy to navigate across vehicle product pages. Each section within the vehicle pages needed to accommodate very different content – both in type and in how the desktop site was currently displaying the content. We needed to make sure that the functionality and architecture felt similar and/or complementary across all the pages on the site. Through our user testing and collaboration, we were able to accomplish this in strides.