Designing for Others: Atlanta History Center and Morehouse College Students
Re-designing the Atlanta History Center’s desktop website for mobile
Introduction
Mobile technology is ubiquitous. How is our society adapting to information-on-the-go? How do we effectively translate websites from larger desktop screens to smaller mobile screens?
For my Human-Computer Interaction (HCI) course at Emory University, my group was tasked with re-designing the Atlanta History Center (AHC)’s desktop website specifically for Morehouse College students. We reflected on and questioned what our users needed when interacting with our mobile AHC design. To better understand our user group, we extensively researched Morehouse College’s mission and goals, students on LinkedIn, program rankings, and related engagements with the AHC. We then consolidated information, created sketches, and ultimately built a prototype in Figma. Understanding that our users are working busily on assignments, finding ways to de-stress, and exploring various professional pursuits, our arcade-inspired design attempted to maximize access to the most important information related to the AHC and reduce unnecessary information overload for the end user. Finally, we received feedback on our final design, which I will discuss in the end.
Design Process
Our team consisted of four people, including myself: Randy, Ruochen, Jasmin, and Zhenke. We met virtually and in-person, depending on our schedules. We documented all ideas and sketches in digital tools, such as Google Docs and Figma, which effectively provided open spaces for people to contribute their unique perspectives anywhere, anytime.
I. Brainstorming
First, we thought broadly about college students. As college students ourselves, we reflected on the various activities, needs, and interactions a college student would have. Some needs include having quick access to information stripped from filler and performing tasks conveniently without obstruction. The following questions were raised in deciding what content should be kept in our mobile re-design.
- Does a college student have to log-in to access information?
- Do they want to navigate through multiple portals to get to their page?
- What information do they look for?
- How often do they derail from their goals to explore a setting?
Although we tried to facilitate brainstorming through our perspectives as college students, we also acknowledged that our experiences are likely not reflective of all college students.
Thus we carried out more research on our user group, focusing on information on Morehouse College’s websites and social medias. We found that Morehouse College is a private, liberal arts, and historically Black college. We learned that the user group consisted primarily of men studying various disciplines. The college emphasized notions of community, brotherhood, and impact.
Bias Deconstruction
One thing that was raised in our discussions and research about Morehouse College students was our initial emphasis on a racial identity connection between Morehouse College students and Atlanta History Center. Due to Morehouse College’s racial demographic being primarily Black given its historically Black context, we assumed that students would naturally be allured to a site like the Atlanta History Center — a place that records, preserves, and teaches people about past human and civil rights movements. Rather than only being another reminder about the United State’s atrocious history, we wanted to emphasize other reasons why a college student would visit the AHC, such as for recreational or professional networking purposes. Thus we quickly shifted lenses to outside of racial contexts as we wanted to create a re-design that respects our user group more holistically.
Information Design
Our main goal for the mobile-redesign was to reduce all of the clutter and present the most relevant information to our user group, Morehouse College students.
On browsing the desktop site for the AHC, we were met with obnoxiously large text that filled each section. We noticed it was difficult to return to a previous scroll state given how much scrolling was required for each page fold. The following image demonstrates how one section fills the screen without providing anything particularly meaningful.
However, one interesting thing this section introduces is spontaneous elements of “play” since mousing over the text generated images from the AHC’s exhibits and related activities. We noted this emphasis from the desktop site in curating a fun, playful mobile re-design.
Another example follows that shows the desktop’s site information overload to the user. On expanding the collapsed navbar, the user is presented with all of the website’s pages and subpages. We noted that there was too much text and that we should condense it down. We also noted some pages could be combined, such as “Programs & Events” and “Private Events.”
The following image shows how the desktop site directs users to another site tab to purchase tickets. This new tab may inhibit user navigability, thus we wanted to facilitate ticket purchasing on the same page in our mobile re-design.
Overall, from our brainstorming sessions, we decided to focus on re-designing four screens: Homepage, Tickets, Exhibits, and Events. These pages are the most important as users navigate to everything from the Homepage, users must buy tickets to visit the center, and users want to see what is happening at the center. We wanted to only present information as simple as possible, so if users want tickets, they have quick access to tickets; if they want to check out events, they can filter and scroll through events and isolate ones that are relevant to them.
In summary of the user goals:
- Find information about the AHC quickly
- Buy tickets quickly
- Find fun and meaningful events, such as recreationally or professionally
II. Moodboarding
The following image is the moodboard that our group created and compiled about our user group, which includes theme, typography, and colors.
In particular, we wanted our user group to feel familiar interacting with our re-design, thus translating the Morehouse College colors (#840028, #4F6B82, #5C791A, #C5C19D, #C1A231, #9E1B37) onto mobile would make the most explicit connection.
From our moodboard, we also interestingly noted from LinkedIn that Morehouse College students are involved in computer science, technology, and business and finance. Thus we inferred that they are technologically-savvy and/or involved in digital spaces; however, one limitation to this breakdown is that LinkedIn compiled information from all Morehouse College students and alumni, thus we recognize some of this information may not fully represent current students.
Connecting that our user group consists primarily of men involved in tech and business, college students who likely want to have fun, and people who care about leadership and community, we wanted to execute an ambitious re-design of incorporating an arcade machine-like theme, and in this sense, “game-ify” engagement with the AHC. Arcade games are supposed to be quick and simple to pick up and play, similar to how our design intends to be quick and simple to browse. This arcade theme also meshes well with the AHC itself by modernizing history in a timelessly retro way — each exhibit representing a game one would find in an arcade.
III. Sketching
Following from the previous moodboard, our group began sketching initial ideas of the arcade theme integration, information designs, and interactions on our mobile re-design. We each drew quick sketches for how we personally envisioned the end product.
The following sketches were drawn by Ruochen. A few features that she introduced include a search bar that expands across the top header, a slideshow information layout, and a two button bottom navbar.
The following sketches were made by Zhenke. A few features he designed include a slideshow information design, a mobile version of the desktop site’s expandable info. block design, a search bar, and a dynamic navbar that could redirect the user back to the home page. Another important feature he suggested was displaying the time and schedule of the AHC on the home page.
The following sketches were created by Jasmin. A few features she designed include an informative home page that provides access to different offerings by the AHC, such as ticket purchases, event spotlights, and social media showcases. Some prominent ideas emphasize spotlighting important things happening at the AHC.
The following sketches were made by me, Randy. A few features I emphasized include a slideshow spotlight on the Home page, which features different entities, such as Events, Tickets, and Exhibits, a Tickets page that users can quickly navigate to to find a calendar view of available dates and conveniently buy tickets, and a scrollable Events page. My bottom arcade navbar also features four buttons for accessing different screens.
From each sketch, we discussed and voted on which elements were the most important for our final prototype. In these discussions, we also noted various limitations that may not work well on mobile. For example, Jasmin’s sketches for the homepage were objectively important and informative, but given the limited screen space, the design would be more effective on a desktop screen. We asked questions, such as “should the user scroll up and down? what about left or right?” or “can the user do both?” Another exclusion was Ruochen and Zhenke’s search bar. Since our design reduces the desktop site’s information to the most basic, relevant, and essential, having a search bar would not provide anything meaningful because there was not a lot of information to sort through that a user could otherwise not find quickly through the navbar. Contrarily, the slideshow feature was unanimously accepted for showcasing different entities from the AHC.
Throughout the design process, we tested each idea and feature with each other, trying to imagine ourselves as the users.
The included elements in the final design:
- Randy’s arcade navbar and Tickets page
- Ruochen’s and Zhenke’s slideshow for the Events and Exhibits
- Jasmin’s Home page content, such as “Welcome!” and related descriptions, and Social Media
- Zhenke’s Home page content, such as the AHC’s schedule
IV. Prototyping
Finally, each person was tasked with creating a Figma version of their sketches discussed previously. This gave us a better sense of what we were imagining and it would be easy to consolidate the designs into a final product by moving around elements.
The following images include each person’s Figma designs. Notably, Zhenke worked on the Home page, Ruochen worked on the Tickets page, Jasmin worked on a slideshow view of the Events page, and Randy worked on a scrolling view of the Event pages. We discussed that Events and Exhibits would share similar layouts, thus we could streamline the design process by first finding which layout was the best.
From each previous design, we again voted on the best features and interactions and consolidated them into one. We adjusted Zhenke’s Home page descriptions to be overlaid on the images instead of the header. We applied Randy’s arcade navbar design onto each page because the buttons looked most realistic to an actual arcade machine. Ruochen’s Tickets page was overall very good and functional. Her dropdown functionalities were also applied to the Events page to help users filter events based on relevance to themselves. Then Jasmin’s Events slideshow was adapted for an Exhibits page showcase.
Overall, each design accomplished our user goals:
- Find information about the AHC quickly
- Buy tickets quickly
- Find fun and meaningful events, such as recreationally or professionally
The Home page presents brief descriptions about what users can expect on each page. The nav bar allows convenient and fixed access to each page, and notably with the enlarged Tickets button, users can quickly buy tickets if they catch something interesting while exploring the other pages. The Exhibits page promotes interesting viewings and entities at the center. The Events page allows users to find relevant events and clickable panels for registration and more detailed descriptions.
The following image shows our final design, which also features of the interactions, such as clicking on the slideshow arrows on the Home and Exhibits page, scrolling up and down for the Events and Tickets pages, and click on various dropdown menus on the Events and Tickets pages. Users can also click on the bottom navbar buttons to move between different pages.
Discussion and Feedback
Given the limited time that we had, our group did a great job at re-designing the AHC desktop website for mobile, especially following a more ambitious design. Our mobile re-design condenses information from the original website, but visually it does not look the same. This may be confusing for the user if one considers both the desktop and the mobile version simultaneously, but in a focused context on Morehouse College students, the colors and contrasts help amplify the connection to Morehouse College. The navbar is very functional and allows users the conveniently access each page while having distinct color and size encodings, emphasizing varying levels of importance.
However, we can see how our design may be confusing to the end user. If we intended for a “game-ified” experience, do interactions feel like a game, or do they only look like a game?
We presented and demoed our design in our class. Navigating the application was short, simple, and quick, which is very appropriate in the real world, given that Morehouse College students are busy and do not have time to waste scrolling through filler or irrelevant content. Since it is a liberal arts college, their interactions with the AHC may be academic, thus they want to find information about entities as quickly and conveniently as possible. Our mobile design supports that through filtering and spotlighting. Our class incorrectly guessed our user group, nothing connection to gamers, but one person did recognize and acknowledge the retro-modernization of the AHC’s history aspect. I believe their guesses were valid given the design. Although I emphasized the color design connections to Morehouse Colleges, people who are not familiar with the college may not see the relevance of the colors. Then the arcade game-like design elicits “gamer” tones.
In retrospect, more emphasis on students, such as student discount announcements or reasons why a class would visit the AHC, would have been beneficial. Another audience member guessed the user group was for veterans given our displayed content focused on war, history, and veterans, thus our content could have been more catered, such as civil and human rights movements, general education, and humanities-focused spotlights.
Conclusion
Overall, our team worked well in communicating, discussing, and designing ideas for the mobile re-design. In our testing, our design effectively supports quick, convenient, and accessible navigation between screens, highlighting, and filtering information on the user’s preferences. The re-design effectively condenses the information overload from the main desktop site into something more digestible and curated — the most basic, essential, and functional components. Although our class did not accurately guess our user group, this provided meaningful data for how we can improve our design and better understand our user group’s needs, such as being more explicit about student life and perks. The design process was fun and excited. It promoted a lot of experimental discussions, and I am happy to have worked on this project with my team.
