hibu acquired Znode, an e-commerce startup, in order to use their .NET e-commerce platform as the foundation for a series of new products. One such product was the hibu Marketplace, an international online "mall" with a local focus that would allow small merchants to create online storefronts and sell their goods and services to both local and national audiences. After a hurried beta launch, the product owners wanted to take the Marketplace to the next level, at which point I was brought on board to oversee UX design and UI development.
Laying the Foundation
While the core Znode product was a capable e-commerce platform, it was weighed down by years of legacy code that were then passed on to the Marketplace. In addition, a gap in UX expertise during its rushed development resulted in a shopping experience that wasn't up to current standards. The mobile version of the site was on a completely different platform (Java) with its own development team in another geographic location. All the technical leads agreed this was a less than ideal foundation upon which to build a flagship product.
Selling Responsive Design
Before we could begin a responsive redesign, I had to sell the idea to senior management, so I spent a few days designing and building a semi-functional home page prototype to demonstrate the possibilities of responsive design. Incorporating requests from our merchandizers, I brought product imagery to the forefront and gave them space for promotional content that was lacking in the current design. Knowing that the concept would be demonstrated to business users on phones and tablets and given the limited amount of time I had to put it together, I focused my testing on iOS and Android phones and tablets.
The concept was successful at demonstrating how the same content and functionality could be made to work across many different devices, and I received an enthusiastic approval to proceed with the Marketplace responsive UX design work.
Strategy & Process
We had minimal strategic input from the business, but we were able to establish the following goals:
- We would take a mobile first approach and provide all devices access to the same content, adding appropriate enhancements and fallbacks based on device capability.
- The focus on local products and services should continue to be a key strategy.
- Beautiful product imagery should dominate the design and provide most of the visual interest.
- At the request of our merchandisers, the layout should accommodate increased merchandising content, particularly on category pages.
I conducted a series of planning meetings with my team to identify our goals and put together a basic project plan. We started with a complete site audit, building inventories of content, functionality, and interface elements. Using that as a starting point and basing our decisions on the goals above, we decided what functionality was essential and should be maintained, what functionality could go, and what was missing. I directed one UX designer to create style tiles based on the interface inventory so that everyone could work independently, but still maintain a consistent look and feel. I assigned a UX designer to each page on the site, and it was each designer's responsibility to come up with the initial concept and wireframes under my guidance, which we would then flesh out as a team in our daily review sessions.
We spent the next round of meetings discussing the challenges of UX design on a responsive redesign project with a tight deadline. What should be our target viewport sizes and where should we set our breakpoints? Should we adopt a mobile first approach? Should we use an existing framework or roll our own? What would be our deliverables? In all our discussions, one thing was clear: after coming to a general concensus during our whiteboard sessions, we should go directly to low-fidelity prototyping in the browser. Draw it on the whiteboard, take a picture with your phone, then get back to your desk and start coding. It would be a Lean UX process based on discussing, sketching, prototyping, testing, and iterating, and the final deliverable would be low-fidelity, fully responsive HTML prototypes of the entire site.
HTML wireframes have many advantages over flat wireframes. Our wireframes would be interactive and responsive, so they could be viewed on any device in a browser and behave like the final product would; just toss them onto a server and give stakeholders the URL. Many interaction design decisions made during the UX process wouldn't need to be written down in technical documentation because they would be self-evident. For example, if clicking on an anchor should cause a form to slide down and be fully visible in 250 milliseconds, it's right there in the wireframe and its source code. The risk of details getting lost in translation from wireframe to final code is greatly reduced compared to a traditional flat wireframe. Another benefit would be easy versioning using a git repository and local branching, just like production code. And large sections of that very same code would be reusable in the production version as well.
Lots of teams are struggling through the complexities of UX in a responsive design, and using a Lean UX process, my team delivered on the goal of producing functional wireframes that effectively convey the requirements of responsive e-commerce. This project convinced me that responsive design is the future, and that the advantages of a mobile first approach far outweigh the IA/UX difficulties that come up during the design process.
While the challenges of UX design on a responsive project are significant, we proved they're not insurmountable.