Role & Responsibilities: UI/UX Designer and Researcher
Team size: 4
Tools: Figma, Mural, Zoom, Otter and Google Suite
Time line & Scope: 5 weeks
OVERVIEW
National Transportation Safety Board is a government investigative agency responsible for civil transportation and accident investigations. We were asked to redesign the website for desktop and mobile that was responsive and easy to navigate so users can understand the purpose of the organization and locate information that was needed without needing help or getting frustrated.
RESEARCH + UNDERSTANDING
01 Heuristic Evaluation Interviews
We conducted 6 heuristic evaluations to men and women from diverse backgrounds to determine if users can understand the purpose of the organization, locate the information they are trying to find, and see if they can interact with the page without assistance or frustrations.
02 Affinity Diagram
From our heuristic interviews, we pulled together our insights, wrote each on a Post-It and stuck it on the Mural wall. From there we found patterns in the data that would become our user trends. These trends would eventually form the foundation of our persona, or targeted users for our web app.
03 User Persona
After completing our evaluations and developing a strong understanding of our user and their needs, we created a persona that encompasses NTSB user behaviors and needs. My persona is a synthesized narrative of the typical user of the site. Bill Jenkins is a 62 year old retired Air Force grandfather who loves handing out with his grandkids, grilling and watching football. We regularly referred back to his motivations and anxieties when considering design decisions.
04 The Research Plan
Research Question: Can a US citizen navigate to NTSB webpage and understand what information is available and retrieve information they want?
Assumptions: 1. A regular person would find this page and want information located within it 2. The information available would appeal to someone who doesn’t work with a transportation authority
Hypothesis Statement: A typical citizen can come to the NTSB website, comprehend the objective and successfully navigate through the pages to look for safety recommendations, locate a training seminar, and see the latest NTSB news headline.
Method: 1:1 Interviews // Test Dates: 6/6/20
Location: remotely via zoom recorded interviews
Participants: Any US citizen aged 18+
UX STRATEGY
01 Feature Matrix Prioritization
To ensure we had the users needs in mind we created a feature matrix prioritization. We did this by voting on which features were key to the user and placed it on the "map" between high and low effort and least and most important. We put our focus on the features we deemed “Most Important” that required the least amount of effort.
02 Card Sorting
With various pages and options to choose from, we began the process of card sorting to figure out if each title of the page belonged under the primary navigation. We began to place cards together to see if it made sense. If the cards did not apply to the primary navigation it was either discarded or we changed the name of the pages to apply.
03 Information Architecture/Sitemap
We built a hierarchical map of how the navigation would be structured. This would be the structure of the site redesign, so it was important that, based on the results of card sorting and research, the site map flow and that the taxonomies be scalable into the future.
CREATING THE PRODUCT
01 Logos
02 Mid Fi
03 User Testing
With our working prototype, we were ready to test it with users.
Our goal in user testing was to determine if users that arrive to NTSB page can understand the purpose of the organization, locate the information they are trying to find, and see if they can interact with the page without needing help or getting frustrated.We had the users go through a series of tasks to see if they were easy to accomplish.
Our goal in user testing was to determine if users that arrive to NTSB page can understand the purpose of the organization, locate the information they are trying to find, and see if they can interact with the page without needing help or getting frustrated.We had the users go through a series of tasks to see if they were easy to accomplish.
04 Testing Results
We had six user tests on mobile and desktop.
From the user tests we found that the success rate wasn't where we wanted it to be. Users still had a hard time completing the tasks so we had to make some changes based on the feedback we received to make navigating through the interface user friendly.
05 Color Palette
We began playing around with images and colors by developing a mood board. After we discussed our ideas the decision was made to go with secure/serious palette - a combination of blues, greys and a hint of green. We chose the San Francisco compact and regular typeface to give the site text that is clear and easy for navigation. The brand images were selected to give users the idea what we were trying to convey as far as the purpose of the site.
06 Final Designs
Desktop
Mobile
THE PROTOTYPE
Mobile
Desktop
THE CONCLUSION
Iterations
1. Make all of the elements (buttons, text, photo sizes etc) uniform across the different pages.
2. Change the text size and location on the hero images and increase the text size for body text.
3. Spell out NTSB on the homepage (user didn’t understand what the site was until after reading the “Who We Are” section.
4. Add a “home” icon; the logo didn’t translate fully to users as the link to the homepage.
5. Include horizontal arrows on the horizontal scrolling areas.
6, Add a sort button to the seminars page.
7. Rename “Media” to News & Events.
8. Move seminars into the safety section, or give re-define the term for what the seminars are so that they flow more cohesively.
9. Use breadcrumbs to help navigate.
10. Consistency in terms of font sizing and spacing throughout the whole web page.
Key Takeaways
The government agency website design was a big challenge for us. Not only redesigning the site itself but also working with people that never worked together before. We had a rocky start, but once we found out each other’s strengths and weaknesses, we were able to accomplish what we needed to be done in a short amount of time. Everyone on the team had great ideas; unifying those ideas and coming to a consensus was also a challenge for our group. Making compromises and considering the team goals (rather than individual preferences) was necessary to keep moving forward. Having good communication and holding ourselves and each other accountable for tasks was key to completing our work.
Design
The other challenge was working with a website that had so much information. Content chunking and a better content strategy would have helped us consolidate all the information more effectively and efficiently. We’ve learned that content organization is a critical part of the design process, and it should be done early on. Committing to the style guide more closely would have helped us avoid inconsistencies. With a very heavy content-based website such as this one, designing for mobile devices was difficult. We look forward to learning more strategies and techniques for responsive design.