Some of the details in this case study may be vague to protect the client's intellectual property.
Working to a tight deadline, I delivered a fully-functioning website from conception to production for Manpower and Reserve Affairs of the United States Marines Corps
Thanks to stationed Marines, the prototype, and an iterative approach, the website redesign was completed on time.
This site is meant to support the entire Manpower and Reserve Affairs department, providing information to different departments within the Marine Corps. In addition to an overwhelming amount of content and with constant changes to military positions, there was an exponential number of people making changes and adding content that was not monitored.
When this website was created, the user experience was not a priority which resulted in an unmanageable website that was not easily navigable. The customer wanted to create a website that would be intuitive for the user and also standardize the look of all websites and applications managed by Reserve Affairs.
With an account close to expiration, the customer didn’t want to miss a key opportunity to redesign the website experience. This shaped the timeline and which services to provide to the client. I had to approach it strategically and cut out complexity. For example, with many levels of approvals to get through, I planned accordingly so we were not waiting or disrupting progress.
Although I found that majority of the users were on desktop, it was important to improve the mobile experience from the beginning. The website had not been optimized for mobile users. Implementing responsive design was one of the goals for the redesign.
The better a problem is articulated, the easier and more effectively it can be solved.
User experience was a new concept in the military and the customer was unfamiliar with design processes. Fortunately, leadership was eager to learn and improve. With many frustrated users, our main goal was to get to user-driven thinking.
In order to keep everyone on the same page, I held workshops to analyze key problems and discuss the overall project. The customer was involved in the planning and took time to learn the value of user centered design.
On the surface, the client knew the site was not user-friendly, but we took the time to dig even deeper into problems and how to prevent them in the future.
After joining the team, it was easy to understand the what and the why, so I moved onto the how. I assessed the current website interface and user experience to become familiar with the product. I conducted a UX audit, evaluating usuability heuristics to dive deeper into the site. From there I came up with the plan of attack and the next battle was getting to the know the users, understand their objectives, and review any collected data and analytics.
I created and presented a brief to senior leadership of the projected timeline and detailed the steps of the design process. The goal was to help bridge the gap, keep the team on track with clear responsibilities, and record potential blockers.
By mapping the site, I found pages far beyond reach that were most likely forgotten and now I could keep track of every bit of content there was. I walked through all conceivable user journeys and possible paths. There were 25 departments total with an average of 8 pages with 5-8 child pages and also had 4-10 grandchild pages. With a sitemap of each portal, I met with the heads of each department to go through their portion of the website and start cleanup.
Realizing that I was working with a massive website, I decided to treat each department portal as its own website. I separated the research and conducted the same research process for each. This made it easier to start user research and get better results from any collected data.
I conducted interviews with department heads, content editors, and portal managers to understand their needs, goals, and expectations. I also met with Marines who visit the website as a consumer to get a clear picture of their behaviors and experiences. For example, I would also setup a few scenerios for my subject such as having them find a specific document or department.
The scope of focus for users visiting this website are very granular. Content and information presented are specifically for active, veteran, civilian marines, and military families. Active duty members could be as young as 18 years old while veterans could be 50 years old and up. This was important to consider when creating user personas.
22 year old Allen is approaching his discharge date. He has 4 years in the infantry of the Marine Corps and is deciding on what to do next. Looking at his options, he is considering going to college. One of his benefits as a veteran is the GI bill and he is interested in learning more about this. To find the information, he navigates to the Manpower and Reserve Affairs website.
I launched a few surveys on the website using hotjar to determine whether users knew how to navigate through the website. Heatmaps were captured and helped determine top clicks. I watched 50+ hours of user session recordings to understand behavior. Interviews were setup in each department, meeting with a number of people of different ranks. Two methods I used in interviews were tree testing and card sorting. First, subjects would find items in the site architecture. Then, they would group cards of the IA that made sense to them.
User testing results and interviews structured the information architecture. From watching users, I found pain points and areas to improve. I also determined high valued items on the website and most visited pages. Example: more than half the users that visited the website did not find the content they were looking for and most would give up and leave. There were a handful of people who were veterans of the site, and knew exactly where to find what they were looking for.
The final product overall was a managable website able to support large teams of content editors and portal managers within a department. With templates using a now standardized look following Marines brand and style guidelines, we could now handle website changes from all personnel. From the development of the website, we were able to start working on a micro design system that could be followed by developers and non-developers.
Now with multiple ways to navigate within the site, we gave control back to the user. They have the ability to follow breadcrumbs back to top-level pages, a simple top menu to quickly navigate to high level pages, and a expandable side navigation that opens to the user's current position. I developed the website with a mobile first and user-centered approach.
Information is the reason people visit this site. Not only is it important to make the content valuable for the user, but it is equally important is to make sure that the content is easy to find.
Wireframing allowed me to structure the website while being able to identify usability issues early on in the process. Leadership could digest the experience without the distraction of the visual elements.
To test the designs with users I created 4 prototypes each showing a unique navigation flow. The goal was to confirm the design was heading in the right direction.
This link will become active once I’m able to share it.
From the website, I collected components and created a design system. With help, I found similar components across our applications, and standardize them.
This link will become active once I’m able to share it.
A polished experience and interface for portal registration and account maintenance.
Imagining a better tool for career planning, accounting for variables others might not consider.