Project Details

Design Goals

A More Personalized Experience

User research told us that being able to deliver content to the user based on their particular needs was important. However, due to technical constraints, we weren't able to do a SSO solution that could deliver a true personalized experience. So, we looked for ways to customize the experience so users could more easily find info based on their particular needs.

Mimimize Link Density

The current home page featured numerous links which users found it hard to find info. Traditional home page designs typically pile on so much info onto the page that it can be hard to find something. Based on user research and assessing competitive sites, the team chose a minimalist design. That way the user would feel less overwhelmed in looking for content.

Design Challenges

Designing For Mobile

We needed to think of how the key content elements would flow from desktop to mobile. This also meant we needed to look at the key pieces of content and see which would work across all devices, or perhaps modified. Some things like a task-based selector was critical on all breakpoints, while other elements such as a hero would be less important on mobile. The team worked with SMEs to help identify this.

Creating Robust Documentation

In the span of 3 months I needed to create detailed documentation that included user flows and wireframes which would be turned over to an offshore development team. When I started the project, the team didn't have any existing templates that could easily be updated with minimimal effort. I chose to use Omnigraffle and create layers for each core element. That approach made it easier to make changes to any element once. I also reduced the amount of duplication by creating a components section that documented once the global page components such as toggles, modals, nav, hero carousels, etc. The components were organized by functionality - e.g. navigation. That way, the compoents could be referenced on any page - changes to that element would only need to be updated once.


Project Overview

person

My Role

Lead UX Designer, managing the UX artifacts design and creation

person

Project Team

VP Design, Senior Designer, Senior Developer, Project Manager

Project type

Project Type

Agile, with the bulk of the development team located offshore

Gears

My Toolbox

Omnigraffle, Boostrap 3, Adobe Creative Suite, Webstorm, Adobe Muse


Accomplishments

  • Establised a robust wireframe process methodology for complex wirframe documentation needs. This included the use of creating modular components.
  • Initiated the development of a design pattern library for future use.
  • Delivered a 270-page wireframe spec doc complete with flows.

Design Tools


Sketch the mobile experience

To make sure that the mobile experience was in line with user needs and tasks, I sketched out various elements and pages on mobile. This helped me understand which elements could reflow or would be hidden at a certain breakpoint. I also worked with the SMEs and project team to see which elements would be displayed and in . One of the big decisions we had to figure out is which elements could be hidden on mobile. Our approach was to provide an experience that fit user tasks on mobile - rather than creating an identical interface for each breakpoint. Sketching these ideas out helps me for making those decisions.

Generic placeholder image

User testing with high-fidelity comps.

A user test plan was put in place to test 15 users of the system. High-fidelity clickable prototypes which featured the proposed new design. We were particularly interested in whether users could perform key tasks. Users were also asked to review the link far list. We iterated on the design after a session was completed. The sessions were recorded, which allowed us to document the feedback afterwards

content matrix

Define user interactions

To personalize the content, a dropdown menu was used to allow the user to select their particular indusry and detailed area. For interactions which require a series of steps, I particularly find it helpful to sketch out the interaction flow to depict the sequence, either on a whiteboard, or index cards. The final sketch was then translated into wireframes. To ensure the approach met user needs, the design was tested with users. Mockups were created using a high fidelity comp, then placed into Sketch.

Dropdown flow

About · Contact

© 2016 Speedy UX. All rights reserved.