Rogers Smart Home Case STudy
A rapid re-design case study to improve user pain points and more effectively organize the existing application.
A rapid re-design case study to improve user pain points and more effectively organize the existing application.
MSÂ UX & Interaction Design
IDD-637: Mobile Communication Design Project 1
UIÂ Designer
Jan. 12th, 2022 - Mar. 11th, 2023
10 weeks
Adobe XD, Adobe Photoshop
Rogers has provided millions of Canadians with the ability to create a system that works best for them and their home. As part of their current home security product line, the Rogers Smart Home mobile application is used to control different aspects of a user’s security system. In an effort to create a wider product range that gives users multiple access points across a variety of situations, I designed two new prototype experiences for wearable tech and car infotainment systems with updated functionalities to reflect the technology they were designed for.
Take an existing product which currently only lives on “traditional” UIs (mobile/tablet/desktop) and repurpose its features and experience to create two new alternative interfaces.
The existing smart Home mobile application uses three main sections within a user's security system. The Overview screen provides the users with general insights into their system status and the ability to change and control certain aspects of their system. Users can arm/disarm their security system, lock doors that use smart locks and manage any smart LEDs in their homes. From here users can also activate Scenes; which are a set of predetermined actions that occur when a certain scenario is activated. In Activity, users are provided with a catalog of all of their security systems actions that are occurring, and users are able to travel to certain dates to view activity then. The Scenes tab builds on the Overview tab by giving users the ability to create new scenes, edit existing ones and manage any other device/system rules they might have in place.
For the first use case, I chose to rework the existing application into a wearable technology, specifically the smart watch. As part of a user's everyday schedule, the integration of a wearable iteration of the Rogers Smart Home application would allow users to monitor their system status and updates in a more efficient manner by reducing the need for users to access the mobile application as much as possible throughout the day.
It was crucial that the information for each mobile tab was boiled down to the essential data points that needed to be presented to limit confusion and messiness in the final interface. Given the size interaction constraints that come with wearable tech, the primary goal of this redesign was:
Focusing on presentation of information and streamlining the system management from mobile to only highlight necessary interactions.
Emphasizing key system interactions like arming, disarming and basic device control like locks and doors,
The first iteration of wireframes focused on taking the existing tabs and repurposing them into manageable cards so that users could gain more insights about their system from smaller interaction times. The first thing to do was design an onboarding system that would allow users to minimize an extensive login process on smaller wearable devices. By using the users existing login status on the mobile application as a part of the new onboarding process would help keep the flow simple and concise.
Given that the watch was primarily going to be used for quick glances of information rather than extended periods of time with users touching and interacting with the watch, it made more sense to have information as the focus as opposed to interactions. The Overview and Activity tabs remained in a pared down form for the user, with the new addition being a new card made for sensors, which would allow users to view the status of any environment sensors like smoke and carbon monoxide.
For the second iteration, the prototype was expanded to include new screens for system states and sensors that users could have as part of their system. Extra screens were also added to illustrate certain actions users can take within the app, specifically arming their system and navigating to certain dates in the activity tab; along with extra notification screens and expanded onboarding screens to better simulate the functionality that would be found on wearable devices. In these screens, there was an increased emphasis and reliance on the iconography in order to create a clean interface for the users to work through, and limiting excessive copy.
Most components were drawn from existing watchOS design kits in order to maintain consistency with known wearable design principles. This iteration also started working with color and contrast to start testing visibility for the final prototype.
The final prototype is a refinement of the medium fidelity, and a better look into a realistic iteration that meets wearable design principles. The final prototype was also wired up to simulate an open prototype that would allow users to navigate freely depending on their use case.
For my second use case, I decided to work with a redesign for car infotainment systems similar to CarPlay and Android Auto. After speaking to Smart Home users,a consistent use case that was highlighted was that users tend to pre-set certain linked devices activate/deactivate to prep their home as they leave or before returning home in the mobile application; often time these are done as the user is driving, present a clear opportunity to create an experience that would give users the same ability in a safer, driver-friendly environment.
When considering features that would work best in this type of interface, the main goals were:
Presenting the users system status in a manner that was not intrusive and prioritizes driver safety.
Give users the ability to activate presets and Scenes to manage devices and home prep
Create user- friendly screens that allow users to manage devices, sensors.
Emphasize and adhere to car-friendly design principles
The first iteration focused on reworking the mobile applications to make the interaction CarPlay friendly. Ensuring that an interactive components were sized to give to provide the user with a clear indication of its purpose, to limit time spent staring at the screen. Another important part of this iteration was creating screens that prevented users for working through longer workflows when driving, essentially acting as a wall until the user came to a full stop. The results of this iteration were screens and workflows for users to create Scenes and view the status of their sensors and devices.
Feedback from iteration 1Create Driving mode to present users with a limited interaction screen that gives a general overview of their system and allows user to activate certain scenes.Give users more control in stationary scenarios, and reduced interaction/distraction in driving scenarios.
Create Driving mode to present users with a limited interaction screen that gives a general overview of their system and allows user to activate certain scenes.
Give users more control in stationary scenarios, and reduced interaction/distraction in driving scenarios.
The second iteration worked in changes from the previous round and began integrating high-fidelity components to better gauge layout and sizing. The Driving Mode screen, inspired by Spotify and other CarPlay apps showcases a simple overview of all of a users safety and security sensors and system statuses. The addition of large, easy to interact buttons to activate common scenes provides a high-constrast interaction points that can stand out from a distanceUsers can navigate out of this as desired, but at a certain speed threshold, this screen is triggered and maintained.
The final prototype added on the past two iterations by including a more screens for certain workflows in order to create a natural flow for users. Introducing sub-screens in between major interactions points better present the user's progress through a workflow. Finally, adjusting all final iconography, and visual branding gave the prototype a finished look and feel for any users.
At the top of the list, the greatest takeaway came from the ability to work through two rapid prototypes. Creating two unique prototypes within such a condensed time frame was going to be a challenge regardless, added with working with two new technologies I had not designed for previously. This project really taught me to rely on the secondary resources of the design community to better streamline my own work and meet the deadlines set for me.
