Design impact in IoT product UIUX design with ten years’ legacy

Background

Nixplay has been recognized as the No. 1 digital photo frame seller on Amazon US and Canada. As a global company with over ten years of legacy and 3.5 million users, any minor changes could easily evoke many complaints. That’s why we embraced iterative approaches and spent three years re-shaping the cross-platform experience. After the new mobile app launched in 2019, we changed how people share memories and interact with smart photo frames in 7 languages. Until December 2021, we boosted the mobile app rating from below two to above four stars.

When I joined the company in late 2017, I participated in this mobile app revamp project from the very beginning. I worked with a team of designers to run design sprints. We leveraged user research and data analytics to iterate and evaluate the experience. Finally, We designed a new mobile app that reshaped the experience and moved the needle.

V1 – Revamp / Reskin

Time: 2018 April – 2019 April

Platform: Android app, iOS app

Team: 2 UIUX designers, 1 UX manager, 1 scrum master, a few engineers, and QAs

V1 Goals & Strategies

Improve usability: keep the mobile app design simple and intuitive.
Improve customer satisfaction: keep existing functionalities but reduce frustrations.
Increase user retention: introduce some remote control mechanisms to empower smart device users and encourage them to return to the app.

User Needs & Pain Points

Users find it problematic that there’s no way for them to know their frames’ status remotely in order to do some troubleshooting.
Users find it bothered them a lot that they couldn’t change the frame playlists remotely for the frame owners.
Users find it inconvenient that they cannot see what photos have been uploaded to the their frames through the app.
Users find it confusing that the visual languages are so different between our mobile app, web app, and frame user interface.

Design Philosophies in V1

Device-centric
Sustainability
Consistency

My Design Impact in V1

Redesigned a frame-centric home screen to unlock long-term product strategies. In the world of IoT, device-centric is a fundamental communication solution. I believe device-centric is also a core design philosophy to follow when reimagining a new mobile app to be not only a CMS platform but also a smart home space where you can communicate with the Nixplay smart photo frame regularly. While the other teammate focused on optimizing the photo upload experience, I was mainly in charge of reimagining the home screen. After a few rounds of feasibility discussion with the software and hardware team, I developed this frame-centric design to allow users to see their frames’ real-time status and remotely control them. It featured a frame that shows the on/off status, orientation, uploaded photos, and current playback mode. It also included a playlist picker, remote control, volume shuffle controls, and frame settings. This frame-centric approach boosted user satisfaction and in-app interactions and set a bold product vision to materialize the shared frame in the later iteration, V4 2021. You can find the improvements from the following metrics. (The data range for comparison is from April 1st, 2018, to April 1st, 2019)

App store rating showed a slow growth from below 2 stars to 2.3 stars.
Monthly active users increased from 99k to 111.5k.
Monthly active users increased from 111.5k to 184.7k.
Day 7 retention increased from 6% to 12%; Week 3 retention increased from 21.7% to 27.3%.
The plus button and play one playlist events became the top two interactions for frame owners.

Set up iconography guidelines to improve brand consistency. To address the branding inconsistency legacy, I did an audit with 200+ icons to investigate the existing cross-platform iconography. Unsurprisingly, the icons from packaging, marketing material, websites, mobile, and industrial design rarely talked to each other. They conveyed the same message by using different variations of icons. To ensure branding consistency, I not only set up the iconographic guidelines but also an approval SOP for the UIUX team and other design teams to enhance collaboration workflow. (Visit the iconography guidelines, icon assets, and tutorial for cross-team members)

Introduced new brand assets to reinforce consistency between software and hardware. One of the challenges of IoT UIUX design is maintaining a consistent brand cognition across different platforms. To create a consistent digital and physical experience, I introduced a diamond pattern into the mobile and frame user interfaces. This patent-pending pattern has been used on the back of every Nixplay frame. It not only reinforced the brand consistency, but also evoked a premium feel and enriched our UI design language. (Visit the Nixplay New Brand Assets)

Established a code-based design library to empower developers to be inconsistency-assassins. I worked with engineers side by side to translate our new design system into a React Native code-based UI kit. I also provided training sessions to the development and QA team to align the best practices for using the UI kit. (Visit the dev training materials)

Sowed a seed of inspiration with some vision projects. After this V2 release, our team presented a show-n-tell to the company. My role in the show-n-tell is to create and demo a few vision projects to shape a shared vision of a better and smarter IoT experience. I also initiated and facilitated a few design workshops to gather insights across the design team and product team and build a shared vision for the business. ( Visit the show-n-tell deck, gamification workshop, photo enthusiasts workshop, photo enthusiasts concept designs)

Methodology in V1

Sitemap evaluation, customer journey mapping, affinity diagrams, sketches, wireframes, mockups, interactive prototypes with InVision, remote user testing with LookBack

V2 – Sharing & Engagement

Time: May 2019 – April 2020

Platform: Android mobile app, iOS mobile app, web app, frame app

Teammates: 2 UXUI designers, 1 PM, 1 BA, a few engineers, and QAs

V2 Goals & Strategies

V2 set a foundation with a better mobile app experience prioritizing frame owners’ needs. After this release, the company changed its hardware-driven business model into a service-driven model in 2019. To support a long-term service-based monetization model through the app, V3 served as one of the strategic pillars to achieve the new business goal by increasing the stickiness of the whole Nixplay ecosystem with the following tactics.

Increase content sharing by replacing the 1-to-1 photo sharing model with a 1-to-many model, a.k.a. shared playlists.
Acquire more Non-Frame Owners (NFO) by leveraging the network effect of memory sharing
Increase user engagement by introducing likes and comments on photos

Design Philosophies in V2

Storytelling
Memory-oriented

My Design Impact in V2

Worked with the product team to define all user stories and metrics for shared playlists. At the beginning of this project, I worked with another UXUI designer to conduct competitor research and nail down the sharing mechanism. After the design got approved by stakeholders, we divided the work into different platforms. While my design teammate worked with a BA to focus on the mobile experience, I was designated as the PIC for the web-app experiences. I created all the web-app user stories to ensure the whole agile team understands how a piece of the shared playlist feature will deliver value to customers. I also worked with the PM to define a success metrics dashboard on Datadog and a list of Firebase data tracking events as leading indicators. After the shared playlists launch in September 2019, you can see improvements in the following metrics. (The data range for comparison is from April 1st, 2019, to April 1st, 2020) (Visit the YoY User Behavior Report)

App store rating boosted from 2.3 stars to 4.7 stars.
Monthly active users increased from 111.5k to 184.7k.
Day 7 retention increased from 12% to 14%; Week 3 retention increased from 27.3% to 38.7%.
The shared playlists’ adoption rate was 27.4%.
The invited users’ adoption rate was 9.9%.
The share events reached a peak of 8.5k on December 26th, 2019.

Solved the complexity of cross-platform photo liking. In the beginning, I conducted competitor research, interaction research, and smart device metadata display comparison to help the team align on our liking mechanism. However, liking a photo in a digital photo frame is never as easy as liking a photo on Instagram or Google Albums. Since there isn’t a physical button on the remote for liking, we had to introduce a detailed mode that can be triggered by the photo button to allow users to go in, see the metadata of the photo, and like the photo (Prototype, Prototype with music playing). For the touch frame, we introduced an overlay with a like button on top and also a double-tap gesture to allow users to easily like a photo on the frame (Prototype). On the mobile, we had to provide solutions on how to allow users to assign my own liked photos or photos liked by others to the frame, how to allow users to print liked photos, how to make sure the same photo liked by me will have the same liked status across different playlists, etc. (Visit the design review document to check the complexity). After this feature release, we kept monitoring the liking events on Firebase. It turned out we have a total 30K event count by 7.7K users during the peak season (Oct 2020 – Feb 2021). The event count per user was 7.5 which is a leading factor of pretty high-level engagement. The engaged sessions per user during this period was 6.1, which had a 60% increase compared with the previous year(3.8).

Methodology in V2

Competitive Analysis, behavior data analysis

V3 – Shared Frame

Time: May 2020 – April 2021

Platform: Android mobile app, iOS mobile app, Frame app

Teammates: 2 UXUI designers, 1 PM, 1 BA, 1 head of software, a few engineers, and QAs

V3 Goals & Objectives

Simplify the Non-Frame Owner (NFO) experience by introducing the shared frame.
Increase new user first session completion rate by introducing user role-based onboarding
Make the mobile app and frame app senior-friendly by improving legibility and accessibility.

Design Philosophies in V3

Simplicity
Granny-friendly
Family-focused

My Design Impact in V3

Used AppSee to observe and analyze user behavior.
Initiated and drove the legibility improvement project for mobile and frame. At the beginning of 2020, when the world started to become chaotic and disconnected due to COVID-19, we also saw senior people becoming tech-savvy and willing to stay connected through the internet. Given that 61% of our users ago 60+ years and 46% of them are retired, accessibility has become a tipping point to allow us to position ourselves as a senior-friendly product. I led a team of 3 designers to kickstart this project with the WCAG-based frame UI accessibility research, iOS & Android Accessibility Settings Analysis. Inspired by the research learning, I presented seven senior-friendly features to the business team to get their buy-in for the following accessibility & legibility projects(presentation deck). After stakeholder approval, we split the project into mobile and frame legibility improvements. (research deck). I prepared all the color guidelines for different frame-group text style guidelines, screen-by-screen design specs, multiple languages, special case handling, and all user stories(design outputs here). I also set up a shared frame UI dictionary on Sketch cloud for all the frame UI to allow cross-team members to have a single source of truth of the latest design. (Visit frame UI dictionary)