Deployed Resources Site Redesign

Deployed Resources

Website Redesign & Restructure

Deployed Resources came to CreativeMMS to overhaul their site with a modern design, make it convert customers, and optimize it for SEO.

On this project, I also overhauled many of Creative’s planning processes, instituting inter-departmental planning much earlier in the process than they had been before.

Principal Designer, responsible for: 

Project Overview

Deployed Resources produces high-quality temporary housing and deployable living solutions for emergency services, the military, and for major concerts and events.

Before Deployed brought my team on board, the site pulled in no traffic from search and converted very few visitors into leads. Our objective was to create an SEO-optimized, interactive site that could turn visitors into new customers, without sacrificing the information current customers relied on.

After personas were created, I lead the project from information architecture through handoff to development, after which I advised and implemented changes as-needed.

Special Contributions:

Restructuring Site Architecture

Focusing on Who, Not What

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

Users that needed that in-depth equipment information (typically, those who were already customers) could still find what they knew they wanted through the menu. Those who were new to Deployed, though, could now easily identify the first step in their discovery process by what field they worked in.

wireframing and inter-departmental communication

Getting Into The Same Frame of Mind

Deployed Resources’s site was one of the more complex projects that the team had tackled in some time. 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.

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.

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, because their site required interactive dynamic content modules from our development team. It was also the first time that design and development worked concurrently on the same project.

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

 Design-Build site pages to get a sense of style and elements used

  Leave space and design surrounding areas where dynamic widgets will be placed

  Document styles used

Design Dynamic Content Widgets

  Use my guide system to mark and keep consistency between site and widgets.

  Include any/all interactive state styles and notes for dev team.

Hand off designs to dev team and answer questions

Combine Into One Protoype For Everyone To Reference

 Implement screenshots of widgets into Elementor site to give sense of function

  Use screenshots of site to build Invision prototype for dev and client viewing

Document The Specifics

  Write down spacing values as-measured/observed on screen

Create tab so that designers working simultaneously can log their progress

 CreativeMMS’s first design system (rudimentary though it is). Developed into system for Core Home.

FINAL UX STEPS TO LAUNCH:

Getting Over The Finish Line

Bloomingdale School of Music Site Redesign & Class Integration

Bloomingdale
School of Music

Website Redesign & Class Integration

Imagine updating 12 site pages whenever something changes—then answering confused questions from students anyway because no one can find those pages. This was the reality for Bloomingdale School of Music’s website, and one they wanted to leave behind—fast. 

Working as UX lead for this project, I gave Bloomingdale a robust architecture and front-end experience that helped its varied user bases find what they needed—all on top of a consolidated back-end experience to decrease time spent updating the site. 

Principal Designer, responsible for: 

Project Overview

Bloomingdale’s site has three main conversion objectives: Registering students for classes, gathering RSVPs for events, and soliciting donations from its supporters. Creative was brought on to lead the non-profit from branding all the way through the launch of their new site.

I came onto the project after brand guidelines were finalized and lead the entire project from architecture through pre-launch. 

Particular challenges included: 

(1) an existing class management system that could not be integrated into the site, 

(2) wildly different events with different conversion types, and 

(3) a miniature database of information that needed to be preserved for its SEO value yet was useless to the site’s users. 

In other words: a great project. 

Special Contributions:

Restructuring Site Architecture

“The Site's So Big No One Can't Find Anything”

One big challenge for all non-profit websites is creating a content structure that makes sense of all the information they contain—while also not upsetting too much institution’s internal usage of the site. The more content a website has, the more challenging this problem becomes.

When choosing between the client and the user, however, the user wins. So I focused on Bloomingdale’s three main user groups to create a structure that cleanly separated donor, class, and event information while preserving older content that was essential to their existing SEO.

DESIGNING BACK-END DATA MANAGEMENT

“We're Tired Of Changing The Same Thing Three Times”

A huge struggle for Bloomingdale’s staff was that their site was static: Class and event information had to be uploaded on every single page—and each class had different pages for fall, spring, winter, and one for different times! On top of this, the actual registration information had to be completed on a third-party website, which meant class information had to be updated there too! 

No. We weren’t going to do that anymore. Bloomingdale would have one page per class—and only one.

I pulled together Creative’s development and SEO team to collaborate on a back-end data architecture and make clear relationships between classes and their attributes.

I ensured the right data was being captured on each page, provided solutions for duplicate URLs, and streamlined the complex qualitative data relationships so that a clean back-end UI could be made. I also advocated for solutions that required a little more work, but gave intuitive data entry fields for the user.

simplifying the process of finding classes

“We Handle So Many Class Questions That Are Answered On the Site”

The back-end of Bloomingdale’s classes wasn’t the only part of the site that needed to be re-structured; the front-end did as well. I knew that there had to be a clear and consistent path, beginning at the home page, that lead parents and prospective students to the classes they were interested in.  

I created a mega-menu for classes to assist users who knew exactly where they wanted to go. Those who were still unsure could go to their demographic first, then find a list of classes and their prices, which allows them to open several classes to compare directly.

Each page is rich with information about the class experience at Bloomingdale, so curious visitors convert to curious students.

Classes Parent
Demographic page with class list
Interior Class PAge

“All Our Events Are Free! Except the Ones That Aren't.”

One of the biggest challenges of Bloomingdale’s site—and indeed, of any site build with a client—was that the client often needed to be re-centered around the user’s experience, rather than their own.

There is no better example of this than the events area of the site—and the slight shock Creative’s team got about halfway through the project.

When we started working with Bloomingdale, their team insisted that they only had free concerts, and only a simple email registration was necessary. We wireframed and planned for this.

However, as our time went on, Bloomingdale started referencing an upcoming event called Notes From 108th, a benefit event with multiple sponsorship levels. When I investigated, I found out that this, too, was a concert! 

The Bloomingdale team never thought to tell us about their large fundraisers. To them, the fundraisers and the regular concerts were wholly different things. But to a user looking for information on the site, they would be the same. And we needed to pivot fast to account for that—and for the fact that these events vary widely in the information they have available.

Original Events Wireframe
complex Events Design

In the life of a business, complex events not being optimized may not be a big deal. But fundraising and donations are, quite literally, what keeps non-profits like Bloomingdale running. Because of this, events like the ones they described should be optimized for conversion just as much as any other part of the site.

After discussing time constraints with my project manager, I decided to wireframe an additional page for their large fundraisers. 

The late break in the project meant that we weren’t able to fully actualize on the page with fully dynamic content and a more robust events section of the site. However, I was able to build out a set of Elementor templates they could and reuse to make their own page layouts — or work with Creative to make one for them. And the wireframe remains as a guide, for them now, to get the most they can out of these events.

FINAL UX STEPS TO LAUNCH:

Setting My Team Up For Sucess

Unfortunately, my time at Creative came to an end before I could see this project through to launch. I completed all of the planning and front-end design-build; only finalizing the back-end build and getting content into place remains.

I left a detailed design system spreadsheet (similar to Deployed Resources‘) for my team to execute responsive styling, as well as comprehensive usage notes for the dev team to implement the back-end interface.

CoreHome Builders – JC Jackson

CoreHome

An MVP For The New Home Builder Market

CreativeMMS wanted to bring to a WordPress-powered web platform for new home builders to market. 

Leading the design team at Creative, I took the finalized architecture and brought the product’s minimum viable product to fruition. 

User Experience Lead, responsible for: 

Project Overview

CreativeMMS wanted to entice new home builders as a client base. To do this, we knew we needed an intuitive way for builders to create and maintain customer-oriented websites.

Enter CoreHome, Creative’s first product. CoreHome is a pre-made, site management solution specifically for builders, outfitted with special catalog management tools and a basic front-end design optimized for conversion.

CoreHome can be purchased on its own, or builders can have Creative tailor a CoreHome build their specific needs. In fact, CoreHome’s first release was one simultaneously  customized for a client: J.C. Jackson Homes.

I was brought on to this project following the project director’s exit from Creative. Taking over as the new lead, I carried the project through wireframe editing, interface design, back-end development, and pre-launch—combining the launch of a product and a client’s new website in one project.

Special Contributions:

Community interior wireframe - hover/touch to see final design
Re-Working Wireframes in Design

Bridging An Information Gap

Taking over someone else’s project is a challenge at the best of times—doubly so when the original project lead is your mentor. 

I was excited to take over the project from someone whose work I respected. Unfortunately, the wireframes I received needed work. 

Interactive elements seemed to be in unintuitive places, important labels were missing, and other strange oversights were scattered throughout the documents. I didn’t have the former lead’s notes to get insight into his decisions. So, while I typically would not deviate so far from approved wireframes, I decided it would be best for the client and the future of CoreHome to addresses these badly-needed changes.

I consulted with Creative’s development team to ensure they could plan appropriately and designed an interface substantively different from the plan. Though the improvements took time, the final product was better for it.

Building out a Comprehensive UI

A Design Document with an Eye Toward the Future

A main feature of CoreHome is its ease of deployment. It is a tool that allows Creative to deploy custom sites efficiently, with as little work for our team as possible. 

Since it was unlikely I would be executing those builds, I ensured that CoreHome’s main design document was built with nested style dependencies. This would allow future designers to make a handful of changes in the style guide which would cascade through the document, saving the entire project time. 

For both future designers and the development team, I implemented a colored spacing guide system, so grid spacing could be ascertained at a glance rather than painstakingly measured.

Leading & Coordinating with Junior Designer

Working Together Without Overrunning Each Other

In addition to creating the product’s first implementation, my team was also responsible for the client’s marketing site. I placed Creative’s junior designer, Blake Pertl, in charge of that responsibility—but he needed a place to start from.

I designed JC Jackson’s home page and an interior page in Elementor to give Blake styles to iterate upon. I also created a spreadsheet of basic styles for us both to work from so we could minimize inconsistencies between our two works.

This stylesheet approach, which I developed for the Deployed Resources build, evolved into a design system, made for Creative to use for future CoreHome builds.

Creative's First Official Design System

A System for Others to Build On

In my two and a half years at Creative, it was typically the case that one designer worked on an entire project and “owned” its future iterations. If I came onto a project that someone else had made, I had to guess at their styles and do my best to copy what I saw on the end product.

I knew that system wasn’t going to work if CoreHome was going to be a product we could roll out to a variety of clients quickly and easily. We needed a single, official source of “design truth” for future CoreHome projects.

With that in mind, I assembled a design system in Adobe XD to ensure the next builds would be easily put together going forward.

The ultimate goal was for the XD document—which housed both the final front-end interface and the design system—to serve an interactive demo for prospective CoreHome clients and also be a quick style and process reference for our team. However, my time at Creative ended before I could realize that ambition. The rules and system in place, though, will still help Creative’s current and future designers.

CoreHome's Design Principles

 Covers the guidelines of Creative’s design style for all CoreHome projects

  Provides details on our grid system, with examples of its usage

  Document styles used

Basic Styles

  Provided basic style elements: Color, patterns, borders and shadows

  Included CSS specifications for how elements should appear 

 Provided notes for implementation, such as instances a style gets used or particular Elementor quirks that impact execution of styles

Site Components: Basic

Provided interactive states in design system only to reduce clutter interface designs

 Created site elements that could be edited in one place and would cascade through the entire document

 Components increase in complexity through document

Site Components: Complex & Nested

  Included details on how the nested or complex component functions and how it is implemented.

 Styles and elements stack together to make more complex site components

  Colored guides help maintain consistent spacing through site iterations

Measuring Spacing and Layout Rules

In Elementor, spacing was a particular challenge because of the defaults the builder adds. There had also been consistent miscommunication about measuring spacing between design and development team. This section was particularly robust to attempt to fix those problems. 

 Provided comprehensive guide for how to measure spacing in Elementor, and common ways designers measure space

 Defined critical terms used to describe spacing areas throughout document.

  Noted common column widths, particularly those not placed in site builder

  Integrated responsive style spacing spreadsheet with spacing values

FINAL UX STEPS TO LAUNCH:

Launching CreativeMMS's First Product