Truman Campaign Website
Translating President Truman's campaign into a modern interpretation
Overview
Timeline
3-4 weeks
My Role
UI/UX Design, Experience Design, Branding
The focus of this case study was to create an accessible and approachable campaign that would best visually encompass President Truman's "everyday man" archetype.
Deliverables
Mobile website prototype, Product mockups, Process
Brief
For this case study, a random historical president was chosen to translate their campaign into a mobile website. The website also needed to include an interactive component along with outlining the majority of the president's main campaign policies. How would a historical presidential campaign without any technology be translated into modern-day social media and applications? This is what I aimed to explore in this presidential campaign website case study.
Mobile Prototype
My main goal was to feature the human side of Truman and to show the "everyday man" archetype that would best help him relate to majority of the American population by emphasizing Truman's working class past.
I also utilized softer colors of the American colors to create a more approachable and friendly aesthetic compared to the traditional bold red and white.
THE FLOW
Landing Page
This is the landing page for Truman's main campaign page. On the main page, the user is presented with three separate blocks of information, including "Campaign Updates", "Donate", and "Contact" on the first page.
The first initial call to actions that are presented to the user are the "Join the Movement" or "Volunteer" and the "Donate" actions as these are the two most impactful actions a supporter can take and I designed a fixed bottom menu header for these actions so that as the user navigates the site, at any point they can conveniently choose a C2A.
THE FLOW
The Menu
For the menu, I decided on a pop-out type of menu to create a less invasive environment compared to an all-screen menu. I utilized the stars of the American symbol and created a gradient to contribute to a linear and almost storytelling effect.
At the bottom of the menu, there are also social links and contacts for the user to engage further.
THE FLOW
Positions
One of the most important components of a presidential campaign site are the issues and stances that the candidate takes on different policies and the interests of the American people. For the interface, I chose to display the different positions as reveals with the option to "read more" if the user chooses.
THE FLOW
Take Action
The "Take Action" page is split up into four different actions that the user can follow. These are the call to actions of the website and also utilize a gradient color blocking to linearly highlight the most impactful action (to Donate).
The "Donate" screen featured select donations to help encourage the supporter to auto-select an amount that is beneficial for the candidate. The volunteer page features a signup form and beneath that, a list of "volunteer duties" for the potential volunteer to understand the commitments of the role.
THE FLOW
The Shop
The merchandise shop features different select products that feature Truman's branding. Users can purchase shirts, hats, and signs to show their support.
The flow of the shop follows a minimal mobile interface where the products are featured in a grid for clarity and detail, the options for each item are present in the main screen, and the checkout screens allow modification to the order and a visual overview of each product, and the confirmation of purchase button.
THE FLOW
Interactive Component
The interactive component of the website features a visual representation of President Truman's promised policies.
A visual representation is easier, more enjoyable, and more memorable compared to traditionally written policies and would help to establish these ideas in the user's memory.
It features a storytelling feature that is controlled by the user to see what the effects of this proposed policy will look like in the following year of the presidency. I created vector illustrations with a gif and video effect to the settings for the user to see the gradual change in the illustration.
Live Prototype
Check out this live prototype to navigate through President Truman's policies, his humble life background, his time serving as an American soldier, and test how the merchandise shop would function.
TEST THIS PROTOTYPE FOR YOURSELF! 👉
PROCESS
Research
The initial part of the process was beginning the research. I went through different governmental sources depicting Truman's journey to the White House. Through the research, I aimed to answer the following questions: Who was Harry Truman? And what was his background as well as his approach for his branding towards becoming president? Who were his rivals and how did he stand amongst the candidates in this presidential race? and to also understand the socio-political context of the 1948 presidential election.
Harry Truman
33rd President of the United States, (1945-1953)
Quick Facts:
・Vice President to Pres. Franklin D. Roosevelt and he became president after Pres. Roosevelt passed away in 1945.
・He was a WWI Veteran
・The president that helped make the decision to drop the atomic bombs on Japan after their refusal to surrender
・Created the Fair Deal (Social Security, public housing, etc.)
・Created the Truman Doctrine
・Was involved in the Cold War
Pre-Presidency
Harry was born in 1884 to a farmer family in Lamar, Missouri. He attended his father's Presbyterian Church Sunday School. He went to Europe during World War I as a captain. He married Elizabeth Virginia Wallace in 1919.
Key Policies & Events:
・Civil Rights (He started working closely with civil rights groups and fighting against segregation)
・Social Security (Truman pushed forward many progressive programs to create assistance for the American people)
・Wartime (World War II, the Korean War, the Cold War are all a host of things that Truman guided the American people though)
・Fair Deal (A list of proposed policies and organizations that Truman believed would help the American people and create more equality in our system)
United States of America
Country in North America, 244 years old
Quick Facts:
・World War II ends officially after the atomic bomb introduction in 1945
・The Cold War immediately begins in 1947
・Tensions with the Soviet Union were high and remnants of the previous Red Scare
・The Space Race begins the next decade to continue the tensions with the Soviet Union
・The USA struggles with severe postwar inflation
・Congress enacts federal rent controls
Historical Events
In 1945, the world officially ended World War II and were dealing with the economic, social, and political after effects and immediately after WII, the Cold War began and this is the world that Truman was campaigning in. He needed to appeal to the American public in one of the most tumultuous, yet hopeful time periods.
METHODS
Observation + Competitive Analysis
In order to get a good idea of where to start, I analyzed different presidential marketing campaigns from as far back as possible to current day novel campaigns that are utilizing social media and mobile app platforms more often. I made sure to take a look at campaigns from different political sides and perspectives to get an overall holistic view of how marketing has been used to convey the presidential candidate's ideas, personality, and overall branding across to the citizens.
Observing these different campaigns also helped to understand the standard that has been established (i.e. Introduce candidate, state their stance on issues, donation link, etc.) and after understanding these standards, being able to push past them potentially and create innovative approaches that have not been done before yet.
PROCESS
Flowcharts
To start out the design process, I began creating a flowchart to establish the foundation of the user journey and to understand where possible pain points could arise in navigation.
I created the landing page as the foundation and organized by page and created a system to visually represent the content pages and the buttons and call to actions of the flowchart to better represent the functionality.
FLOWCHART VERSION 1.0
FLOWCHART VERSION 2.0
PROCESS
Sketching/Initial Planning
I sketched out some initial ideas for the website and for Truman's overall branding. I needed to plan out different ideas for the innovative function of the website to keep the user engaged throughout the website.
These are some different sketches and ideas that I went through after completing the historical research that was needed to inform these decisions.
PROCESS
Low-Fidelity Prototypes
For this part of the process, I began to create low-fidelity prototypes to start laying down the basic foundation. I began to build out the skeleton of the website to design the first initial user decisions of the campaign website.
I also experimented with different and funky menu designs that acted a bit unconventionally and may not be as common in presidential campaign websites to appeal as a more approachable candidate.
CONCLUSION
Takeaways
The faster you fail, the better off you'll be. This is the main thing I learned as I struggled with creating an interactive component that was strictly 2-Dimensional and having to learn how to work with what I had available. I also learned the importance of focusing on creating a system rather than an individual brand and aesthetic because to accurately portray a person's personality, consistency and accuracy are extremely important.
Next Steps:
・Build out a functioning desktop website version
・Build out the interactive component to be more functional
・Focus on more research related to the menu interface to better understand possible psychological factors for users in that area
