Mobile redesign

Mobile Optimized

UX methodologies

Content Inventory, Concept Testing, Information Architecture & Interface Design, Functional Spec, Prototyping, Usability Testing

Definition

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.

Content Inventory

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.

Concept Testing

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. Then we began sketching page structure and functionality ideas. We did this collaboratively, and through the course of several design sessions (samples below).

This slideshow requires JavaScript.

        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.

Visual Design

This slideshow requires JavaScript.

Leave a Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s