Design Story: QHS Redesign Project

QUEENS HISTORICAL SOCIETY SITE REDESIGN

ABOUT THE PROJECT

MAJR Queens was contracted to complete a user-centered redesign of the Queens Historical Society (QHS) website emphasizing an improved user experience and responsive, multi-platform design.  The  4-month project generated several deliverables which supported efforts to understand users, structure content and design the final  prototypes. –Jo Polanco, UX Research

CHALLENGES

The QHS is a repository of collections on the history of Queens and Long Island housed in an 18th century homestead building.  In addition to being a source for primary and secondary research, they host regular educational programs and events for all age groups.  Their online presence consists of a website and major social media platforms, (Facebook, Instagram, and Twitter).  Our initial review of the website found it to be visually cluttered and structurally disorganized.  Double navigation bars are vaguely labeled and direct users to overlapping content.  

Comprising of a museum, library, archives, regular programs and events, the QHS site presents the challenges of understanding the users’ contexts in order to prioritize content and make it findable online.  

 

 

 

MY ROLE

The scope of the project required us to work as both information architects and interaction designers. Collectively, we conducted user research, competitive reviews, and evaluated nav/labeling schemes to inform our new IA. We then created a digital prototype through iteratively sketching and testing interim design ideas.  Specifically, I designed task flows and wireframes.  Tools used: Optimal Workshop, Figma, Invision

 

 

 

DESIGN EMPATHY

We created personas to communicate insights gathered through user research (interviews, surveys, and observations). Considering educators, parents, and non-academic history enthusiasts gave us some contextual details about how they might use the site.  

We found when deciding to visit a cultural institution, both parents and history buffs:

  • seek activities close to home
  • rely on word of mouth

This process challenged our notions of who users of the QHS site might be and why and how they would use it.

 

 

A NEW INFORMATION ARCHITECTURE

To tackle the site’s navigation and labeling issues, we first ran a card sort to learn about users’ mental models and used the results to design a new IA.  A tree test was run to evaluate the new structure.  

Our research found that participants:

  • grouped content into fewer categories than current site
  • still found some labeling ambiguous (Visit, Programs)

These findings led us to consider additional options for easier navigation to Programs resulting in an interactive calendar feature.

 

 

REVISED SITE MAP

We incorporated the insights into users’ wayfinding behaviors and mental models into a revised site map.

 

 

 

COMPETITIVE REVIEW

A competitive analysis provided inspiration and a look at design challenge solutions.  Through this process we found multiple examples of calendars navigating to content and chose one. The takeaway from this process was perfect websites with perfect solutions are difficult to find.  

 

 

 

PAPER PROTOTYPES

Our IA was ready to take on a system image.  Iterations of sketching refined ideas and helped us develop mobile and desktop paper prototypes.  

Findings on pilot and user testing of task flows prompted further revisions focused on usability including:

  • Add scrolling page to calendar
  • Add cost & RSVP information to events/programs
  • Add breadcrumbs
  • Add page titles
  • Add search bar

Testing ideas on real users identified gaps early on in the prototyping.

 

 

USER-CENTERED DESIGN, DELIVERED

MQ delivered responsive desktop and mobile prototypes which are “cleaner, streamlined, and easier to understand than the current site”.   We received rave reviews on the usability of the calendar functions. Looking back through the course of the project, the missteps along the way served to keep us focused on the primary goal.

Prototype links: MOBILE | DESKTOP

ABOUT US                                                                                                    

MAJR Queens is a user-centered design project group formed at Pratt, School of Information in S17/LIS643: Information Architecture & Interaction Design.
Group members: Maria Santiago, Anna Holbert, Jo Polanco, Rachel Egan

Meet Antoinette Colaizzi, A Champion for the User

As a UX Researcher and Strategist, Antoinette Colaizzi has over 20 years in the field leading design and research efforts for Web-based, mobile, and desktop applications.  She is currently a managing consultant at IBM Watson Health and an IBfeature-2M Design Thinking practitioner.  We spoke recently about her career journey from systems engineer through the early days of “usability”, and the path to User Experience.  
Continue reading

Design Critique: MTA Subway Time App

Screen Shot 2016-09-07 at 8.37.40 AM

MTA’s Subway Time smartphone application provides real-time arrival information for a select number of New York City subway lines. The app utilizes existing countdown clocks to display multiple arrivals for both directions of each line. Despite its limited functionality, Subway Time allows frequent riders to plan their commute. The design issues and proposed improvements highlighted in this critique would enhance current user experience and extend its use to those less familiar with the system.

 

Design Issue 1: App lacks signifiers instructing user how to choose departing station.

Once the user selects the desired subway line the app partially displays the entire list of stations from which the departing station is chosen. The user must then manually scroll through the list to find the station though there are no arrows or scroll bars to indicate the navigation.

IMG_5838
img_5843

Improvement 1: Add a search box as an affordance and gestures/controls to make navigation accessible and discoverable.

The addition of a search box will enable the user to quickly find the station with a partial entry. When there is a need to review the complete station list the screen can be “pinched” to reduce the text size and enable a quicker selection by showing more of the list at once. Additionally, an inertial scroll bar on the right can speed up the search.

 

Design Issue 2: Train directions are labeled differently than station and track signs.

The app displays arrivals for both directions on a single screen with each direction labeled for the last stop in the line. Although accurate, confusion may arise from the fact that subway stations are signed as “uptown” or “downtown” for northbound and southbound trains, respectively. Detailed knowledge of the semantics is required of both locals and non-locals.

img_5842images

 

Improvement 2: Enhance discoverability with stronger signifiers and graphics.

Include both names in the labels and consider adding a system or line map where beginning and ending stations are indicated.

unnamed

 

Design Issue 3: Icons used are not clearly labeled.

The legend for the icons is on the first screen but most of the icons appear without explanation. As in the example below, arrival times appear with an asterisk but the user would need to go back to find the legend and meaning of the icon.

img_5856img_5857

Improvement 3: Introduce a bottom bar to display icon legend on the screen where the icon appears.