Redesigning the ATL History Center Virtual Experience
As part of our design thinking experience, we were tasked with redesigning the Atlanta History Center website to cater to a retiree demographic that was visiting Atlanta for the weekend RV trip. In addition, we were expected to choose four to five screens from the entire website, and morphe them into a mobile-friendly version, that encapsulates our end objective. Our team tackled this exciting, yet unexpectedly challenging problem through initial brainstorming, creating robust paper prototypes, and finally morphing it into a full-fledged prototype using Figma.
Brainstorming to Decompose Our Problem
During our early session as a team, the first thing we wanted to establish as a group was elements that had negatively affected our user group on the website. The things that we had realized were very evident from the website were a clear lack of visible text, unclear directions in traveling to the History Museum, and shortcuts that may not be easily inferred by a demographic largely unfamiliar with the internet.
We had then set out to find elements from other places that we could draw inspiration from and incorporate into our designs. We did not want to confine ourselves just to individual websites or interfaces but wanted to venture out into everyday objects as we were dealing with a target demographic that had to essentially teach themselves to use the Internet, as opposed to Gen-Z and Millenials, to whom the Internet is second nature. Some of these objects were Casio Calculators with big “block-like” buttons and digital Watches that were immensely popular during the ’90s and featured very clear easy-to-read digital text.
Some of the interfaces that we drew inspiration from were the New York History website that featured a navigation-friendly web-calender interface, that was missing on the Atlanta History Center page. We also thought of the TFL Ticket Purchase machines, and the Samsung Galaxy Easy Modes, which incorporated large buttons to create an easy-to-navigate interface for its users.
As per the pages that we wanted to redesign for the website, we decided that redesigning the home page, along with the programs and events page, the tickets page, and the come visit page, were absolutely essential to ensure the functionality of our designs.
While choosing the color schemes for our sites, we saw it fit to keep with the current high contrast design that the website that the website currently used. We believed that it was very apt for visually impaired users that may have been in our target demographic. We also ran Oracle Color Filter, to ensure that the color scheme was clearly visible.
As we brainstormed our ideas for the website, we created a moldboard with every element that we saw fit for our design, here is a copy of it:
Creating Paper Prototypes for our Design
To consolidate our ideas and allow our thoughts to turn into something tangible before etching the final prototype, we saw fit to create paper prototypes of the entire flow explicitly. We each took the responsibility of a single page, and we placed no restrictions on each other as we believed, that was the best way to get the most creative output amongst us.
I was tasked with designing the Programs and Events page. At a first glance at the page, one thing that was clear was although the website talked about the distinctive types of events there was no way to filter out an event type specifically. One thing I wanted on the website was buttons to see each type of event on a specific day.
Another aspect of the design that was infuriating was a lack of a clear calendar on the current website. I decided to divide that up into two clear sections. Since our target demographic are weekend retirees with no clear plans, I thought it was appropriate to have a shortcut that listed events for that day, the day after that day, and the day after the next day. On that day our target user does not have to scour through the entire page before finding a suitable event.
I also included a full calendar, which was supposed to resemble a planner in some aspects. It allowed you to click through different days of a month and show you all the events on that particular day.
Another aspect that I included was a shortcut to the tickets page. One of my biggest apprehensions about the current Atlanta Website is that it may be very easy to lose a potential customer, due to the number of pages in between confirming a reservation and locating an event. Putting a ticket purchasing shortcut, in my opinion, would help cut that rate down drastically.
After completing our prototypes, we met to discuss each of our work, set in stone some fundamental items across all the pages such as a functional navigation bar, links to all the pages, and finally, we set out to design our individual pages on Figma. Here are the final artifacts of our paper (Notability) Prototypes.
Creating the Final Prototype
Similar to our paper prototyping, we decided to divide up the pages in the same order. We created a joint Figma workspace to create our design. I was once again tasked with designing the Program and Events page.
The idea behind designing the final prototype was quite simple, to bring together the different elements of our paper prototypes.
The first thing, I did was create the filter button for different types of events that I had previously talked about. While designing this element, I took inspiration from the Casio Calculator that we had found during our Brainstorming. The behavior of it was simple, it was meant to act as a toggle switch, if pressed on it would show events only of that type, and if pressed again, they would not apply that filter anymore. The behavior of this can be seen below:
The next thing I designed was a shortcut for recent events. It had three states that could be navigated between using the previous and next buttons: today, tomorrow, and the day after tomorrow. Essentially, each of those pages will display all the events on that particular day, on which you can also apply the filters. These buttons to navigate between the pages were loosely meant to resemble the buttons on a cassette player. Each of the three states can be seen below:
I also designed a full calendar, which is supposed to cater to those users who might plan carefully the exact day they wish to travel to the History Center in advance. It allows you to move between months, and see events on each day, and can be seen below:
While designing the cards, the idea was simple, it should only convey the most essential information, in order to prevent the user from squinting to read a lot of unnecessary jargon. Hence, I thought the best way in achieving this would be to ensure that the only necessary title, event, and tag are conveyed. I have also stayed with the high-contrast theme, going for a black text against a black background.
To Put it All Together
Explore (Visit) Page
Calendar (Programs and Events) Page
After completing our prototype, and connecting all the different pages together, we presented our working prototype to our class. We each talked about our design considerations and then asked the class to guess our target group. The class managed to guess the correct age demographic, as they believed it was for old people. I believe our careful consideration in making the interface complication-free and ensuring that the text and buttons throughout the page were large had paid off, given by the feedback we received from the classroom.
It was disappointing for us as a team that nothing close to traveling tourists was conveyed appropriately. We believe that it came down to not enough information being there across all the pages regarding traveling to the History Center, or the availability of parking. Moreover, on the Programs and Events page, there was a lack of events that was suitable for tourists, but rather Atlanta locals.