Unboxed Technology

Strategy, Responsive Website Design and Development, Wordpress Integration

Background

Unboxed Technology crafts simple, human-friendly training, sales, and performance management solutions that help employees do their jobs better. Unboxed’s products and services are incredible in their own right, but what really sets Unboxed apart from others in their space is their mission and team. Unboxed is a group of honest, down-to-earth people working tirelessly to make it easier for anyone to learn and be empowered by their knowledge.

When Unboxed approached us about partnering with them to create their new site, we were incredibly excited to work with such a great team. Unboxed had previously done their web work in-house, but chose instead to work with our team of web specialists to help lead the process and collaborate with their team to build the new unboxedtechnology.com.

The Challenge

Unboxed has an incredible amount of depth in their products and services. The number of products they build and maintain and the comprehensive list of services they offer to help support and bring their products to life are impressive. Our first challenge was to really understand exactly what Unboxed does — the products they build, the needs those products meet, the relationships between the products — and to then figure out how all of the services they offer fit into who they are and what they create. After putting all of these pieces into place, our next challenge was to create an engaging, modular and expandable, fully CMSed website that was easy to use, clearly communicated their message and embodied the energy, excitement and personality of Unboxed.

The Solution

From the very beginning, this project was set up to be one of our most collaborative projects to date. It was determined that the new Unboxed site would be deployed in two stages, which meant that as Phase 1 was being developed, Phase 2 would be in design. To ensure everything moved smoothly between these transitions, our team worked in tandem through each phase on the various parts to keep the project moving seamlessly.

Strategy

The most significant phase of any web project is the Strategy phase, and we faced a big challenge in identifying the best way to organize Unboxed’s site and content. By working closely with Unboxed’s sales, marketing and content strategy teams, we were able to identify that a lack of hierarchy on their site was a significant barrier that was preventing users from understanding the information on the site.

screenshot of the product categories/sales journey on the homepage

Our solution was to employ an organizational structure and hierarchy centered around their products and services, with clear delineation between the products and the comprehensive services to create the content that powers them. Within the products themselves, Unboxed has created a product suite that serves as a comprehensive ecosystem of products that each meet a specific need of the employee journey — Onboarding & Training: products that help a team receive effective training, Sales Productivity: products that help your team ensure customers understand the value of your products and services, and Coaching & Performance Management: products that help you measure the effectiveness of your team and identify how to make improvements — and we used these three groups to help tie the content together and create user paths throughout the site.

One of the most important ways we chose to highlight the relationships between their products and services was in the Results section of the site. It’s one thing to talk about a product and its features, but what really reinforces how impactful Unboxed’s products and services are together is the success of the solutions they’ve been able to deliver for their clients. Each case study allows Unboxed to detail the products and services leveraged to create a custom solution to meet the specific needs of each client. This strategy helped us maintain a hierarchy of information throughout the site, specifically the Products and Services sections, that helps keep the content sharply focused on what matters within the context of that section and reduce the amount of noise on the pages.

screenshot of the results section on tablet and phones

Design

Because of the phased approach, the design of the first phase was executed by the design lead, reviewed internally, and then handed off the second designer to complete the remaining work in the second phase. This level of collaboration produced results that we’re incredibly pleased with and also made the process a little more fun. Working this closely together forced both designers to try new and inventive things and also caused a bit of Photoshop Layer Tennis, which is actually really fun.

screenshot of the spoke page and its components

Unboxed is an Agile shop, and this methodology heavily influenced our design process. We iterated more on this design that we have on projects in the past, and this allowed us to focus on the details, specifically on consistency and modularity. The site was designed as a series of modules and components that are used throughout the site to keep similar types of information presented consistently.

We focused on adding depth to their brand, establishing an updated and more complete palette of type and colors, and incorporating sophisticated design elements but also throwing a dash of fun in there. Another important area of focus was in maintaining flexibility. Because Unboxed is constantly iterating, we wanted to create design elements that allowed them to continually create and adjust the elements of the site to evolve with their company and gave them the ability to control icons, colors, layouts of pages and assets at every turn.

Development

The level of attention to detail on this site is one of the things that we feel makes the site so special, from the front-end polish to the fully-custom capabilities of the CMS. We incorporated fun hover animations and motion effects, background video, elegant page transitions and element loading, and some cool interactions with elements like the Team page photos to help bring the site to life and embody the fun and liveliness of the Unboxed crew.

One of the most important capabilities of the site was to build a platform that Unboxed could completely control and customize for each page on the site. Focusing specifically on the product pages, we created a system of content modules with ACF Flexible Content that allows multiple configurations of each module in any layout order they choose. These content modules included testimonial sliders, pricing tables, images with text, single or multi-device containers with images or galleries, and a content grid.

SVGs were used heavily on this site, from animating sprites to custom radio buttons. SVGs were also used to create the device containers in the modules to allow us to create easily responsive, scalable, lightweight, content-managed and device agnostic modules for showcasing products. Phone, tablet, laptop and browser SVGs were created and the screenshots they contain are injected into the SVG and controlled in the CMS.

Impact Data

In the first two months after launching the new site:

  • Sessions increased 6%
  • Users increased 17%
  • Pageviews increased 36%
  • Pages / Session increased 29%
  • Average Session Duration increased 13%
  • Goal Conversion Rate increased 550%
results on landscape tablet

Co+Laboration

Working with Unboxed truly was a privilege for our team. It can often be difficult to work on your own projects, but Unboxed’s team absolutely killed it with their work on the new site, and we couldn’t be more proud of the work we were able to do with them.

One of the things that makes Unboxed so special is their focus on the content of whatever they are creating. It’s what matters most in the work they do for their clients, and it was just as much of a priority for the work on their new site. Digging deep with their team of representatives from operations, marketing, design and content strategy to really refine the content and priority at the outset of the project was one of the main reasons we think this project was such a success.

A big thank you to Unboxed for all of your hard work. It would have been impossible for us to have built the new Unboxed site without your collaborative spirit, willingness to challenge us and push the boundaries, and your awesome high-fives.

To see what Unboxed has to say about their new site, check out their blog post about it here.

Like our work?

Learn more about what services CO+LAB can offer you and your business.

Our Services

Have a project in mind?

We'd love to hear from you and answer any questions you have.


Shoot us an email and let's get started.

Say Hello!