Project Details

Design Goals

Create a New Tab Structure

The existing design (right) used a large tab structure that contained images and various links to content. This approach wouldn't work on mobile due to the large size. Looking at data analytics and user research we organized the links based on user key tasks. The icons added design appeal but we recommended to remove them from mobile.

Organize Content Based on Device and Need

Although the overall design mantra was to be consistent at any given breakpoint, we knew that certain types of tasks would be more popular on a given device. For example, the store locator module would likely be more popular with users while using their mobile device. As a result, we chose to make this element more popular and stack it at the top, rather than below other elements.

Reduce Task and Interaction Time

In the existing design, a sticky element was used during the Add interaction to ensure the user could see this no matter their location on the page. However, this approach added to the total interaction time, particularly for performing the main task. At the same time, the new site design patterns didn't use a sticky element due to technical issues on mobile. A new approach used a progress indicator to effectively communicate the user interaction.


Design Challenges

Reduce Cognitive Burden

A new product design proposed new features and categories for a given item. We needed a way to ensure that we could keep the interfsce informative without adding more elements that would over-burden the user.

Keep Design Changes to a Mimimium

In the initial design phase, we needed to make sure that any enhancements would be kept to a minimum. This meant that the design team needed to ensure that we didn't add any new features which would add scope.

Getting Familiar With Boostrap

With a mobile first philosophy, the design approach for some team members took a bit of time to get used to, particularly when designing within the constraints of a grid system. I found it helpful to always start with a sketch to see how the content would flow based on a different breakpoint. Although I am well-versed in using Bootstrap, some members of the UX team weren't as well versed. As a result, I put together a short seminar for the entire UX team that showed all of Bootstrap's new features. This was beneficial in situations when the grid structure might need to reflow in a different way.


Project Overview

person

My Role

Lead UX Designer, working closely with the lead designer, product team and UX Manager.

person

Project Team

UX Manager, Senior Designer, Product Manager, Lead Developer

Project type

Project Type

Agile, with the bulk of the development team located offshore

Gears

My Toolbox

Axure, Omniture, Boostrap, Webpagest, Adobe Creative Suite, Chrome Dev Tools


Accomplishments


Design Tools

Design does not live by wireframes alone. Below is a representative sample of various supplemental tools that were used to help shape the design.

Perform competitive audit

This heuristic audit analyzed competitors product pages and how their info was displayed. The mocked-up example here shows the key findings of the 54-page report, which evaluated the sites based on a variety of heuristics including design and task time. This was shared with the product team to help them understand how a new design recommendation can impact the overall user experience, particular with HCI cognitive factors.

Audit

Sketch the mobile experience

Sketching is extremely useful when mocking up something in mobile. This became especially handy when some elements such as a store locator needed to be displayed in a certain order that would be different than using the standard Bootstrap grid reflow. Because I knew the Bootstrap grid system well, we were able to present the proposed design without added code - the grid would use the push pull specification, thus ensuring the elements could reflow differently on mobile. The example was recreated in Adobe Illustrator. Rather than using boxes, I chose to illustrate this using the pen tool. This gives the drawing a sketched look and feel to communicate this is a concept - not final wireframe.

Axure repeater example

User testing with Axure.

Our UX team partnered with research regularly to ensure that we understood user needs. After the initial design implementation, added enhancements were made to certain design elements such as the coupon card, page layout and a simplified user interaction. To prep for testing, I helped create sample prototypes in Axure. However, since the design was subject to change before the test, I needed to come up wirh an approach that would allow for added changes with minimal effort. To do that I created a repeater in Axure. this allowed for a list of 50 items to be listed on the page using a single design. As a result, the team was able to meet our deliverable deadline. The results of the tests validated our designs as well as provided new insights for future enhancements.

content matrix

Improve Task Times

Users told us that the main interaction time was slower than other sites. To help the team better understand these differences, I devised an innovative way to measure exactly how long it took for this interaction to take place. Because the interaction involves an Ajax update on the specific element instead of a page refresh, measuring this time was difficult, While a stopwatch could be used, we needed to get an accurate timing. Since I am well versed in Chrome Dev tools, I recorded the interaction using the Timeline feature. By comparing where the initial onclick event took place, and the paint refresh, I was able to determine the exact time the task took. This helped the team recommend coming up with a reduced interaction time.

Chrome Dev Tools


Hands on-data analytics

To help inform our design decisions, I was given access to various data analytic tools such as Omniture, Foresee and Webtrends. I prepared monthly reports that focused on detailed user behavior including time spent on page, visits, entry and exit points and usage of key page elements. This gave the team deeper insights into possible design improvements, as well as the need for further research.

During the process of preparing various reports, and the information needs of our product team, I realized that further enhancements to the current data reporting methods could be improved. After research, I proposed a more robust reporting system that would combine data from various sources into a single dashboard. Additional data would also be provided to help the team understand the UX success factors by combining different data such as task times, satisfaction and actual measurable outputs such as ROI.

user tracking report

About · Contact

© 2016 Speedy UX. All rights reserved.