Boost Mobile Homepage Redesign

Our team was tasked with the redesign of boostmobile.com along with re-platforming to a new CMS. I led the effort with 3 other designers working in Agile with an Adobe development team to redefine the e-commerce experience for boostmobile.com. Since 65% of our conversions were coming from mobile devices, a stellar mobile shopping experience was our top priority.

Wireframes

Our goal for the first sprint was to implement new Boost branding on non-transactional pages, so we started with a proposed  homepage layout with future AEM components in mind. Our focus here was to accompany shop components with non-transational learning moments.

Boost Homepage Wireframes

Defining Visual Language

With the help of our brand team, we devised a graphics system that would help tie-in with each quarter’s national campaign roll out. Our challenge was to work with Adobe and deliver components that can be updated quickly by AEM authors, but flexible enough without much hand coding for quarterly updates across multiple pages.

We start with some inspirations.

Deliverables and setting the stage for sprint 2

We agreed on a graphics system that was both modular and flexible for future updates after the handoff. At this point, we began creating our digital style guide outlining basic page level framework to help drive future templates. With a solid start to our style guide, our team was able to branch off to refresh static pages and work on improving the shopping experience for sprint 2.

See style guide