Design impact in IoT cross-platform product with 10 years’ legacies – XXL | UI UX Designer

Design impact in IoT cross-platform product with 10 years’ legacies

posted in: Insights, UX | 0

Background

Nixplay has been recognized as the No. 1 digital photo frame seller on Amazon US and Canada. As a global company with 10 years legacies, we spent 3 years’ iterations to evolve and re-shape a new experience that has been proven to improve the daily life for existing 2 million users in 6 languages. Until December 2019, we boosted the mobile app rating from below 2 stars to above 4 stars, with a 67% NPS scope.

When I joined the company in late 2017, I was lucky to participate in this mobile app revamp from the very beginning. I worked with a team of designers to run design sprints. We leveraged user research, data analytics, and remote user testing with our existing US users to validate, iterate, and finally came up with a new mobile app that moved the needle.

V2 – Revamp

Time: 2018 April – 2019 April

Platform: Android app, iOS app

Teammates: 1 UIUX designer, 1 UX manager, 1 scrum master, 1 head of software, a few engineers, and QAs

V2 Goals & Objectives
  • Improve usability: effectiveness, efficiency, and simplicity keeping in mind a Mobile app should be intuitive
  • Increase user engagement: Finding new ways to retain user and empower them return to the app
  • Improve customer satisfaction: by reducing frustrations
Highlighted User Pain Points & Needs
  1. Users find it confusing that the visual languages are so different between our mobile app, web app and frame user interface.
  2. Users find it confusing about the difference between a playlist and an album.
  3. Users find it inconvenient that they cannot know their frame’s status remotely.
  4. Users find it inconvenient that they cannot change the contents (playlist) for their frame remotely.
  5. Users find it disappointing that they cannot see what they have uploaded and what other friends have uploaded to the frame.
Methods Applied in V2

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

My Design Impact in V2
  • Came up with a frame-centric Home Screen. While the other teammate was focusing on simplifying the photo upload experience, I was mainly in charge of reimagining the Home Screen. After a few rounds of design iterations, technical feasibility consultation and user feedback consolidation, I finally came up with a Home Screen design that was able to show the real-time status of the frame, including orientation, online/offline, current playlist, volume level, shuffle status, etc. (Visit the iterations here)
  • Set up iconography guidelines for cross-team members. In order to improve the cross-platform visual consistency, I did an audit to list out 200+ icons that have been used over the 10 years. I wasn’t surprised to find that the icons from packaging, graphic, website, mobile, and industrial design rarely talked to each other. They were referring to the same thing but using different variations of icons, in different shapes, stroke weights, corner radiuses. After I set up the iconography guidelines on Sketch, I also prepared a tutorial for graphic designers and industrial designers to follow the same guidelines on Adobe AI. (Visit the iconography guidelines and icon assets)
  • Redefined the theme color and redesigned the app icon. Given that 75% of existing Nixplay users are over 50 years old, the low contrast ratio (2.35:1, much lower than WCAG 2.0 AA level) of our old theme color Nixplay blue became a big usability concern. Also due to the low contrast ratio, the mobile app icon was also hard to be recognized. So I did some color research and a few rounds of explorations before finally coming up with a new Nixplay blue as the theme color. As for the app icon redesign, I picked up a wave texture that has been widely used in the back of every Nixplay frame and applied a silver logo on top. This new visual language kept the visual consistency between our hardware and software. (Visit the color guidelinesMobile App Icon Redesign)
  • Closely worked with engineers to define and evolve the React Native component-based design system. To empower the whole software team to be the inconsistency assassins, I worked with engineers side by side to translate our new design system into a code-based UI kit. Detailed design specs and training sessions were also provided to both the dev team and QA team to understand the best practices of using the UI kit. (Visit the dev training materials)
  • Sowed a seed of inspiration with some vision projects in a show-n-tell. After this version release, a show-n-tell has been presented to the whole company by me and my teammates. During the show-n-tell, we tried not only to evangelize the design impact of a better user experience but also to shape the vision for everyone of what a better and smarter experience could like like. ( Visit the show-n-tell deck)

V3 – Print Integration

Time: May 2019 – April 2020

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

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

V3 Goals & Objectives
  • Improve content sharing experience (in charge by the other teammate)
  • Increase revenue by integrating an in-app print shop

Methods Applied in V3

Data-driven personas, User needs & wants analysis on Zendesk, Competitor UX benchmark research, Competitor print product test, SDK providers comparative analysis, PoC, Prototyping,

My Design Impact in V3
  • Set up two data-driven personas to inform our decision-making. At the beginning of this project, we sent out two surveys to 223k existing users. I set up two personas that were based on the demographics data, gifting, and photo printing behaviours that learned from the survey report. (Visit the survey report, personas)
  • Conducted competitor UX benchmark research, competitor print product test, SDK providers comparative analysis to help the stakeholders better understand the Pros and Cons of our potential print service providers. (Visit the comparative analysis)

  • Worked closely with an engineer to develop and iterate a PoC to help the business team discover potential risks. In the beginning, we were leaning towards Kite.ly SDK due to their playful product categories UI and intuitive photo book editing user experience (PoC). But after we used our personas to conduct a scenario walkthrough with the PoC, we found that since it’s a UK-based company, the shopping time to the US took more than a week and the cost was pricy. To avoid potential risks, it was a business decision to use Fujifilm as our print service provider mainly due to US-friendly shipping time and a wider range of product SKUs. To compensate the Fujifilm SDK’s preliminary retro design(PoC), we agreed to use an API+SDK approach which allowed us to customize the product categories list, product detail page, and order history using Lottie JSON for the success animation (PoCOrder history prototype)

  • Set up an SOP of graphic asset preparation for the new SKU. One of the challenges that came hand-in-hand with customization was the massive amount of effort needed to prepare design assets for each SKU. It took 4 designers 2 weeks to prepare all the assets for 53 SKUs of printed products in shop. So in order to make the process scalable to move forward, I prepared this Print Product Design Asset Preparation SOP for a team of designers to follow and collaborate together. (Visit SOP)
  • Worked with a PM to use user flows to present 3 sets of business strategies to stakeholders on how to drive conversion in the print shop. In this presentation, I guided the business team to think through different flows by wearing different users’ hats. They felt empowered to visualize how each business model could impact different users’ life. And also powerful to help them find the balance between business objectives and user objectives. (Visit proposals deck)
  • Set up funnels to track the conversion rate on Firebase. I worked with an engineer to identify key events and define a few print stop funnels on Firebase. It allows the business team to constantly monitor the conversion of each promotion touchpoint, and also gives us data insights about the performance of each in-app print promotion campaign. It turned out that we already have 35% conversion rate during the first month of print shop launch. (Visit funnel)

V4 – Improvements

Time: May 2020 – April 2021

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

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

V4 Goals & Objectives
  • Improve user engagement by introducing photo liking
  • Improve legibility and accessibility on mobile and the frame
  • Introduce Nixplay Plus subscription (in charge by another teammate)
Methods Applied in V3

competitor research, interaction research, prototyping, WCAG-based frame UI accessibility research, iOS & Android Accessibility Settings Analysis, legibility research,

My Design Impact in V4
  • Solved the complexity of cross-platform photo liking. In the beginning, I conducted competitor researchinteraction 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 (PrototypePrototype 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).
  • Initiated and drove the legibility improvement project for mobile and frame. Back to the beginning of 2020, when the world started to become chaotic and disconnected due to COVID 19, we also saw senior people are becoming tech-savvy and willing to stay connected with each other 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 7 senior-friendly features to the business team to get their buy-in of the following accessibility & legibility projects(presentation deck). After stakeholder approval, we split the project into mobile legibility improvement and frame legibility improvement. While my teammate was working on the mobile, I was mainly focusing on the frame UI legibility improvement(research deck). I prepared all the colors guidelines, for different frame-group text styles 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)