Case Study: hibu Marketplace Responsive Design
There is no such thing as the "mobile web".
Znode was acquired by hibu in order to use their .NET e-commerce software as the foundation for a series of new products. One such product was the hibu eMarketplace, a national marketplace 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 eMarketplace 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 eMarketplace. 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.
eMarketplace responsive design proof of concept (HTML)
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 eMarketplace 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.
eMarketplace home page whiteboard sketches
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.
eMarketplace home page wireframes/low-fidelity prototypes (HTML)
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.
Wireframe/Lo-Fi Prototype Screenshots
- UX design and UI development team management
- UX process implementation (Lean UX)
- Sketches, wireframes, and HTML prototypes
- Front end architecture and technical leadership
Other Case Studies
Case Study: Fitly Responsive Design
Fitly approached me with an e-commerce site that had some UX challenges stemming from its startup incubator roots. I was tasked with improving the user experience and rebuilding the front end to reach MVP (Minimum Viable Product) status. Read the case study and see how I solved some UX challenges unique to Fitly.
Case Study: Abercrombie & Fitch Front End Architecture
Abercrombie & Fitch had four distinct brands running on four distinct code bases, leading to lots of duplicate development effort. I engineered a front end framework that lets them spend less time chasing problems and more time building solutions. Read the case study and learn how I made A&F's sites faster and easier to maintain.
Case Study: OncoTracker Design and Development
OncoTracker wanted to provide an easy way for oncology patients to access their medical records anywhere. I designed a solution that walks users through the process of entering their records step by step and allows them to track the progress of their treatment. Read the case study and see how I made it easier for patients to track their treatments.
Copyright © 2018 Jay Sylvester.
All rights reserved.