UX/UI Case Study: CIA Website Redesign
Content
Overview
My Role, Timeline, Tools
Process
User Interface Analysis, User Interface Design, Prototyping
Key Takeaways
Future Opportunities
Overview
The CIA.gov website user interface (UI) was outdated and needed to be redesigned.
The Central Intelligence Agency is a civilian foreign intelligence service of the federal government of the United States, tasked with gathering, processing, and analyzing national security information from around the world, primarily through the use of human intelligence.
I redesigned the CIA.gov website by conducting usability tests, creating a uniform style guide, restructuring navigation systems, and iterating results.
My Role
UI Designer
Timeline
The timeline for the project was about two weeks.
Tools
Adobe XD, Miro, Card Sorting, InVision, Adobe Illustrator, UsabilityHub, Toptal, Giphy
Process
User Interface Analysis
Proto Persona:
Richard, 42, is married with two children and looking to start a career with the CIA. He works long hours and is a self-described workaholic but he wants to be able to make enough money to spend more time with his family.
User Flow:
On the current CIA.gov website, this is how Richard would be able to apply for a job:
Heuristic Evaluation:
Though the overall aesthetic design of the CIA.gov website is outdated, the design is consistent with colors and fonts. However, the UI is not consistent with the primary goal of the website because it is a government agency that lacks the weight of professionalism by using cartoonish imagery, informal link names, and a lighter color palette.
The copy is clear and uses non-technical jargon but the organization of the information is not clear. The navigation patterns are outdated in aesthetic design and are confusingly organized but you feel like you know where you are in the website.
View the heuristic evaluation here: https://docs.google.com/spreadsheets/d/13HHssdGHeXlRZYaCwPC79L6CComhP-7bqTiERPqR6DY/edit?usp=sharing
Accessibility:
The website was successfully able to screen read on desktop and mobile.
I used the Toptal Color Blind Filter to test the most common color-blindness, protanopia (red/green), on the website. The website did very well because it was still easy to read and distinguish color variations.
Usability Testing:
I conducted three desktop and four mobile tests.
Apply for a job on the CIA website as a Technical Targeting Analyst.
Find the CIA postal address on their website.
Find China on the World Factbook and read about it.
Play “The Word Find Game”.
Usability Testing Analysis:
One user was not able to finish the task because they navigated through an unexpected way. Another user struggled with the job cart icon.
Solution: Make sure there is only one page for Technical Targeting Analyst that you can apply to. Make the job cart icon easier to identify, put it closer to the ADD TO JOB CART button, or completely change the applying for a job setup.
Users expected the postal address to be on the footer because they had seen it on other websites. One user did not notice the contact button. Other users saw the contact button.
Solution: Put CIA postal address in the footer. Make the CONTACT US button bigger and/or in a different place.
All users struggled a lot to complete the task due to confusion of the navigational structure and link names.
Solution: Reword NEWS & INFORMATION so it just says NEWS so user won’t be confused by the word INFORMATION. Need to card sort to see how to categorize World Factbook. Dropdown menu for searching countries should be bigger and centered on the page or left-aligned.
Users completed this task with ease because they related games with kids.
Solution: N/A
Annotations:
I annotated all of the pages linked in the main navigation, which were five pages in total. I made descriptive notes and identified navigational patterns including: categories and time. I identified UI design patterns including: content chunks and cards.
Card Sorting:
All links were written on notecards and organized into categories. I find card sorting hard to do and I am lucky I had other people to help me.
Before
After
Sitemap:
The results gathered from card sorting were turned into a sitemap. I did move a few links around that I felt were not in the right place during the card sorting process. I renamed some of the links to be concise and more formal.
User Interface Design
Wireframes:
I created wireframes using inspiration from some websites that I saved to my InVision moodboard along with similar, but updated, UI elements that were on the existing website. I layered a few different column grids into the website and iterated many different card layouts. I went with a 3-column layout grid for the cards. I wanted to add a short copy section on the home page that explained what the CIA does so users could quickly understand the purpose of the agency.
UI Components:
I created UI components using component styles I researched and saved to my InVision moodboard.
Prototyping
Low-Fidelity Prototype & Testing:
I used Adobe XD to turn the wireframes into a clickable prototype.
Style Tile:
We figured out early on that a dark UI design would be our preference. It seemed reminiscent of a cinematic experience and we assumed our typical user might be using our app in a dark room often.
Paper Prototype:
We used the Task Flow to create the Paper Prototype. Each group member created their own prototype and we ideated what we liked from each.
We ideated what we liked from each of them, which included:
Customizing their home screen, like a dashboard, by adding, deleting, and rearranging the categories to add more personalization for the user, thus making it easier for users to quickly choose what they want to watch.
Displaying the mood category on the search page, similar to a Spotify feature, due to the high ranking when card sorting.
A dedicated “Friends” bottom menu option due to the popularity of “word-of-mouth”, which is how most users decide what to watch.
Movie/TV and streaming platform labels for quick identification, which we discovered when doing competitive analysis on another app, which quickly lets the user know where the movie/tv show is streaming
Low-Fidelity Prototype & Testing:
We prototyped using Adobe XD.
Key findings from the user testing of the low-fidelity prototype included:
All of the users struggled with customizing the home screen, they had difficulty adding & moving categories.
A user did not like the word “Save” in the bottom menu as it confused them, they thought “watchlist” was more appropriate.
A user said that the search could be faster and thought the task they were given was not reflective of the average user
High-Fidelity Prototype & Testing:
We took into consideration all of the user feedback and iterations from the Low-Fidelity Prototype. We then applied the UI Style Guide and created the High-Fidelity Prototype.
Key findings from the user testing of the high-fidelity prototype included:
Users were able to successfully and easily complete all tasks
Users thought the app was easy-to-use
Key Takeaways
Users understood the purpose of the website and what they are able to do
Users found navigating the About section to be easy
Users understood how to navigate the Offices section but did not understand what the Directorate was and most couldn’t count how many Directorate office there were
Users found navigating the Careers section to be easy
Users were able to find books on the CIA very easy under the Resources section, which was a renamed section
There was still some difficulty with finding the postal address because the Contact button did not work and they still think it’s under the About or Offices section
Most users agreed that they knew where everything was when performing tasks
A user suggested adding the word Office after each Directorate office
A user suggested putting the postal address in the CIA Headquarters page
Most users were frustrated with having to double-click on the header to get to the main section, they wanted to click underneath the section title as opposed to on it
Most users agreed that the website was easy to navigate in order to complete the tasks
A user confused Additional Resources with Resources during mobile testing
Future Opportunities
Changing the title of Directorate might be necessary because users didn’t know what that word meant
Applying the user suggestion of adding the word Office after each Directorate office would help to eliminate confusion
Expanding the prototype to have the Contact button work
Expanding the prototype to include the CIA Headquarters page and putting the postal address in there
Adding links under the main navigation menus to avoid double-clicking and confusion with the prototype
Rename Additional Resources to eliminate confusion
Some things I, personally, would like to change:
Making languages a dropdown menu so it can expand to see the different languages the page can translate to
Expanding the Careers section in the prototype in order to test the job application process
Adding the phone number in the Contact information
Putting Books on CIA & Intelligence on the Publications page under the Resources section (books are publications so those links can be consolidated)