NETGEAR Meural

Project Overview

Objective

NETGEAR wanted to give a complete refresh and introduce some new features to the newly acquired product - Meural. The objective is to upgrade the overall experience of the Meural companion app and website (Canvas controller) making it more intuitive and easy to use.

Duration

4 Months (Jan 2020 - June 2020)

My Role & Responsibilities

My Role: UX Designer, my responsibilities, and tasks include - Requirement gathering, Affinity mapping, User flows, Information architecture, Wireframes, Interactive prototype

Team

The team consists of 5 members - 2 UX Designers & 2 UI Designer and 1 UX lead

Disclaimer: Due to non-disclosure agreements with Netgear Meural, I am limited in the amount of work I can show.

App store link Play store link Web link

Tools Used

Figma - For IA, flows & prototype

Sketch - For Visual Design

Abstract - For collaboration

Zoom - For communication

Challenges

Meural canvas is usually regulated by the Meural companion app. The idea was to socialize the canvas by adding new features, refreshing the aesthetics, and eliminating the UX inefficiencies.

• The current app’s interface is cluttered and has multiple design elements competing to attract the user's attention simultaneously. 

• One of the key functionalities of the app that lets users send photos from the phone to display over the canvas was a bit complex. 

• There was no clear distinction between what’s free & what’s paid stuff. This has irked the Meural users for a long time. 

• There were external links opening within the app which caused confusion & frustration, tappable elements didn’t seem so. We took up the challenges to help Meural appeal to a larger market chunk, a segment that’ll use Meural canvas to display family pictures to their grandparents, thus evoking positive emotions. 

Solutions

We started with the basics and did a thorough heuristic evaluation of the existing Meural app. We used the “How Might We” exercise to look for solutions to problems discovered, and then moved on to creating wireframes as per the user stories. In the ideation stage, we carefully ruminated over the placement of each & every design element over all the screens to reduce existing design clutter. By the end of the exercise, we were left with wireframes that transitioned into a simple, aesthetic UI for the app.

Feature integrations - The 'socializing feature' that lets users add peers into playlists is designed effortless and stimulating, thereby motivating users to perform the intended action. Meural app would now allow users to censor content, easily personalize things, and more. We eliminated the other UX issues and simplified the app, providing users with a rich experience overall.

Design Approach: Lean UX Process

As the goal is to improve and refresh the experience we decided to go with the Lean UX method: think-make-check, we have also applied the atomic design methodology in the UI design.

Stage 1

Think

Existing product analysis | User Research | HMW Statements

Existing Product Analysis

To understand the existing solution and to find the usability gaps in it, we started with creating information architecture of the existing design. This exercise helped us a lot to dive deep into the design, later we found major usability gaps, dead ends, loops, and unwanted clicks.

Existing IA

User Research

The main concern of Netgear was the bad reviews and ratings for the digital experience, customers are complaining about the app experience on the app store, Google, Netgear, etc.

We started analyzing these reviews throughout the internet, and we extracted a list of problems users are facing from that data.

• Sometimes it is very difficult to understand the user interface

• Difficulty in managing multiple canvases at a time.

• Difficulty in understanding what is free and what is paid

• Difficulty in buying and understanding the benefits of membership.

• Frustrating to see the buy screen after tapping send to canvas button.

• Difficulty in buying another canvas through the app.

• There is no option to censor content.

• The app sometimes opens external links which are frustrating and confusing.

• Sometimes it is confusing which element is tappable and which is not.

• Unable to know the exact meaning and purpose of Navigation tabs.

• Difficulty in monitoring the content playing on canvas.

• There is no option to comment on works.

• Difficulty in personalizing things.

• Difficulty in saving work or playlists offline.

• Unable to filter content according to choice.

Insights

How might we statements

We have the list of problems and challenges we gathered in previous stages, now is the time to generate creative solutions, we started pasting solutions on the wall, later we shortlisted a few solutions, and moved to the brainstorming stage.

We brainstormed on each shortlisted solution in detail before jumping into wireframes.

Stage 2

Make

User personas | User stories | App Flows | Information Architecture | Wireframes | Brand Guidelines | Visual Design

User Persona

Based on the targeted audience and the user data provided by Netgear, we defined user personas which helped us to understand the behavior of the targeted users.

User Stories

We started collaborating with the UX designer from Netgear and the facilitator to identify the modules and prepare user stories. After approval of user stories, we started pasting them on Jira as a ticket.

User Flows

We started creating the solution for the user stories in the form of user flows, it helped us in defining each step the user would have to take to interact with the product. It also assisted us in keeping ourselves focused on designing to simplify the users’ major tasks.

Information Architecture

After freezing the user flows, now is the time to do my favorite UX exercise: Information architecture, the reason behind it is my favorite list is that it helps me focus on organizing and structuring the information.

Canvas Setting: Scheduler

Invited Playlist

Meural app IA

Meural web IA - registered user

Paper Wireframes

As this was a "Pre-COVID" project how can we miss this highly collaborative exercise, we started with sketching all of our rough thoughts on paper and followed by a discussion on each solution. As we are still working from home now, I miss those two days which we have spent in the cafe of our office sketching and discussing with the strong coffee, Ah! Nostalgia.

Wireframes

Once the blueprint was all set, we started converting those to wireframes, after multiple brainstorming sessions and A/B testing of several layouts which majorly include widgets, we started sharing those with the stakeholders on the weekly basis.

Brand Guidelines

We started collaborating with Netgear for the Brand guidelines, once it is set we are good to move to visual design.

Atomic Design Methodology

Time for some chemistry, we started the visual design with the atomic design methodology, we started defining the Atoms - smallest building block which is CTAs, thumbnails, form elements, icons, avatars, etc. Then we moved to the Molecules stage, in this we take our independent atomic design elements, each with their characteristics, style, format, and begin to bring them together into new groupings, after this comes the Organisms, in this, we group the atoms and molecules to create the organisms, for example creating a header.

Atoms

Molecules

Organisms

Visual Design

As most of the elements are ready in the form of atoms, molecules, and organisms, we started creating visual mockups by drag and drop and creating/editing the required elements directly on the page.

Mobile App

Web

Tablet and mobile view-port adaption

Stage 3

Check

Interactive Prototype

Interactive Prototype

We started connecting the dot to create the interactive prototype, it helped us check and deliver the solution to the developers and stakeholders.

What I learned

• How Atomic design methodology works

• How to design for enterprise products, as this was my first enterprise project

• Collaborative exercises like HMW statements, brainstorming sessions, paper wireframes etc.

Key Takeaways

View my more work

Loved it? There's more

Thank You!