OVERVIEW
Qmotion shades
-
🛠️ Redesigned a confusing shade pairing process into a clean, intuitive flow.
-
👂 User-Centered Discovery
-
🤝 Cross-Functional Collaboration
RESULTS
-
🕒 Reduced setup time by removing redundant steps
-
👁 Improved usability with visual cues
-
🔐 Met new compliance requirements
Project
Mobile app redesign
Client
Qmotion shades
B2B
Roles
I led the research, design and testing of the app and installation experience.
Deliverables
-
User interviews
-
Wireframes
-
High Fidelity Prototype
The Challenge
Simplify the shade installation process and give the interface a much needed refresh.
Introduction
Q motion shades is a shading company that specializes in manufacturing motorized shades for high-end homes. In an effort to stay competitive with other smart home shading options, my team was charged with revamping our mobile application to offer a smoother installation process and updated look and feel.
This case study outlines the process my team and I took to redesign one of the most crucial components in the application: Pairing a shade to the network.
To comply with my non-disclosure agreement, I have omitted confidential information in this case study. All information is this case study is my own and does not necessarily reflect the views of Legrand.
Approach
User Interviews, journey mapping, brainstorming, storyboarding, wire-framing, prototyping, usability testing and design systems
Discovery & Understanding
As the newest member of the project team, my first step would be to familiarize myself with how our customers were using our product
I was a complete novice in the world for commercial shading, but that wasn't such a bad thing as I was able to keep a child-like curiosity when learning about the configuration process and challenge the mindset of "this is just how we've always done it."
I learned the task flow installers go through when using our app by speaking to shade installers about their experiences, I even ordered a pair of shades and tried going through the process myself.
Interviews
From speaking with various dealers, installers, and homeowners I was able to compile several key insights:
-
Qmotion shades are a tough sell, they are one of the most expensive options on the market, and can take several hours to install. (For installers time = money)
-
The flow for adding a shade is not an intuitive process, the mobile app offers no visual feedback when you are trying to pair a shade.
-
Installers were being asked to re-enter information they had already reported during the initial bid.
Workflow
Working closely with the product and engineering we were able to brainstorm ideas for how we could rework the current process and cut out some unnecessary steps in what was already a very long process.
From our brainstorming session, I was able to quickly put together a storyboard outlining our newly proposed workflow.
Story Boarding
Proposed Flow:
1. The dealer collects the measurements for each window.
2. Dealer fills out an order sheet and includes additional device details such as the shade type, name, any groups it would be a part of and it's location within the home. (Example, living room, left shade)
3. Once the order is received by manufacturing the shades are cut and assembled. Each device is currently labeled with a unique barcode that is linked to the factory's inventory tracking system, the data linked to this barcode can be expanded to include those additional details listed above. (type, name, room)
4. Once at the job site, the installers will organize the shades and begin mounting them.
5 - 6 . Once hung, the installer. will scan the barcode attached to the shade (or packaging) using the app and verify the information is correct.
7. Pair the device and commissioning is complete.
When Plans Meet Reality
We presented the proposed solution to the broader team, and while the feedback was positive and the new process was seen as a significant improvement to the installation experience, the general manager ultimately decided not to move forward.
The primary concern was the cost of the third-party barcode system already in use. Switching to a new workflow would have required renegotiating or replacing that system, which was deemed too expensive. As a result, the team chose to maintain the existing process despite its limitations.
Wireframes
Mapping out the new flow
Even without the barcode flow, we believed we could still deliver a smoother experience through thoughtful design updates.
To test this, I created a low-fidelity wireframe to quickly gather feedback on the revised device setup flow. Selecting a shade type would trigger tailored setup instructions, and visual cues were added to show what’s happening in the background; like locating the shade, pairing it to the home, and connecting it to the cloud.
The process for pairing a shade to the home's central hub.
User Testing
The most frustrating part of setup now felt clean, clear, and approachable.
Participants found the new flow for adding a shade to be far more intuitive than the current process.
-
Participants loved the addition of visual cues on the pairing screen. What was once the most frustrating part of setup now felt clean, clear, and approachable.
-
While the new flow and UI were well received, one participant still felt like the process was being bogged down and suggested being able to bypass certain steps.
An Unexpected Turn...
About three months into the project, new legislation was passed in California and Oregon requiring new IoT devices to have an additional level of security added to them to protect against outside threats.
In order to accommodate these new requirements, each shade would now require a QR code to be scanned and verified before it wuld be allowed to join the network.
Instead of viewing this as a roadblock, I wondered if this could'nt be an opportunity to take advantage of the work we had completed at the start of the project. Fortunately for us we could!
Retrospective
leverage existing functionalities to meet new technical requirements
We were able to leverage certain functionalities requested in our initial proposal to work in tandem with the new technical requirements: including the ability to identify a device by scanning the QR code.
Results
Due to technical constraints and previous commitments, this latest functionality has not been officially launched, however, since implementing this functionality in beta testing, the overwhelming response from testers has been positive.
-
Pairing time cut by nearly 60% from an avg of ~9.5 minutes to ~4
-
90% of participants found the new pairing flow more intuitive
-
Former pain points were described as “simple” and “clear”
What I learned
Asking the Right Questions Reveals the Right Opportunities
-
Collaboration is key: This experience reinforced how valuable it is to work as. team to achieve desired results. The project took many turns and I relied heavily on my product manager and software engineers to find that sweet spot between user needs and business constraints
-
No effort is wasted: While we may not have been able to address every concern all at once because we were asking the right questions, we were ale to identify the underlying problems, until the right opportunity came a long and we were able to act on it.