May 5, 2016

Extending the Template: Designing and Building UI/UX Frameworks

xenatix_UIUX_framework_03

Over the last year, we’ve had a couple of web development projects where we integrated deeply into the client’s development team. This gave us some really interesting opportunities along with some development challenges.

For one undisclosed client, we had to design and develop an entirely new responsive website without final content. We were to deliver our files for the client’s development team to build the rest of the website. The scope of the project was huge, weighing in at over 200 pages, not including news articles.

For another client, XenatiX, we were tasked with building a user experience for a product still in heavy development. The product itself was a massive undertaking, a web application so large that it was next to impossible to determine all of the unique instances of the user experience.

Until recently, we approached projects differently. We would count unique page templates and design to each of them. It’s pretty easy to assign scope to a project that way as an agency. We can explain our costs and exactly what the client is getting. But, this entire approach falls flat when presented with the scope of the above two projects. We decided to use a UI/UX framework approach with Bootstrap at its core.

With Bootstrap’s mobile-first, responsive modularity, we took a more granular design approach. Starting with the basics of the grid, brand colors, type hierarchy and content styles, we rapidly prototyped a proof of concept for XenatiX’s development team to work with while working on design concepts. On the design side, our creatives focused on building unique experiences into common user experience patterns. We designed our concepts around user stories that expressed these UX patterns. As both teams iterated on the design and application, we inspired features in one another’s work. Presenting our work often became a brainstorming session, which led to more iteration and more refinement.

By the end of the process, we delivered an on-time, under-budget UI/UX framework they were able to fully integrate into their workflow within weeks. We continued to be engaged in the process of their application development to consult and develop new UX patterns as needed.

For the undisclosed client’s project, we executed in a similar way. We designed a large number of modular unique page templates, stacking reusable components to make new pages. From the patterns of these unique page templates, we developed modules into a Development Style Guide. This guide was a fully-functional website that outlined every unique module and component across every template, with explanations and code samples ready to copy and paste into new pages. On delivery, the client’s development team was able to build the entire website in two months.

In both of these examples, we used Bootstrap to ease development by using core components and extending them into new or repurposed UX patterns. This gave us a common language to use with those development teams, increasing efficiency and keeping everyone sane working with the moving parts. Documentation is freely available because of Bootstrap’s ubiquity.

Critically, developing UI/UX frameworks using these methods creates a curated design that is not only beautiful and functional, but durable. Both projects can now grow organically using these frameworks, creating new experiences from a breadth of UX patterns.

More News

hos_website

New House of Shine Website Launches

House of Shine is a 501(c)(3) non-profit whose mission is to ignite the power within and ultimately change the world for the better by exposing...