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
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.
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
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.
With the help of the Product Owner, we came up with different user goals and flows.
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.
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:
Compared to the tabs, we thought a vertical sidebar could accommodate more categories in the future.
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.
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.
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.
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?
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.
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.
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.
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.
Selected Works
GoSketchUI/ UX Design
Art_Sketch_HistoricProject type
Art_Sketch_ParkProject type
test cover sliderProject type
Art of JoyProject type
Vyond Design SystemUI Design
Settings DesignUI Design