The Challenge

In the limited time of the internship, participants to take part in user interviews or usability testings could not be officially recruited. Moderated usability tests were also planned to be done later in the year by UX Consultants hired by the Gallery. As it is actually not that unusual for companies and start-ups to launch products without any research, I decided to perform research without users to make my first design. I plan to make iterations based off of usability test results from the UX Consultants in the future.

The end goal of this project was to uncover the usability, findability, and accessibility challenges of the gallery’s Self-Guided Tours pages, and create a working, visual example that address the current issues with design principles and web content accessibility guidelines (WCAG) in mind. To create a realistic and easily translatable prototype, the information architecture was redesigned while consistent elements, primary color, and contents from the current NGA website were kept.

Heuristic Evaluation

Heuristic Evaluation is a method involving several usability experts examining an interface to measure its compliance with the principles known as “usability heuristics". Due to limited time and resource, I served as the sole usability expert to evaluate the current Self-Guided Tours pages by visiting pages and completing the given tasks after being prompted with the given scenario (Table of Tasks).

Both the heuristics and severity ratings selected for this evaluation were defined by the Nielsen Norman Group as follows, while I defined the ratings for the ease to fix found issues:

10 Heuristics for User Interface Design

H1: Visibility of system status

H2: Match between system and the real world

H3: User control and freedom

H4: Consistency and standards

H5: Error prevention

H6: Recognition rather than recall

H7: Flexibility and efficiency of use

H8: Aesthetic and minimalist design

H9: Help users recognize, diagnose, and recover from errors 

H10: Help and documentation

9 unique issues were found as listed in the Table of Issues, with the severest issues being:

• Audio stop search tool’s lack or error messaging

• Difficulty to visually perceive some content (eg. small size of audio stop controls and images, vague grouping of tours)

Heuristics found to need the most attention in fixing included: Visibility of system status (H1), Recognition rather than recall (H4), Error Prevention (H5), Flexibility and efficiency of use (H7), Aesthetic and minimalist design (H8), and Error recovery (H9).

INTRODUCTORY EXPERIENCE

- Present onboarding, instructions, or suggestions on how to use the audio guide/tours features

- Audio tour webpages should be easy to find from the homepage

ACCESSIBILITY

- Provide captions or text transcript for audio

- Provide alternate text for images and text to icons to be accessible for screen readers

- Audio controls should be big

- Provide option to change text size or contrast

- Text links should look clickable/stand out

CUSTOMIZATION FEATURES

- Include language options

- Provide favorites, custom playlist or browsing history, and sharing or download options

LANDING PAGE

- Keep a clear and simple layout

- Show highlighted tour or object

NAVIGATION

- Provide understandable instruction/wordings and order of content

- Shortcut options (eg. back to top, skip, nested menus)

- New pages should not open in a new window

SEARCH FILTERS

- Keypad should give clear feedback

- Search tool should have a clear sort definition and layout

- Suggest/popular searches

VISUAL APPEARANCE

- High-quality photography of objects that are max width or expandable

- Keep clear and simple layout and hierarchy of content

- Seamless browsing process

- Follow a (limited) color scheme 

- Clear and large icons and buttons

CONTENT DESCRIPTION

- Object image is followed by title, artist, dimensions, medium, date

- Link to location if on view

- Concise and clear text description or audio transcript

- Say tour length or number of stops

CONTENT ORGANIZATION

- List objects/stops by location or stop number

- Audio tours have a theme (eg. art movement, time period, artist, etc.) 

- Start audio tours with an introduction

Overall Research Findings

The overall areas to improve on the Self-Guided Tours pages included:

Design

Sketches, Mockups, and Prototyping

I first made sketches to envision the preliminary ideas for solving the pain points I found.

I next created wireframes for the mobile and desktop versions of the web pages using the Figma prototyping tool to get a clearer idea about the page layout.

Lastly, I prototyped the wireframes to make clickable examples of the redesigned webpages in both mobile and desktop views.

My first prototypes with recommended fixes were made.

The Outcomes

There were a total of 5 main validations implemented to solve the current pain points of the Self-Guided Tours pages.

Validation 1: Visibility of system status and Error Recovery

Validation 2: Aesthetic and minimalist design

Validation 3: Error prevention

Validation 4: Recognition rather than recall

Validation 5: Flexibility and efficiency of use

Conclusion & Takeaways

This redesign project allowed me to work with another client in the real-world setting. Personally, conducting and building off of usability research without user input was a challenge, but I believe I have gained great realistic experience thanks to this opportunity. I had the chance of working with an experienced group of professionals in the digital experience field (a chief of digital product and experience, a web designer, a front-end developer, a product manager, and an analytics expert). It was a great source of confidence in terms of collaboration skills and planning as a group. The project also improved my independent and remote working skills, as well as my flexibility in accommodating different design roles: researcher, visual designer, UI designer.

Challenges

The project faced the limitations of:

• not involving user opinion, because user interviews or usability tests could not be conducted. Heuristic Evaluations and Comparative Analysis may not have been enough to accurately pinpoint where innovation was needed.

• not involving many usability experts, because the evaluator was just me.

Executed insights

Four months after my internship, moderated usability testings of the audio tours (and mobile app) were done by User Consultants from Forum One. I felt validation when many of my insights and findings were raised in Forum One’s report too. For example, it was confirmed that the Soundcloud player has small interface and hidden interactions, content hierarchy is unclear, not all content is translated, the stop order is not standardized, etc.