Key Takeaway

Restructured site architecture To satisfy needs of existing & New customers

Key Takeaway

Streamlined C-Pod calculator & PDF information creator

Key Takeaway

Created & Implemented company’s first design system

Key Takeaway

Re-vamped Team’s early-stage planning processes

Restructuring Site Architecture

Focusing On Who, Not What​

It’s much easier for people to identify who they are than what they need. Therefore, one incredibly important area of improvement for the Deployed website was to de-emphasize equipment categories and put customer demographic groups front and center

Users that needed that in-depth equipment information could still find what they needed through the menu, but now new visitors could now easily identify their first stop by what field they worked in.

To convert the architecture into a navigable menu, I worked with our SEO team to ensure labels aligned with their strategy.

This site was complex, requiring nearly 20 unique information structures and page formats

wireframing and inter-departmental communication

Getting My Team Into The Same Frame of Mind

Deployed Resources’s site was one of the more complex projects that the team had tackled. I knew communicating early and often with each other was going to be key. I coordinated wireframe discussions with my content teammates so they could give layout feedback early and begin making their preparations.

Additionally, instead of simply showing my wireframes and architecture to development for them to plan from, I initiated build planning discussions so we could discuss and develop the data relationships together.

Overall, I created 11 wireframes for this complex site, including two smaller ones for a media modal and a specifications flyout for project planning.

Due to the complexity of the page layouts, we needed to enforce strict word counts on the back-end fields. So I opted for high fidelity wireframes to allow our copywriter to be able to start her work earlier.

Back-End Interface and Data Relationships

Collaborating Together on Back-End Needs

After our meeting discussing the build plan, the development team put together an outline of the data relationships for the back end of the site.

When this document came back to me, I reviewed it for accuracy and gave guidance to the team on field requirements for data entry for the dashboard side of the site, emphasizing ease of use.

Creative intended to be the team managing the site, but we’re users too! We needed to ensure that “future us” also could update the site easily.

After discussing the IA with the dev team earlier in the process than ever before, the dev team proposed a back-end architecture to match.

Because we got started on this process early, we saved a lot of time by catching needed changes before modules were built. 

Front-End Interface And Hybrid Design-Dev Process

Unifying Many Design Tools Into One System

Deployed Resources’s site was CreativeMMS’s first build with Elementor, a front-end page builder. It was also the first time that design and development worked concurrently, thanks to my efforts at the beginning of the project.

With all these firsts, we needed clear communication—and lots of it—to keep things positively progressing. Working together with my Creative Director, we created the following build process:

  • Build Site Front-End in Elementor…

…leaving space and design surrounding areas where dynamic widgets will be placed and documenting styles for junior designers to follow up later.

  • Design Dynamic Content Widgets…

…using my guide system to mark and keep consistency between site and widgets, with any/all interactive state styles and notes for dev team. Designs are handed off to dev team.

  • Combine Into One Protoype For Everyone To Reference

Implement screenshots of widgets into Elementor site to give sense of function and use screenshots of site to build Invision prototype for dev and client viewing

  • Document the specifics

This was CreativeMMS’s first design system (rudimentary though it is) and eventually evolved into Core Home. We maintained a spreadsheet with spacing values and other important details to be consistent.

Fina UX Steps to Launch

Getting The Team Over the Finish Line

In typical agency workflows, the job of the designer ends once development starts. However, I’ve never been one for simply passing off comps.

I was involved through most parts of the development cycle to bring our vision and the client’s desires to life.

  • Assisted development team in designing and building animations for site.
  • Provided UX and design guidance on existing content. Give feedback as-needed on newly-written content.
  • Oversaw junior and mid-level designer in implementing responsive styling in Elementor.
  • Implement QA and UAT feedback from client.

Check out Deployed Resources' Site

Menu
Get In Touch
Report Bugs
Get help

One moment while the form loads...

Sign Up for a Free Account

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

You Need To Log In For That!

Log in to an existing account or create one for free to save shadows and more.

Close
Save Limit Reached: to save this shadow.

Not Enough Space: Remove shadows and try again.

Shadows Moved to Short List​

Shadows Moved to Short List

You chose a palette size that couldn’t contain your story! Don’t worry, though. We moved the extras to your Short List.