Settings Design

How might we design better “Settings” for the administrators so they have more control and be more efficient in managing their teams?

Compared to the Video Maker and the video listing pages, the Account Settings were less accessed by the users; However, with the change in the company business needs and the release of the new HTML5 Video Maker, Vyond decided to redesign the account pages. I along with a UX designer and a UI designer, we set off to improve the user experience of the Settings Design..

TEAM

Head of Design
UI Designers
UX Designers
Engineers

RESPONSIBILITIES

Information architecture
Competitor research
Prototyping 
UI design

The Problems

Settings design is not a shiny type of design. It is something that users need but don’t use frequently. I think it is a challenge to make the Settings simple and easy to use, so that the users can focus on what is really important, ie. video making.

PROJECT GOALS

01    Clean up site architecture
02   Create reusable and flexible UI components for future growth
03   Update and standardise the Account Settings UI with Vyond's design system
04   Enable administrators to delete account/ transfer content to a different account
05   Update the Settings visual design so that it reflects the new Vyond brand

PROBLEMS

Competitive
Research

FEATURE INVENTORY COMPARISON

One of Vyond's objectives is to become a professional video production tool for team collaborations. So I refer to indirect competitors such as Slack, Goggle and Zendesk for enterprise Account Settings inspirations.

We reviewed their navigations and information architectures so that we gained insights on how to better structured and grouped the settings.

Curating User Personas

To better understand our users, we identified 2 user personas:

01   Kim — Team administrator
02  Mary — Team member

The primary user that we focused on was Kim.

Start with User Goals

With the help of the Product Owner, we came up with different user goals and flows. 

USER FLOW 1

Kim wants to invite Mary to join a new group and share video assets with her

USER FLOW 2

Kim wants to remove Mary from the team and transfer Mary's videos to her account

USER FLOW 3

Mary wants to change the password of her Vyond account

Information Architecture

GROUPING THE CATEGORIES 

First we did an audit of the overall Settings features. Then we conducted Card Sorting exercises to help organising navigation and content of the Settings pages. 

By analyzing and comparing the results, my UX colleague, Lulu Yang finalized the Sitemap and we obtained an idea of the structure of the Settings design.

Ideation

WIREFRAMING

With the researches and insights, we started to explore the design solutions. Lulu created low-fidelity wireframes for discussions and we agreed on the main design directions:

01  VERTICAL SIDEBAR

Compared to the tabs, we thought a vertical sidebar could accommodate more categories in the future.

02  “INLINE EDIT“ DESIGN PATTERN

Inline Edit design pattern kept the page clean and scannable. The user stayed in the "Read" mode unless he clicked on the "Edit" buttons and made changes to the settings.

Prototyping

MID-FIDELITY PROTOTYING

We showed the initial wireframes to the design team. Getting the confidence from their feedback, I dived deeper more on the UI side with medium fidelity mockups on Sketch; whereas Lulu developed more on the wireframe flows.

CLICKABLE PROTOTYPE IN XD

A clickable prototype was created in XD to test how the  "Settings" component worked. We showed it to the developers and the design team for usability testing. We identified some usability issues and gained some useful feedbacks.

MAIN USABILITY FINDINGS

01   Having both “Cancel” button and the top right “Close” icon are confusing 
02  User found it annoying if he wanted to edit multiple settings. He had to close one block first before opening another.  
03   What if the user closed the block without saving the setting?  

UI Patterns

REUSABLE COMPONENTS

I began to define components and push them to the UI library for uses across the Account Settings experience.

The "Settings"  and "Table" were new components. I ensured that they fitted within the existing Vyond design system.

The components were broken down into smallest reusable units. All states and interactions were defined. 

On the Engineering side, engineers tested out the designs in code, components were further modified based on engineers feedbacks.

SETTINGS COMPONENT - "VIEW" STATES

THE SETTINGS COMPONENT - "EDIT" STATES

SETTINGS COMPONENT - " LOADING" STATES

TABLE COMPONENT

TABLE COMPONENT - HOVER STATE

TABLE COMPONENT - LOADING STATES

TABLE COMPONENT - TABLE THUMBNAILS OF DIFFERENT SIZES 

SETTING DESIGNS USING STANDARDIZED UI COMPONENTS 

Responsive

Learnings 

01 THE IMPORTANCE OF DESIGN SYSTEM

The Setting pages had numerous features. There were lots of tables, form input, dropdown, buttons, notifications etc. With a set of reusable UI components, UX designer could quickly prototype and propose different solutions.

In the end, we were able to come up with a scalable architecture for the Settings design.

02 BENEFITS OF AN AGILE PROCESS

In this project we toke a more agile approach in product development. We hosted weekly team meetings to review the design process, everyone including the product owner, engineers, UX designer and copy writer were brought in to review the UX directions and UI components for the project. The engineering team was very agile and cooperative in testing out the components. 

This was important because we got to validate and test the designs early with engineers. I learned that It helps to implement the design system to the product from the beginning and make it part of the workflow.

03 TEST EARLY AND SEE HOW IT GOES

What I learned was that being a designer meant open to changes and being resilient.

There were times when engineers pushed back our design. For instance, for the responsive data table, at first we want to transform the table into "Card" views, but after discussing with the engineers, due to time consumption and technical requirements, we decided to go with a more straightforward and MVP approach -horizontal scrolling.

This was a bit hard to take at first, but then I learned to focus on what really bring values to the user's experience and tried to simplify and let go of the obsessions for perfections.