Redesigning your ticket to see the stars — a UX case study

Hello! I’m Francesca, a User Experience Design Immersive (UXDI) student at General Assembly’s Manhattan Campus. For our fourth project, we were assigned to redesign an existing website. In our previous projects, the instructors held us accountable by breaking up the process into steps with their own due dates. For this project, we were given 1 week and had to make up our own schedule and keep ourselves accountable.

The Client: Kitt Peak National Observatory

Kitt Peak National Observatory (KPNO), located in Tucson, Arizona, is renowned for having one of the largest collections of optical and radio telescopes in the world.

Perhaps the biggest draw to the observatory is the offering of telescope viewing programs, in which a visitor can look through one of the observatory’s special telescopes for breathtaking views of the stars. The observatory offers several nighttime viewing programs, the most popular one being the Nightly Observing Program aimed toward beginner stargazers.

Business Objective

KPNO wants to update and organize its Visitor Center website (https://www.noao.edu/kpvc/), so that users can find the information they need to properly plan their visit. KPNO especially wants its users to more easily and conveniently reserve spots online for their various programs, particularly the Nightly Observing Program.

Initial Analysis

The current navigation system for the KPNO Visitor Center site is a hamburger menu, seen in the upper right hand corner. Clicking the hamburger icon expanded the menu:

The Main NavigationExpanded submenu for Tours, Stargazing, Programs, and Exhibits

While a UX good practice is to design “mobile first”, this website seemed to be “mobile only”. The hamburger button makes sense for mobile, but not for a desktop website, where there is extra freedom to spread out and fully utilize the space.

What is the current experience like of making on online reservation?

A wall of text and no way back.

When users click the link to make online reservation for the Nightly Observing Program, they are met with the full page of text above (some of the page was even cut off). Note that the main navigation has disappeared and there is no “Back” button.

When users go to the next page, they see:

All useful information, but overwhelming for a user to take in at once.

The user is met with more instructions on the left, and then a calendar, from which they can choose a date. The calendar gives helpful information on each date: the moon phase, the sunset time, and what the user’s resulting arrival time would be. Altogether, however, the current presentation is overwhelming. It also takes time to learn that the only clickable parts of the calendar are the individual date numbers.

Entering Contact Info

Next, users are prompted to enter contact information. There are more instructions on the left — but note that the phone number for assistance has disappeared, and users have no confirmation of the date selected on just the previous page. Also note the small “Save” link, a step users may easily miss; they must Save their information before clicking Next.

The last reservation step

Next, users enter the number of attendees and their credit card information. Again, there’s that Save link. Once the reservation is made, the user cannot change the date or other information online, and they cannot cancel online; they have to call the Visitor Center, but that can be inconvenient when there is a strict policy of charging a $25 per person fee for changes/cancellations made within 24 hours of the reservation. The Visitor Center hours are not even displayed; when can users call?

It’s also important to note that the program is held regardless of cloudy weather. Imagine planning a trip from the East Coast to Arizona for this special view of the stars, only to realize days in advance that the sky will be too cloudy to see anything the date of your reservation…but perfectly clear just the day after. You’d hope that moving your date by just a day would be easier!

Content Audit

Next, inventory was taken of each page of the KPNO Visitor Center website, and then preliminary decisions were made on what to keep, what to improve, and what to remove.

Highlights of what needed to be removed:

Hamburger desktop menu

“Save” step in reservations

“Virtual Tour” — a series of pages found under “See for Yourself”, which was only findable through the hamburger menu and not on any landing pages. This section consisted almost entirely of redundant information found elsewhere on the site.

Pages with outdated articles — there were Social Media Links and Travel Reviews pages, each supposed to showcase recent mentions of Kitt Peak, but there was little content, and their “newest article” was from 3 years ago.

The 3+ different online reservation forms. Various programs had their own unique online reservation form, but asking for the same information.

Highlights of what to keep:

Online Reservations shortcuts — the main navigation features “Online Reservations” as one of its main menu items. From there, users can go directly to the reservation page rather than clicking through 2–3 pages to get to the form via an individual detail page.

Some of the content from the easy-to-miss “See for Yourself” page, namely videos, photos, and audio files (downloadable audio tours)

Heuristics Analysis

The Abby method was used to evaluate the strength and value of the existing website, to see if it was: findable, accessible, clear, communicative, useful, credible, controllable, valuable, learnable, and delightful.

The existing website suffered the most in terms of clarity and usefulness, mainly with regard to the online reservation process, highlighted above. The other criteria had less severe issues, but still room for improvement.

From this analysis, I knew I needed to prioritize simplifying the reservation process, reduce the need for lengthy instructions, and clarify each step.

Competitive/Comparative Analysis

Feature Comparison

A feature comparison was done to evaluate Kitt Peak against other observatories (Maunakea, Griffith, Houston Museum of Natural Science: George Observatory, and Lowell) and a comparator (Glacier Guides). Glacier Guides was chosen as a comparator because it’s also a website offering online reservations for an activity dependent on weather. Weather is critical information for visitors coming for a telescope viewing program — there’s no view of the stars if there’s a storm!

Through this analysis, it became apparent that the Kitt Peak site actually had some great features that weren’t necessarily on the other sites. A big highlight is that it has a Weather page. However, it was difficult to find and not immediately understandable. The page consisted of links to more technical weather sites, of more interest to a scientist than a layperson.

Problem Statement

With the current website, users have difficulty in finding information, like how clear the sky will be on their viewing date, and in placing an online reservation. The reservation process is especially unclear, and there is no way for users to change or cancel a reservation online once it has been made, which can make it harder for users to avoid extra fees in the event that they need to make changes closer to the reservation date.

How might we allow users more control over their telescope stargazing experience?

Research

Closed Card Sort

To help better organize all of the content, a closed card sort was conducted digitally on optimalworskhop.com with 5 users (recruited from the General Assembly NYC student population), using the following categories:

Planning Your Visit

Things to Do

News

Online Reservation

Support Us

Contact

Media Gallery

A big change already being made was the nomenclature of the navigation items — for instance, “Tours, Stargazing, Programs, and Exhibits” was shortened to “Things to Do”.

Closed Card Sort Results Matrix

For the most part, items were sorted into categories that I expected, though there was disagreement over whether certain items belonged in “Planning Your Visit” vs “Things to Do”, and users had difficulty placing some odd cards, like “Our Telescopes/Equipment”.

Tree Test

The Tree

A digital tree test was conducted again using optimalworkshop.com, asking 9 users (recruited from both GA NYC campus and my own social network) to each complete 10 tasks. Tasks were chosen based on the card sort results; if a card was difficult to place in the card sort, I wanted to see how findable it was in its new tree placement.

Similar to the card sort, the biggest takeaway was that users found overlap between the Planning Your Visit and Things to Do categories; a change in nomenclature seemed necessary.

The header and footer in rest state“Experiences” menu appears upon hover

The final header and footer are displayed in the above images. The top title bar is always clickable to return to the Home Page. The main navigation menu beneath it consists of a bar stretching across the page, with the categories: About Us, Experiences, Online Reservation, News, Media, Contact Us, Support Us. Clicking on category takes the user to its landing page. Hovering over a category causes a menu to appear; users can then either click to go to a particular subpage, or have a submenu appear upon hover (the existence of a submenu is indicated by arrows).

The footer contains pertinent information the user may want to know wherever they are on the site, like phone numbers and hours.

Site Map

The Redesigned Site Map

The above sitemap shows how content is distributed among the major categories.

User Flows

As an individual with a more logical way of thinking, I most enjoyed creating the system user flows for the reservation processes. I simplified the process of making a reservation, and created processes for changing a reservation and for cancelling a reservation.

User Flow: Making a ReservationUser Flow: Changing a ReservationUser Flow: Cancelling a Reservation

Prototype 1

Some highlights of the first redesigned website prototype:

The initial “above the fold” view for the home page

The home page (left) features a starry image of the observatory, introductory text, and a cloud cover display, indicating how cloudy the nighttime sky will be on a given day and if telescope viewing will then be available.

Experiences Menu

Above is the header state with the user hovering over Experiences, resulting in its menu appearing below. The final menu, seen in the Navigation Study, differs from this initial version in that “Preparing to Visit” was changed to “About Us”, “Our Telescopes & Equipment” was moved to “About Us”, and arrows were added to indicate to the user that there were submenus.

The Nightly Observing Program Info Page

On the Nightly Observing Program detail page (left), users can start reserving for the program by selecting a date. Once a date is selected, the box below the calendar displays that day’s moon phase, sunset time, and arrival time. On the left side of the page, users can see how cloudy the sky is on a given day, and if telescope viewings will be offered. Users can also enter a confirmation number to change/cancel an existing reservation.

The Reservation Form

After users click “Reserve Now”, they are brought to this page, which confirms the program and date at the top and contains a form to complete the reservation

Online Reservation Landing Page

If users need to change/cancel a reservation, they can enter their confirmation number. This option is available on the Online Reservations landing page, on the individual program info page, and on its own “Change/Cancel a Reservation” page accessible via the Online Reservation navigation menu.

Your Reservation Page

After entering a valid confirmation number, users are brought to a page summarizing their reservation and offering the options to either cancel or change it. Clicking “Cancel” activates a prompt asking if the user is sure; if they answer yes, they are brought to a page with confirmation of their cancellation. Clicking “Change” brings the user back to the reservation form, but with the fields pre-filled with their answers, and the calendar is brought back so they can change the date.

Success Metrics

How do we know that the website redesign is successful? When can usability tests stop?

Success will have been met if completion rates of tasks reach 100%, error rates reach 0% for each task, and if in the post-test questionnaire (in which users rate statements on a scale of 1 to 5, 1 being Strongly Disagree and 5 being Strongly Agree), average scores for positive statements are 4.5 or greater and average scores for negative statements are 1.5 or less.

Usability Testing, Round 1

Read more about the different telescope viewing programs offered ab the observatory.

Make a reservation for the Nightly Observing Program.

Check how clear the sky will be on the night of your reserved date.

Find directions to Kitt Peak.

Move your reservation to a new date.

Cancel your reservation.

Big positives from Round 1:

Error rates of 0% in finding directions, changing a reservation, and cancelling a reservation.

Completion rate of 100% in all 6 tasks.

Areas needing improvement:

Continued ambiguity between “Preparing to Visit” and “Experiences”

Difficulty in looking up cloud cover; users thought the feature should be visible immediately by the calendar.

Too much need for scrolling, with a limited amount of content visible on the viewport “above the fold”, because items were made very large.

Some of the changes made:

Main Navigation — Renamed “Preparing to Visit” to “About Us” and added arrows to the menus to indicate if a submenu were present

Home Page — moved the cloud cover forecast to be more prominent and “above the fold”

Reservations Hub — changed the reservation process so that date selection and the contact/billing info form are together; date selection is no longer on the program info page. The cloud cover forecast was also moved to be immediately next to the calendar for quicker reference. The form was also condensed to reduce the need for excessive scrolling.

Online Reservation Landing Page — Instead of a bunch of links to individual program info pages (where the date selection used to be), there’s now one button leading to a common form.

Prototype 2

The Top of the Home PageReservations Hub — Before Date SelectionReservations Hub — After Date SelectionTop of the Online Reservation Landing Page

Usability Testing, Round 2

In this round, 4 users were again recruited from around GA NYC campus, with the same tasks as round 1.

Finding cloud cover information; users expected to find it under Experiences, especially under the program they had just signed up for.

A major change made was therefore adding the cloud cover feature to the individual program information pages.

Prototype 3

Next Steps

User research could be done to have a better picture of the typical visitor to the website and to the actual observatory. Are visitors usually from out of town visiting for 1 time only, or are they usually local and regular visitors? This information could help determine if an actual login system would be more beneficial to the user than a confirmation number, because what if most visitors are regulars and want their information saved for easier future reservations?

Of course, there would also need to be more iterations and usability testing until success metrics are met. This project also focused mainly on the desktop experience. Another next step is to ensure the mobile experience is improved as well.

Conclusions

After the tree test, the process of redesigning the website became completely nonlinear. I would work on the navigation study, pause and work on the site map to inform the navigation study, pause and work on the user flows to inform the site map, work again on the nav study using the new information, and so on. And then, of course, usability tests led to changes in the navigation study, site map, and user flows.

Each study informed the other, so it was impossible to fully develop one study before moving on to the next. They all needed to be grow together organically. This project emphasized that UX Design is a nonlinear, cyclical process.