MWN
–– IA Overhaul
Site Redesign
  • Large-scale website redesign.
  • Deconstruct, evaluate, reconstruct.
  • Get to know the users.

01/ Summary

What was delivered and how

Information icon
Under a non-disclosure agreement

Some of the details in this case study may be vague to protect the client's intellectual property.

02/ Understanding the Project

The first step was understanding the project including the requirements and challenges.

Overwhelming amount of content

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.

Tight deadline

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.


Something missing

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.
Nielsen Norman Group
View article

UX maturity: absent

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.

A whiteboard depicting 2 columns of writing and sticky post-it notes.

Workshops and learning

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.


Root of the problem

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.

03/ Solution

Breaking down the information architecture and getting to know the users.

Discovery and strategy

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.

Determining the timeline

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.

The sitemap

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.

Handling a large-scale website

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.



Gaining insights

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 users

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.

Research. Research. Research.

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.

Findings

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.



Main Homepage Heatmap


Survey: Did you find what you were looking for? Y/N
What other information would you like to see on this page?




Unmoderated testing: User Session Recordings

04/ Outcomes

User-centered design

Manageable and scalable

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.

Easy navigation and responsive design

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 Architecture
Content organization

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.

Wireframes
Outlining information

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.

Prototypes
Click-through designs for user testing

To test the designs with users I created prototypes each showing a unique navigation flow. The goal was to confirm the design was heading in the right direction.

Design System
Using components to solve problems

From the website, I collected components and created a design system. With help, I found similar components across our applications, and standardize them.

05/ More Case Studies

Recent projects

Previous Case Study
Provider Portal Registration

A polished experience and interface for portal registration and account maintenance.

← Read Previous Case Study
Next Case Study
Career Application Concept

Imagining a better tool for career planning, accounting for variables others might not consider.

Read Next Case Study →