Case Study: Friends of Material for the Arts

ABOUT THE PROJECT Material for the Arts had discovered a declining usage of their website. They did not have a mobile optimized website and we were asked to propose a mobile-centered re-design. In this project, we designed a digital interfaces from a user-centered perspective based on user research, interviews and evaluation. MY ROLE I had …

Read moreCase Study: Friends of Material for the Arts

Design Story: FUBU (For Users, By Users)

About the Project This project was done in Pratt Institute’s Information Architecture and Interaction Design taught by Craig MacDonald. For this project, my group and I were given the task of redesigning the information architecture for Sesame Workshop (www.sesameworkshop.org) that would make the site’s interface much more user friendly, increasing its usability through improvements of …

Read moreDesign Story: FUBU (For Users, By Users)

Queens Historical Society: A Case Study

For over fifty years, the Queens Historical Society (QHS) has been actively celebrating and preserving the heritage and history of Queens, New York through educational programs, exhibitions, and its public repository of archival collections and sources.  The QHS website is a key vehicle for communicating their mission to the widest audience possible, yet their message …

Read moreQueens Historical Society: A Case Study

Design Story: Queens Historical Society

Queens Historical Society

 

About the Project

At the beginning of the semester we were broken up into groups and asked to tackle redesigning the Queens Historical Society website. In my group, each of us identify key issues within the website, these key issues helped us design a more friendly website using the following procedure.

 

Current Design

        

 

Upon looking at the Queens Historical Society website some of the key issues are the double navigation bars, the non-interactive slider, the follow of content and the heavy text content located on the first page.

Understanding the User:

The step of our progresses was identifying our individual user groups. I decided to focus on pre-professionals, meaning students that are finishing their degrees or recently graduated individuals. During the testing of my user group I conducted two interviews and two observations. Both of these tested revolved around the usage of cultural institutions websites and how often they visit these websites. 

The observations and interviews lead me to the following information that they deemed most important about websites.

Discoveries:

  • Content
  • Structure
  • Images

These discovers lead me to create a persona, that would signify one of the many users of this website.

 

 

In this section we all learned that each user is different and we cannot assume they contain the same perspective as us. During my testing I discovered that something logical to me is not the same to other users. As a group we discovered that most of our users were very keen on the navigation, content and images of the website.

 

Content Construction:

In learning what are users are general looking for within websites we proceeded to the next step.

 

The card sorting and tree testing helped us understand and see how our users go about locating information within the website. It was interesting to learn that most of our users had completely different ways of sorting the cards and completing the tasks. The card sorting gave us insightful information on how to go about designing our site map. It also provide us with insight on how others process and look for information.

 

Site Map:

 

 

The site map along with the competitive analysis helped us design the paper prototype that would lead to the final product. The site map was created from the card sorting data and the tree testing. Both of these resources helped us learning the best way to group and range labels. We also realized that language is really important, common phrases to us do not mean the same to others.

Competitive Analysis:

 

The competitive analysis helped us with:

  •  Creating a better navigation
  • Better arrangement of content
  • The overall appearance of the website

Prototype:

 

 

We first designed the desktop paper prototype and modeled it after the Cooper Hewitt and the Museum of New York City, we then designed the mobile site. We chose these websites because they had the best appearance, content and navigation. As a group we tested the paper prototype on eight individuals, our first round of testing came back helpful information.

Overall are design was good but it had some minor issues:

  • Language – meaning some terms were confusing
  • Label Arrangement – this had to do with the desktop version and what was found on top and bottom of the page
  • It also helped us realize we need to put the title of the page and not assume users know what page it is

Wire Framing:

 

The next step of our process was designing the wire frame, as a group we decided to use sketch to bring our paper prototype to life. We divided the work into sections, I and my follow group member took the mobile site and the other two members took the desktop version.

  • First we made the necessary changes to the paper prototype to incorporate into the wire frame.
  • Second we meet as a group with our first designs, which lead to revisions because of the inconsistence between the mobile and desktop.
  • Lastly we used InVision to create an interactive wire frame.

Final Product:

Overall I am very happy with the redesign of the Queens Historical Society website. The user testing was a great help in obtaining insight on what users general want from websites, as well as the overall design.

As a group we decided to go with a more image heavy site because we believe images speak louder than words. It is also more visually appealing than text heavy pages. Our second accomplishment is the reorganizing of the navigation bar and adding filters to the exhibition and event pages. Also with the help of my teammates: Paige, Harry and Mia, we were able to bring different perspectives to help create a more user friend website.

Mobile

Desktop

 

 

An Adventure from Concept to Prototype for the Intrepid Air and Space Museum by Brian Engel

Our Client: Before   Our task was to redesign the website for the Intrepid Air and Space Museum.  We were told they were looking to appeal to New Yorkers and make their website more mobile-friendly, but we soon found they have many more problems.   The Card Sort and Tree Test   With our goal …

Read moreAn Adventure from Concept to Prototype for the Intrepid Air and Space Museum by Brian Engel

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

Design Story: Intreprid Sea, Air & Space Museum Website

Design Story for the Intrepid Sea, Air & Space Museum

 

Group: Arushi, Julie, Alexa, Krissy.

The Challenge:

Our group had the opportunity to reimagine a new website for the Intrepid Sea, Air & Space Museum Complex. The goal was to research users and analyze content to create a prototype we feel best serves the Intrepid mission while giving users a flawless and consistent experience.

Identifying Concerns:

Arushi, Alexa, Julie and myself quickly did a review of the existing site and gave our first impressions. We all felt the colors were too brash and there was way too much information on the home page. We also determined too many categories were presented on the side bar creating clutter and confusion.  We concluded that what would best serve this website was to simplify the content and organize it to be more user friendly. Before we began it was important to conduct research on who exactly the users are.

Understanding Users:

For my portion, I decided to focus on parents as they are a key demographic for the Intrepid. I designed a questionnaire and conducted in-person interviews. I found the in-person interviews to be helpful in that I could converse with the subject in a casual manner instead of getting fixed, formula like responses. The questionnaire proved to be very effective in getting many people to participate. Some key findings were:

  • Over half of parents surveyed research a museum before visiting.
  • Parents are concerned with travel time and hours involved in visiting so logistical information should be easily accessible.
  • Parents care about price and look for deals so details like membership information should be easy to locate.

The Content:

Once we gathered data about our users our next objective was to start working with the content. Using the card sorting method, test subjects organized topics into categories by using the program Optimal. Afterward we reviewed the data.  My role involved looking at Optimal’s analytic tools and relaying the information to the group. Some tools we found useful were the similarity matrix and the dendrogram. They allowed us to visually identify what users grouped together and we could see patterns emerge.

 

              

It was apparent there were major connections among categories like events, exhibitions, and visitor information, but there were also many smaller topics that had no strong links. We used the tree testing method to test these lone topics like ‘food’ or ‘how to honor a veteran.’ After looking at these results we quickly set to organizing the content.

 

Another method that proved helpful was the comparative analysis. Our group decided to analyze similar cultural institutions where the website conveyed a cleaner, more concise message to users. We chose:

  • Smithsonian Air and Space Museum
  • USS Missouri
  • Exploratorium
  • The Faraday Museum.

My job was to examine the label and navigational features of these websites. A key component I discovered was all four websites use a scroll over menu. Users can see a drop down menu over main buttons without having to click anything. We also discovered a ‘Buy Tickets’ button was always prominently displayed. I found this analysis to be very effective in determining what features we should incorporate into our design.

The Design:

Our main vision was to create a simple design where users could easily navigate to the information they needed without getting lost or bombarded with unnecessary information. We had an idea of our categories and main page headings, but not the layout. I used Microsoft OneNote to create very simple wireframes.

       

 

These simple designs helped our group form opinions and ideas on how to move forward with a new design. A crucial change was incorporating the address and hours on the top of the home page. Based off our research, this was one thing that many users seek and we felt it was important give immediate access to. We all agreed that the tours page would work in a grid pattern to limit users from having to scroll too much. After the initial sketches were finalized, the prototype was ready to be implemented using InVision.

 

The Initial Prototype:

Our first prototype test gave us good insights into the overall effectiveness of our design and also a few problem areas.

  • Test subjects liked the ease of using the events calendar and the option to shift from day, weekly, or monthly views.
  • They also liked the immediate access to current exhibitions when clicking the exhibitions button.
  • ‘Get Involved’ button was not inclusive of membership and users found it confusing.
  • Users needed more information about guided tours to know what the specific tours were about.

             

 

Final Phase Prototype:

After making changes to our initial prototype, we feel our final prototype improves upon the existing website greatly by providing content in a clearly organized, more refined layout. The site’s easy to use navigation will give visitors a more seamless, enjoyable experience.

Mobile

Web