Designing for Others: Atlanta History Center and Morehouse College Students

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.

The home page of our final mobile design.

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.

The home page of the Morehouse College website
The Instagram page for Morehouse College
The home page for the Atlanta History Center desktop site

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.

The programs and events page on the Atlanta History Center desktop site
We documented our discussion notes and research in Google Docs

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 view of the home page for the Atlanta History Center desktop site

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.”

View of the collapsible navbar on the Atlanta History Center desktop site

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.

The ticket purchase page for the Atlanta History Center desktop site

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.

Moodboard for Morehouse College and Atlanta History Center re-design

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.

Photo by zhan zhang on Unsplash

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.

Ruochen’s sketches

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.

Zhenke’s sketches

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.

Jasmin’s sketches

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.

Randy’s sketches

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.

Zhenke’s Figma design for the Homepage
Jasmin’s Figma design for Events (slideshow view)
Ruochen’s Figma design for Tickets
Randy’s Figma design for Events (scrolling view)

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.

The various screens of the final mobile re-design

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.

--

--

--

A human at the intersection of visual arts, computer science, and data science.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Road Line Marking in Aldringham #Roadway #Line #Markings #Aldringham https://t.co/PJdYUViggF

What’s a ‘User Experience’ anyways?

Microsoft Word Pdf Mac

Insight about CAD/CAM use in Textiles

What is Design Practice & Discipline? — Week 07

Ritual and the Architecture of Isolation

Car Park Lining Services in Embo #Car #Park #Line #Marking #Embo https://t.co/ETmPJOzoTg

The state of Design in Africa and what one company is doing about it

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Randy Truong

Randy Truong

A human at the intersection of visual arts, computer science, and data science.

More from Medium

Our artist , Sugar

The Keycult Raffle Experience

Week 2 RMP 511

The Fame, The Glamour and The Masked Truth