Social Media Histories
Employer
University of Michigan - School of Information
Role
Lead UX Designer (Internship)
Timeline
June 2024 - August 2024
Platform
Web
During my summer 2024 intership, I served as the primary designer for the U-M School of Information’s Social Media Histories Project website. The project aimed to document the design and feature evolution of social networking platforms over time. The archive was intended to target a broad audience. This included researchers, designers, policymakers, and journalists interested in exploring and analyzing historical snapshots of social media platforms.
Overview
Project Goals
Build a public-facing archive allowing visitors to find historical snapshots of social media websites and apps.
Include an advanced filtering system to show results based on a specific feature, platform, or time window.
Accommodate different image sizes and types of metadata on the archive grid and snapshot details page.
Focus the snapshot collection process on key feature and design changes throughout each platform’s history.
Implement a simple user experience for researchers, designers, policymakers, journalists, and the general public.
The Team
The research project was led by U-M Professor Sarita Schoenebeck. The project included 11 students divided across teams focused on site design, development, visualizations, image collection, and image upscaling. The project was funded by the University of Michigan School of Information and the National Science Foundation.
My Role
I served as the primary designer of the project website. I conducted research, helped to define the project’s scope, created a custom design system, made the final project logo, designed the site’s interface in Figma, and worked with the development team on proper implementation. I was supported by two other design team members who focused on the research process. This was a paid UX design internship position that took place over Summer 2024.
Final Result
Archive Page
The site directly lands on the archive view, allowing the user to quickly begin exploring the snapshots. The large site logo at the top of the page informs the visitor of the site’s name and purpose. The snapshot cards and filtering controls utilize a white backing, highlighting the key elements against the site’s light gray background.
Each image snapshot is housed in a square card, allowing landscape-oriented desktop images and portrait-oriented mobile images to each carry roughly the same visual weight. The standard card size also allows the site to maintain an ordered grid layout. The row alignment of the images, platform names, and titles helps the user easily scan the archive’s information. The size of the cards effectively balances showing a useful number of results while still allowing the content of each image to be comprehensible.
The archive page is intended to be as simple and clean as possible. The minimalistic approach is necessary because the site primarily holds small, visually complex screenshots. The streamlined functionality and minimal color scheme creates stylistic neutrality and lets the user focus on the snapshots rather than the interface.
Filtering
The database can be filtered by platform, feature, or time window from the horizontal control bar that lines the top of the archive page. Each filter category opens a pop-up, allowing for options to be selected with just a click. Filters are applied when the pop-up is dismissed by clicking outside the modal. The features pop-up contains a search bar to make finding any feature option easy. The date pop-up incorporates both a text box and calendar date selector, allowing the user to enter a date using their preferred method.
After filters are applied, they are clearly listed horizontally next to the updated number of results on the top of the screen. This layout allows the archive page to maintain the same fundamental structure with or without filters. Filters can be dismissed individually by pressing “X” or all at once using the “Clear” button. This system puts the user in control while clearly indicating what information the page is displaying.
Snapshot Details
Selecting a card from the archive opens a snapshot pop-up, allowing the user to view a full-sized image and see additional details. Strong page hierarchy is established with the large imagery, a bolded title, and formatted details section. Controls are grouped below the image. A toggle allows the user to seamlessly switch between the original image and a high-resolution recreation. The research process indicated the website would be utilized by educators, researchers, and lawmakers. This target audience led to download, sharing, and citation functionalities being added. Further, the user can quickly view all of the images in the archive tagged with a specifc feature by pressing on one of the feature tag buttons listed below the snapshot's description.
On desktop, adjacent snapshots can be viewed by pressing the arrows on either side of the pop-up. To avoid having page elements move in jarring way as the information changed for different snapshots, each section of the pop-up is aligned to a different side of the window. The description and relevant article section has abundant white space below, allowing for descriptions of varying length. Details run along the right bottom with icons to assist with scannability and page structure.
Search
A search bar is always accessible, prominently placed on the right side of the navigation bar. The search experience allows for search by keyword, feature, platform, or time window. While searching, auto-complete suggestions are provided, with icons to indicate if selection will search for the keyword or add a filter to the database. After a search, results can be further refined by adding filters from the archive’s control bar.
Design System
I built out a custom design system for this project, utilizing Microsoft’s Fluent Design system as a base. I largely kept the color and icon systems from Fluent, but modified most other elements to meet the unique needs and branding of the project. The site uses shades of white, gray, and black to add subtle but instructive contrast to text, icons, strokes, and backgrounds. This allowed me to precisely emphasize and deemphasize certain interface elements.
Research
Target Users
When creating the project, Professor Schoenebeck communicated the principle that the Social Media Histories site should be free, public-facing, and useful as a teaching, learning, and research tool.
“Provide an online library of social media design artifacts for researchers, educators, scholars, historians, policymakers, and the general public.”
To begin the design process, the design team drafted a list of user types who would find utility from the site. We narrowed down the list to six primary groups to cater the interface design and feature set to. The team subsequently created persona groups and assigned potential use cases which included school projects, research papers, and inspiration for new interface designs. From the use cases, we were able to tag the groups with specific design considerations. Some common features across the groups were citation support, image downloads, and feature tags. Afterward, the full project team met and discussed which features would be best to prioritize for the initial launch. To keep the design and development scope viable, we focused on features that applied to several groups or were vital to one of the groups.
Academic + Industry Researchers
Educators and Students
Policymakers
UX Professionals
Journalists
General Public + Hobbyists
Segment Description:
University professors, graduate students, and industry professionals conducting research about user experience design, social media strategy, and digital marketing.
Helpful Features:
Citation Support
Image Download
Comparison
Description
Asset Source
Needs:
Detailed Historical Data: Access to precise and well-documented historical design changes.
High-Quality Visuals: High-resolution images and accurate recreations of old designs for detailed study.
Comparative Analysis Tools: Ability to compare changes across different time periods or platforms.
Export Capabilities: Ability to download images and data for academic or professional use.
Sources and Citation: Ability to cite sources.
Comparative Analysis
To understand best practices for the design elements we planned to incorporate into the interface, the design team examined dozens of websites including libraries, timelines, archives, shops, as well as video platforms with card based layouts. Consumer-focused shopping sites proved particularly helpful as inspiration for the card layout and user-friendly filtering system. I also analyzed a visually diverse set of websites for aesthetic inspiration, drawing from several to cultivate the look of the project.
Collection of Similar Feature Designs
Findings
Filtering systems that were horizontal and sticky were the quickest to use. Frequently seen on shopping sites.
Pop-ups can be employed to contextually ground the user and minimize the number of navigational clicks.
The number of filter categories should be limited to help the site be more comprehensible to new users.
A masonry layout (e.g. Pinterest) is more difficult to scan through than a standard grid layout.
A clean and simple interface will help spotlight the content, improving the user experience.
Process
Wireframes and Low Fidelity
I used a FigJam board to create several wireframes to test out layout variations, implementing the conclusions gathered from the research process. I moved to Figma to build out the top contenders in higher fidelity, allowing me to make more precise and realistic changes between versions. Throughout the design process, I had discussions with the full team about which layouts were preferred and what feature should be added or removed to streamline the experience. I also frequently interfaced with the developers to understand the types of design elements the would be most feasible to implement.
Logo
I was also tasked with designing the project’s logo over just a few days. To start, I gathered icons from the Fluent design system icon library to reference. Inspired by the stack icon, I created several iterations with different sized rectangles and colors. The final logomark is meant to convey the concepts of design collections and evolutions. The color gradations add a pop of color to the site and help to establish a project brand. I created the icon to be simple enough for use at reduced sizes, such as the website header. I created a specific 32x32px variation of the icon with pixel aligned strokes and adjusted spacing to ensure strong legibility when used as the site’s favicon.