Navigating Through The Rooms
Traditionally, websites with a heavy amount of content showcase their categories and options using an accordion style menu. While this can create a fuller and more impressive offer in selections at California Closet, it could risk being a cluttered view on mobile. Providing a scrolling option was confusing on a small screen as users could easily lose their place. “Here is a case where the brand is already there, and we’re using an existing DOM to retrieve information for mobile,” UX Designer, Arman Keyvanskhou mentioned, “So when you think about the flow, it’s defined by the existing structure of the website. We had to to be very creative about how we solved the navigation.”
With California Closets desktop site housed in Drupal, we used Mobify.js to create a mobile version that was adaptive rather than responsive. Where websites would usually respond to a mobile viewport, an adaptive experience allowed us to pick and choose content. “By making it adaptive, we could have a completely independent layout on mobile,” explained Developer, Albert Teng, “this allowed us to create something outside a traditional menu.” Instead of a drop-down menu, the user would be able to access a dedicated area which presents them with the main rooms of a house: including the bedroom, living room, garage and home office. Within the selection of each room the user is given more options via a bullet point-style list.
Staying True While Being Innovative
Because the desktop site was very content-heavy, we worked closely with California Closets to find a balance between minimizing content and maximizing usability on the mobile site.
“Communicating through UX samples became very important during this process,” explained Creative Director, Michael Parks, “they’ll always want their content to stay and we always want simplicity, so by effectively sharing the vision we could reach a middle ground.”
Using a “Read More” option rather than cutting out content helped create a seamless visual experience on California Closets’ mobile website without sacrificing important material, such as the team bios.
The centerpiece of the mobile app was the iconography we designed to pull the whole experience together. From the call button to the various rooms, the icons sparked our imagination, but were designed with a modern and sleek feel to be paired with the brand identity.
In the end, our role in this project was in finding feng-shui between California Closets famous value proposition of customization and the inherent demands of shrinking screen sizes and on-the-go web behaviour. The prototype of our ideas and space for feedback allowed us to meaningfully collaborate throughout the creative process. “The California Closets mobile component asked us to be loyal to the existing brand,” Arman explained, “It was more about designing an experience versus the visual elements.”