UX Design Within Reach
Design Within Reach (or DWR) is the leader in midcentury modern furniture design and has locations all across the country. They are known for their unique and iconic pieces that have transcended time to present day where this aesthetic is more sought after than ever before.
Being chosen as lead designer on this project, I knew that first we’d need to dig deep with the data to get the best result. Our mission — to create a user-friendly mobile app to connect customers to design experts and provide the in-person DWR experience digitally and remotely.
In order to understand the businesses needs, we first had to fully understand the client’s needs.
In the summer of 2020, DWR redesigned its website to be responsive and add new features, such as adding live chat and video chat that allows shoppers to connect with a design specialist.
We were contracted by DWR to establish user need and create a mobile prototype that connects their interior design team with potential customers. DWR has studio locations across the US, but believes that they have an even greater opportunity for growth by providing the DWR experience through technology.
Considerations:
● What information do the DWR designers need to understand user’s style preferences?
● What type of content would interest users before committing to working with a designer?
● How would multi-person households work together with the design team?
● Would it be beneficial for users to choose their designer?
Target Devices:
● Native Mobile Application (iOS/Android)
● Tablet Application
Target Audiences:
● Design Conscious consumers
● Customers looking for higher-end, unique pieces
The next task was to compare DWR’s competitors features and the way they were presented on different platforms. As for the direct competition (Crate & Barrel, AllModern, Wayfair), all of these brands have a mobile application and there is a growing trend towards in-room Augmented Reality (AR). Similarly, DWR’s indirect competitors (Iscape, Nike, Sephora) all include an AR feature within their respective apps, as well as an onboarding quiz for user preferences.
Our business objective for the data being collected was to find out what users are struggling with currently in relation to shopping for high-end furniture. Naturally, we created an affinity map, based on the data we received in order to break down behaviors and trends into categories.
Below are some of the main trends we observed from interviewees:
Trends
- Some users said they weren’t comfortable buying big items online.
- Most users need expert help.
- Visuals are extremely important to users.
- AR is helpful if it’s easy to use and trustworthy.
Now that the data had been collected, it was time for synthesis. From our affinity map we were able to define trends and through those trends we can use the data received to create a persona out of the multiple observations and patterns interwoven between each interviewee.
Our persona took the form of Epicurean Ed. A man who appreciates the finer things in life, Ed is an individual who thinks of his home as a sanctuary. He has a specific mid-century modern aesthetic from pieces he’s hand picked over the years and is currently revamping his living room. One of Ed’s goals is also to find material that is sustainable.
Our journey map of the user documented the struggles that Ed would encounter in his current search for new furniture:
Opportunities:
- Having a reliable AR option that allows user to visualize furniture in their home.
- Having a mood board to help user conceptualize how the furniture fits into their home aesthetic.
- Having live chat or video chat to allow user to reach professional help faster.
- Having an easy way for user to request swatches.
Following the birth of Ed and our Journey Map creation we were able to craft a problem statement that reflects the challenges of the user:
Through this concrete problem statement, we were able to determine the ways in which Ed needs our help as UX Designers, to make Design Within Reach more accessible to him during the pandemic and otherwise, since he doesn’t have a DWR store near him either. So…how might we?
We’re at the point here where we’ve narrowed down the data and synthesized it into a problem with individual pain points that we can address in our design.
With the insights gathered from our research and synthesis I began creating basic low fidelity sketches with my Rocketbook (which I might add is a great tool for UX Designers, but I digress). Based on our persona’s preferences, I knew the design had to be very accessible from the users standpoint. I also knew I needed a way to incorporate the onboarding preferences quiz, the AR feature and livechat while keeping the same aesthetic as Design Within Reach’s desktop and mobile site.
The culmination of my sketches brought me into low fidelity wireframes using the software platform Sketch, where I began to visualize our users journey. Originally the sign in screen had a line for email address and then the options to sign in/create account or continue as guest. Upon our first usability tests with the low fidelity prototype, we found that this screen was confusing for users and simplified it by taking away the email input line because, if a user types in their email and hits sign in, they would still have to fill out more information, so, why not just move all of that onboarding information to its own separate page?
Since visibility and accessibility were key heuristics here, I wanted to make sure the most important buttons on the product page were the most visible. The “View in Your Room” button specifically as well as the “Add to Cart” button and Livechat. To keep “Add to Cart” visible throughout the page, the most logical option was to fix it to the footer.
I’ve seen the floating livechat button on various mobile sites including DWR’s competitors but never in an app. Why wouldn’t this feature be available in an app? Especially an app for a site that charges $8k for a chair. I was able to achieve the floating Livechat feature in the Invision prototype by extending the artboard in Sketch and then a white background rectangle that extended just below the bottom the page, creating a transparent space. I then used an artboard for just the Livechat button and placed that into the Invision product page as an overlay. After piecing the wireframes together and finalizing our user flow I prepared the rest of the prototype in Invision. After the prototype was completed we began preparing for Usability Testing.
Usability testing on the low fidelity prototype illuminated some crucial changes that needed to be made:
There are many benefits to usability testing. When you’ve been looking at and working on the same design for so long, you naturally start to lose perspective of some of the smaller elements on each page that might affect the users experience. This is why we have iterations and we follow the process. One of the other main pain points was that the text on the checkout pages was too small. We also realized that users were getting confused in the prototype on the livechat pages because of one missing icon, the direct message icon.
These results were then synthesized once more to create the next iteration in high fidelity. Click here to view the high fidelity prototype:
In the users feedback, Augmented Reality was considered one of the most important features to recreate the in-home experience. I was able to replicate the AR function effectively partially because I own a Design Within Reach, Eames Lounge & Ottoman (as seen on the product page). I simply removed the chair from its current position, snapped a photo on my phone, put the chair back and snapped again. The interactive elements were added later in Sketch and Invision.
This feature is invaluable to the client for many reasons. For users such as Ed who normally only trust an expensive furniture piece if they see it in person, this is a make or break feature. No you can’t feel the leather of the chair digitally (but you can order swatches), however the AR feature allows Ed to see exactly how the chair will appear in his apartment and view real-time dimensions in his space.
We also wanted to make the livechat function for the app as seamless as possible and as alike to the DWR site as possible.
When the user pulls up the livechat feature, they’re first connected to a chatbot and then once the user answers some basic questions they’re connected to a local design specialist. In our app we created a mobile in-chat video option to basically facetime with the representative so that they can see your space live.
The last piece of the puzzle was the mood board. I wanted the mood board to include textures as well as lifestyle images to give the user inspiration for their space.
As for next steps, I’ve already started prototyping the tablet version. With the increased real estate on a tablet I’d have to find a way to utilize the space effectively.
The increased screen size allowed for more products on the homepage and some stylistic and functional elements added to the AR screens. Some users mentioned wanting to be able to livechat within the AR component so the design specialist could see what they were seeing. So I designed exactly that.
Our usability results showed that the app itself was easy to navigate and users would consider using the app for their next furniture purchase. At this point the app is ready to ship off to Design Within Reach and make the best in mid-century modern design more accessible.
