Goals and background
When WOS approached me over a year ago, I was immediately drawn to their cause, the passion they had for it, and the great work it was clearly capable of. Right off the bat, the materials they came to me with were pretty dated and badly in need of a refresh. I knew they needed to adopt more of a startup mentality in the way they communicated their services to both recruits and clients.
The goal was to give the brand more of a cohesive look and feel across all communication points, infusing some attitude and modern cues into their messaging and presence. Changing the perception of the company in the eyes of both of their target audiences, while keeping the message consistent would be key to our success. In the past year, we have done a lot of great work together, on interactive, digital solutions but also more traditional marketing collateral.
Workforce Opportunity Services
Helping a brand rebuild America's workforce
WOS is a mission-driven nonprofit organization that recruits young adults from underserved communities and veterans, and helps train and place them in professional careers through skill-based education and mentoring programs.
The work WOS does is amazing, allowing these people to succeed, while also allowing the companies that hire them to invest in raw talent without risk. Filtro and I were asked to create a digital platform that would help recruit for the program and generate leads with new corporate clients.
My role
UX & UI designer
Managed engineering team to build website
Coordinated both Visual Quality Assurance and Functional Acceptance Testing
Client acquisition & relationship
Development
Year
2017
Research brand and content
Because we were working on so many different projects for WOS simultaneously, there was the opportunity to do extensive research and carry our findings from project to project. By showing rounds of work to client, and having more and more in-depth conversations about the true role of the brand, more and more information was uncovered and applied to future rounds and projects.
The key branding challenge was the segmentation of their audience, but in 2016, the goal was to expand their corporate partners and clients. So, we decided to shift the focus away from recruitment and speak more directly to the companies hiring their services. Our key reason to believe would be the cost-efficiency of the model. We would use content and messaging touchpoints to convey that WOS was developed in the classroom and proven in the boardroom, and once the opportunities were created through client acquisition, the recruits would come naturally.
Define high level functionality and requirements
With subject matter as complex as academia-based hiring models, as well as an audience of CEOs and other high-level corporate leaders, we knew we had to get their attention fast. So, our mission was to create a homepage that would provide all of the information needed for a prospective client to want to dig deeper, while also being visual and dynamic enough to keep them interested and engaged. This was no simple task, but with high level homepage functionality that told a visual and verbal story from beginning to completion, we knew we could capture a user’s interest above the fold and keep them scrolling.
The best digital platforms are the ones that clients can customize as well as developers can. Well, maybe almost as well. My team designed and built CMS tools from the ground up for maximum ease and maximum control, working with the WOS marketing team along the way to make sure all of their editorial needs were being met.
How it was built
color palette
The color palette WOS had used for years was very bright, with mostly primary colors. If we were going to speaking in such a sophisticated and academic manner, we knew we had to adjust to a swatch of colors that better fit this tone, while also remaining attractive to potential recruits.
WOS wanted to retain some of the equity they had built in their brand. We worked with these constraints and shifted their current royal blue to a more authoritative navy, and their bright red to more of a deeper brick. The combination was more elegant and more modern, without leaving too much on the table in terms of brand recognition
red
hex D64428
light gray
hex F1F1F1
medium gray
hex 9E9E9E
charcoal
hex 444444
navy
hex 2C3442
stone
hex 76A7B3
Typography
WOS’s use of typography up until this point had been very disjointed and sprawled, with many different typefaces used across many different materials. Right away, we knew we needed to condense their use of fonts to a smaller set that could help define their brand look and feel.
We wanted to retain aspects of their logo and use it to inform a global typeface. Through this process, we selected Adelle Sans, in large part due to its versatility and the need to live across many different media platforms. It is unobtrusive by nature, but also unique and refined, much like WOS which purports to aid in growth and sophistication with minimal disruption.
The macro experience
Once we developed the basic foundation for the content and small details of the site, it was time to zoom out and start visualizing the user experience and journey.
We went through many iterations of site framing to determine the best way to highlight WOS success stories, while also infusing more functional operations like open positions for recruits. In the end, we came up with unique solutions to help tell the story of WOS in a broad sense, while still making elements like workshops, events and community programs accessible to users and as close to above the fold as possible.
Wireframes
Sitemap
When you first start with a project, you need to get down to the core guiding themes that will inform all of the pieces that break out to create the content and the user experience. So we started with the smallest elements of the project and the little details.
We knew how important it was to show success stories to our prospective clients, in order to make them feel secure that this is not just a scientific experiment but a proven method for helping them expand their operations. So, we decided to frame the content flow around photos, names and stories of real people who used WOS to success, both on the client side and the recruit side. This insight and approach would help us frame the entire website in a visual and verbal sense.
The micro structure
Marketing materials
The purpose of the WOS digital brochure we created was to illustrate a wide swath of value proposition and services on one piece of collateral - never an easy challenge. We succeeded in creating a piece of content that did WOS’s entire story justice, while using succinct messaging and powerful visuals to keep the reader engaged.