CHALLENGE: The Enterprise Architecture team needed to redesign their internal website. There was no graphical interface to the site. It was a directory of every file and folder ever created for the EA group without any hierarchal organization.
TARGET OUTCOME:
ACTUAL OUTCOME:
TOOLS USED: Post-It notes, Photoshop, Illustrator, Codepen.io,
This is a wireframe of the original site:
INITIAL RESEARCH
After conducting information gathering interviews with people across F5 Networks, I learned about the main pain points concerning the site.
1. Knowledge Gap:
Few people fully understood the role of Enterprise Architecture. No one outside of the Enterprise Architecture group was even aware they had a website.
2. Difficult to Use:
There was no interface to their site. It was an open directory of every file and folder ever created for the EA group without any hierarchal organization.
3. Email Reliance:
These issues led people in the IT department to rely on emailing people within the Enterprise Architecture (EA) group for all of their needs. This email reliance made for a losing situation for everyone. The EA group’s workload increased, and people were not able to access information and documents in a timely manner.
CONSTRAINTS
All internal websites for F5 have to follow the same template. There is very little room to customize anything. Also due to limited engineering staff, there was a backlog to get the new site live. Thus, being able to quickly iterate and validate the new design was imperative.
This is a wireframe of the template that had to be followed:
My Role: Information Architect, Usability researcher, Customer Experience Designer
I was the UX lead for this project. I designed, drafted all stages, tests, coded clickable prototypes, and artifacts in creating the new site. By introducing two different test cycles for navigating the site, I was able to define metrics that allowed for data-driven design that could serve as a template for future site redesigns in the department.
PROCESS
Card Sort: This diagrammed all the files and assets for the existing site. This allowed the team to get a visual of how much data there was to organize.
Initial Insights
Any file that hadn’t been used in a year should be archived
There were 3 main requests that people usually had for the EA group:
Needing AD(Architecture Design) Documents,
learning what time the EA group would hold office hours
Status of the Architecture Review Board(ARB)
In addition to creating a new site, there would need to be a marketing push for greater understanding of the group's role and services within the IT department. However, the most important thing was to model a sample site to gather base line metrics so we could optimize navigation. The backlog to have internal sites built was 6 months, and we needed to make sure we were thoroughly testing our layout.
Navigation Usability Study
Insights
The most important items needed to be prioritized at the beginning of the nav bar, and should also be accessible through the tiles on the side. This would accommodate a greater variety of navigation styles to quickly navigate the site to get the information or documentation needed.
Surprisingly, no one thought to look at the alphabetized directory. This was scraped entirely to make room for other Enterprise Architecture initiatives like ShipIt Day and Simpli5.
Changes:
Moving EA Office Hours to the top of the right side menu, for easier access.
Moving the ARB Status to the left column, as most people's eyes scanned that column first. Also after many people submit an AD Document, they will want to track it, so it only makes sense to keep these items aligned.
New Version for the Second Round of Testing:
Selected Results:
Task 1: Reduced navigation time by 90%;
Task 2: Reduced navigation time by 27%
Task 3: Reduced navigation time by 73%
Final Thoughts
Creating a live mockup for users to test was invaluable in creating the baseline metrics to improve upon for the final layout of this site.
By conducting two main usability studies and reviews to help iterate on the design, we were able to quickly optimize the layout. Thus helping the Enterprise Architecture group launch their new site one time.
Final Version
