Office Depot’s in-house m-Commerce site blows away the legacy vendor-developed site with its clean, branded design, speed improvements and robust feature set. Putting the user first kept us focused on ease of use and speed.
Overview: With 8.5% of 2011 internet traffic coming from mobile devices and trending upward, mobile is an important channel for online retailers. Yet the inherent constraints of small screen size and slow connections makes development for mobile challenging. It’s easy to do, hard to do well, and even harder to do in a way that will enhance your brand and satisfy the customers’ expectations for usability and experience.
Office Depot initially entrusted its mobile presence to a third party. This high profile vendor “scraped” Office Depot’s existing site and reprocessed the content for mobile delivery. This resulted in a slow experience, limited content and an unexciting look and feel. In fact, the site had so many opportunities for improvement that it was used at an industry conference as a case study of what not to do.
Office Depot knew they could do better with their own team. Here’s what we did that made the project a success, earning us top marks for speed among our mobile competitors.
- We tapped into the APIs we had developed for our mobile app to bring content into the site quickly and efficiently.
- Since we already had mobile apps that were competing well in that space, we had no need to duplicate that app-like experience on the mobile web. That advantage allowed us to focus instead on outcompeting other mobile websites for speed and features and led to our choice to eschew heavier solutions such as Sencha or jQuery Mobile in favor of lightweight HTML5 and the ultra-light XUI framework augmented by native JavaScript. Using entirely custom CSS also meant we had no unused rules or additional overhead from generic, pre-baked styles we weren’t using.
- Our primary concern in mobile was limiting HTTP requests, which are much slower for mobile. To this end, we embedded CSS and JavaScript in the page and used local storage techniques to cache it. We used a single sprite for CSS, supplemented with CSS3-generated graphical effects and high ASCII characters for many icons.
- We thought hard about the user experience and decided that just because it was on the original website didn’t mean it had to me on the mobile version. For example. we decided to take the welcome message and the login button off the home screen and use that valuable real estate for user-focused navigation. We assumed that the user had limited time, limited bandwidth, limited screen space and limited patience. We identified their important tasks and optimized for those flows.
What We Learned
The mobile website design began with rapid prototyping in Axure. This allowed us to focus on how the pages would behave in three key device sizes and avoided the tendency to envision only the smartphone as our target. We learned that prototyping was not only useful for establishing the wireframing and information architecture, but also for development. Our overseas team welcomed these detailed, interactive prototypes that allowed them to quickly understand our intentions despite verbal communication barriers.
We learned that, from a UI perspective, the biggest challenge in mobile is not lack of sophistication, but a mismatch in capabilities. For example, a feature phone with a very small device width may have no problem understanding HTML5 and sophisticated CSS3 styling, but not enough screen real estate to properly express it. It is difficult to “dumb it down” for them, since many do not implement the device-width query.
Opera Mini became available for iPhone toward the end of our development. Its inexplicable lack of support for certain key CSS1 properties caused us to have to rethink our approach to things like vertical alignment. The server-side rendering in Opera Mini presented challenges with asynchronous calls, but prepared us for devices like the Kindle Fire.
We encountered numerous small “gotchas” (such as iPhone’s mistaking our order numbers for phone numbers and offering to dial them for us) that deepened our platform-specific experience. And there’s no substitute for that hands-on experience!