I was the UX Designer and Developer for Boxxspring, Bedrocket’s proprietary content management system. Initially, the system was designed solely for videos, but it later expanded to articles and other forms of content. In addition to focusing on information architecture, interaction design, and front-end web development, I also conducted competitive research, usability tests, and design studios to ensure that the product was as useful as possible.

First iteration

When I first arrived at Bedrocket, Boxxspring was still known as “Admin Tool”. It was in MVP stage and they needed to fix up some initial problems before working on a complete user experience redesign. I helped make the system more usable by removing unnecessary complexity and improving the site’s visual design.

Redesign

Once the first fixes were done, we began working on the second version of Boxxspring. Through interviews with the people who used the original Admin Tool, our content editors, I was able to define user needs and create goals for the project. After planning the features that would exist in the next release – video, article, and listicle creation – I created a user flow diagram so we could understand how users would move through the system. It went through many iterations based on feedback from stakeholders.

The final user flow diagram.

Ideation

After some competitive research, I spent time sketching ideas for the different pages on the site.

Video creation flow sketches.

More video creation sketches.

Article creation flow sketches.

I conducted design studios to make sure developers and product managers also a chance to suggest design solutions. Many of their ideas helped influence the design direction of certain parts of the system.

Sketches from a 4-person design studio exercise.

Prototyping

After sketching a part of the experience, I would turn it into an interactive wireframe using Axure. Prototypes were tested with content editors to ensure that the concept served their needs. Each interactive piece of the wireframe was also annotated.

Wireframe of the unpublished content list.

Annotated interactive button functionality.

Handoff

Once the prototypes were tested and we decided upon a concept to move forward with, the annotated wireframes were sent to a Visual Designer. The Visual Designer added a unique voice to the project through her use of color, shape, and typography.

Development

Boxxspring was built in AngularJS with SCSS. Using my front-end development skills, I contributed to the live code. When possible, I improved the interaction design of the product by adding animations and visual feedback.

Boxxspring is now live and available for public use.

View site