Designing an Identical Experience Across Devices: Product Catalog
Materium online catalog’s case study
Recently I’ve been talking to a lot of people — either potential clients or even employers — about my work. They are usually curious about my process from understanding the brief to making decision on design, experience, and technical stuff. One of the most talked about project is materiumideas.com, so I think it’s worth to share the process on Medium.
Materium is a furniture brand that aims to bring about the change of how we live, work and do things in between. The brand was designed in collaboration with Thinking*Room (where I worked) in 2019. Just few weeks before their launch event, Materium’s team decided not to let the domain they will mainly use for email shows a blank page. That means we had less than a month to make a landing page for materiumideas.com.
We started by deciding what the landing page should be. At the time, Materium didn’t have its own store yet and they would only showcase their product on selected showrooms. Other than that, people can learn about it from @materiumideas instagram but the information there is very limited. We believed it was necessary for the brand to have something where people can look up to learn more about the products.
We looked at what we had back then at Thinking*Room. The team were still working on editorial photo shoot and product fact sheet design, so we decided in parallel with that we can compile it to make an online catalog.
With limited time in mind, I thought making an identical experience on desktop, tablet, and mobile can save a lot of time on the development process. I had seen growing numbers of Indonesian websites like Sorabel and Kitabisa doing the same, so the challenge was to explore and push the boundaries of what identical experience across devices could be.
Understanding the Limit
When we want to design something that works on multiple devices, we have to understand limitations each device has. Know what features are available on every device—or at least has an alternative — and avoid what’s not supported in certain device.
The catalog’s browsing experience, which is similar to browsing social media photo feed that everyone is familiar with, was chosen because the journey is simple enough and effective across devices. People can see what products are in the photo and clicking the tag will open product ‘profile’ where they can see some details, more photos of it, and other products under the same category.
I used this journey as the starting point and continue to develop the idea by considering devices limitations on making every decision. Mouse hover, for example, shouldn’t be used as primary trigger to an action, but it can be used as an alternative. The common use of it is to trigger a hint, like a text will change its color on hover to indicate a link. This behavior is a good alternative on desktop to give a hint that people can learn about the product by showing tags when people hover the photo.
Think Mobile First
Easy to tell that — besides the fact that >50% people browse from mobile — thinking mobile first is necessary because with more limited space a mobile-first design will be easier to be adapted to larger screen than the other way around.
But easier doesn’t mean we just have to let everything stay in the center (well, some websites do) or make them larger to fit wider screen. A full-width portrait photo on desktop will require few scrolls to see it completely, therefore adjustment on things like this are necessary to make the layout less awkward. Since most of editorial photos we had are portrait, I decided to have a one column photo feed on mobile and adjust it into two pinterest-like columns on desktop to acquire more of the horizontal space.
Adjusting too many things would take a lot of time, on few parts I tried to find solution that will work well across devices, like on product detail. I decided to keep the same container’s width as mobile because the texts are expected to be short and making the container wider on desktop will add unintended white space. This container will slide-in from right to full-width on mobile, but on desktop it will stay on the right, almost like a sidebar menu.
Just Enough Information at the Right Time
The product fact sheet that’s been working on contains all product’s information from description, dimension, material & finish, color combination code, to shop drawings. This loads of texts will be too much to be shown in a small screen and will be less-informative if we only provide a few.
The goal is to show the right amount of information and make sure the complete details are available when people need it. To do this, I need to understand the behavior on how people look for furniture and what information they need to know in the first place.
Based on quick research on furniture’s tags and interviews, I grabbed just enough information from the fact sheet and emphasize the important ones. For examples, people need to know if the product fits the size of their space but they don’t need to know the color code/naming system until they decide to buy it. Therefore I made product dimension the second largest text after product name and show the color options just as thumbnails.
This snippet of information will appear first when people are interested and click the product’s tag. Then if they want to learn more about it, the ‘download fact sheet’ button will be under these snippet.
Every Detail Speaks
When we’re designing for digital, screen size is the limit. Something that is too detail won’t work on small screen. The design has to be simple, therefore we have utilize every little thing to speak about the brand.
Visual identity provides instructions on how the brand should be visually represented using combination of design elements like color, shape, and typography. A good one opens many possibilities and can be applied to the most simple thing yet still makes it looks distinctive.
The most ‘little’ thing on this project was probably the clickable product tag that appear on top of photos. I started designing it by taking the shape on Materium’s logo that resembles furniture legs as the container, added a typical product tag hole on top right, and placed the product’s silhouette, name, category, and brown text as the call to action. It was quite nice at first on top of photos but when I preview it on mobile, it’s too detail and would took too much space when there are few of them.
Because I want the tag to still represent the brand, I tried to do one underrated design tip, “subtract until it breaks.” The final version of the tag only left the product’s name yet still managed to apply color, shape, and typography from the visual identity. It’s because I changed the hole on top right to a brown dot as an accent of the brand color.
In the end of the design process, a prototype was made to visualize the experience and present it to the team. Because it requires multiple scrolling area, scroll position logic, and certain micro-interactions, I looked at many prototyping tools and found Facebook’s Origami. It uses Quartz Composer, a drag-and-drop programming interface — which Facebook also use on Spark AR Studio — which is easier to learn and enables me to make an interactive prototype that I expect.
Conclusion
Identical experience across devices doesn’t have to be awkward. By understanding the limitations, we know what works and avoid what’s not. Starting from the mobile is both easier and necessary.
The reason to make identical experience across devices is to save time and resources, but it’s not always the right answer to every project. Things to consider are if the information and experience are simple enough no to surpass the devices limitations. If doing so only waste more time and resources, then maybe we have to find another solution. In the end, designing is about finding the right solution not forcing a preference to the problem.
