Why can’t furniture be more personal?
A case study
LAMOU sells tables which can be custom-printed with any image you want. They’re then flat packed along with the legs and hardware, and shipped to consumers for simple, Ikea-style assembly. I helped design an e-commerce website, with a built-in table builder app, that allows users to either browse existing image collections or design their own custom table from the ground up (literally, you can choose the leg color). I’ll be focusing on the design of the builder itself, as opposed to the site as a whole, for this case study.
Ann Clark contacted me out of the blue. Well, kind of. I had bumped into her around town (town being Providence, Rhode Island) a few times at different events like Design Week, Clambake, PechaKucha, etc. I knew she was an architect with her own practice, that she was originally from Chicago, and that was about it. What I didn’t know was that she was looking to take a hiatus from architecture in order to pursue a product design idea, in collaboration with another architect, Lena Georas.
The two women studied architecture together at University of Chicago, where they bonded over design and aesthetics. After practicing separately for 25 years, a chance meeting got them together and brainstorming. They realized they were both interested in furniture. As an architect, it’s essential to think about the furniture (as well as the people) who will eventually inhabit the space.
“Tables are at the center of our living and working spaces. We gather around the table, bring things to the table, turn the tables: shouldn’t tables reflect our spirit and personality? I think so.” —Ann Clark
They spent the next 6 months coming up with a business plan, raising funds, and figuring out how the heck to print on tables. Part of the plan was to have some sort of online builder where users (not necessarily designers) could design their own furniture, customizing each aspect; most importantly the image printed on the surface.
I felt honored and excited when Ann contacted me about creating this digital experience, and I was excited to get started.
As with almost any digital project, the most important aspect is the users. Who are they? How tech savvy are they? How will they be interacting with this? Will they mostly inclined to buy predesigned tables (which are available), or will they want to design their own?
It turns out Ann and Lena had already done some research in this area.
They’d determined the market that they would target: millenials with disposable income. This helps with the question of how tech savvy these users are. They basically grew up on the internet, so they know their way around an interface or two.
The question of “how will users interact with this?” is harder to answer, since highly customizable furniture via a web interface is not exactly something with a lot of data and examples to pull from. Due to budgetary restrictions, we determined that the builder would need to be built desktop-first. The mobile version would have to be shelved for the time being (analytics down the road would tell us if it was worth investing in or not). In my research, I noticed that web apps focusing on customization of e-commerce products (Moo.com’s business card designer, for example) did not always tend to invest in a mobile version of the interface, since these types of activities are often a bit complex for a mobile device (although as users get more and more comfortable, this is changing). I was satisfied temporarily, but knew that only time would tell.
To design oneself, or to just buy off the shelf? That is the question. We discussed this at length, and finally came up with this:
LAMOU’s uniqueness is in the fact that you can put a picture of your cat on a table if you’d like to. That being said, it’s important to show potential “builders” some inspiration around what can be done with this platform. So, it’s important to have products available for perusal, but lead them to the builder.
Sketching and wireframing
The LAMOU table builder, in terms of concept, really has one primary function: to guide the user through the process of choosing all of the customizable components of their table.
These components include:
- Type of table
- Top design (two options, chosen from the curated library of images or uploaded by the user)
- Edge color
- Top finish
- Leg height
- Leg color
The point of an interactive builder is to be able to see something come to life before your eyes. So, it’s important for the table to be a constant presence, and when a user makes a change they’re able to see it immediately. An initial sketch of the interface (below) has the table right in the center, with a left sidebar housing all of the component options, a progress bar along the top, and manipulation controls on the right. This is of course part of a larger site, so a minimized sidebar to the very left allows the user to escape the builder and get back to the main pages if necessary.
Unlike with Moo.com, our user isn’t designing a business card. It’s not just an object with two sides. This is a truly three dimension thing that you want to be able to see from every angle. After telling our development partner, Grey Matter Software, about my idea of being able to manipulate the view of the table 360 degrees in any direction, they seemed confident they could make this happen (I promptly jumped for joy).
With that confirmation, it was time to take this sketch to more refined wireframes. The only hesitation with this approach, after reviewing with Ann and Lena, was the concern about the sidebar taking up more vertical space than a user’s browser would allow for. Ideally, there wouldn’t be any scrolling within this interface. But since we were dealing with a finite number of table components, it seemed doable. I’d just need to make sure I was designing for the smallest possible desktop screen size.
Defining the interface and interactions
With the essential structure in place, the next step was to really dig into the micro-interactions within the builder, and to flesh out the final UI. As far as branding, LAMOU came to me with nothing but a logo, so I was tasked to create visual guidelines that would define the builder and the overall website, and carry them into the future.
Annotating the designs before they’re handed off to development is important, but as is apparent, in this case it was absolutely essential in defining all of the interactions.
Since the builder toolbar has so many states (and even conditional options), it was a must to show it in every possible configuration; each field, menu, dropdown, hover, etc. had to be hashed out. For example, when choosing a top design the user can choose between two main options: BROWSE DESIGNS or UPLOAD YOUR OWN. With BROWSE DESIGNS selected, the user can choose a collection, and then an image from that collection. With UPLOAD YOUR OWN selected, the user is shown a button that will open a modal and allow them to upload their own image.
The uploader modal is where the user gets to be (a little) creative. They’re able to add an image and rotate, resize, reposition it to their hearts content. If they feel like they’ve really messed up the composition beyond compare, there’s the option to reset it, or just remove it and upload something new.
I heavily advocated for this sound on upload error. That idea was promptly killed, but a pixelated image telling the user there aren’t enough pixels gets the job done.
Sit back and gather data
The site launched in May 2016, so we’ve had some time to collect data and figure out what next steps to take. Remember how the mobile version of the builder was shelved for the initial launch. Yeah, well we’re learning that there’s more interest in using the builder on a mobile device than we originally thought. I’m unable to divulge the actual numbers, but it’s clear that a significant number of mobile users are landing on the builder, and realizing it’s way too unwieldy for their phone (duh, it hasn’t been designed for mobile yet).
This is a real issue.
Now, with more funding, we’re starting to envision what this mobile builder could look like. It’s also becoming apparent that a strong social component could allow users to engage more, by not just designing furniture to purchase, but designing to share with others. With a mobile app, a community of creators could be built around this idea; a collection of designs created by users for users to purchase, where artists and designers get a share of the profit when their designs are sold.
Take a look at the video below for a walkthrough of version 1 of the prototype. The app’s focus is on building and sharing, giving the user the ability to create their own profile so they can share their own creations with the community and/or purchase designs directly from the community.
Just the beginning
No great product is complete on initial launch, and LAMOU is no exception. It’s important to constantly iterate, test, learn — then iterate again with a more informed approach. This first pass has been eye opening and will help to define the next version, in whatever form that may take.
Check out the current site at lamoudesign.com. Play around with the builder and let me know what you think. Feedback from actual users is the best gift a user interaction designer can ask for :)