top of page

Wix

Online site builder platform

Screen Shot 2023-08-13 at 19.54.42.jpg

Accordion Component

Overview

During my journey at Wix for 2 years, I worked as a senior UX designer at the Editor Elements team.
Part of my job was to build or improve the components that are missing or partly missing in the editors.

As a part of my job, I worked closely for different companies within Wix - with UX managers, PM, developers and designers.

I had a privilege to be part of Wix and build products that millions of Wix users are bringing to the stage.

My role

Senior UX designer in the Editor Elements
Components team

My work

Among others my work process included:

- User interviews
- Market research
- Building flows and prototypes
- Finding for best possible solutions within Wix platform
- Accompanying developers
- QA
- Working closely with PM
- Usability tests

Accordion

Research:

Accordion was one of the top requests of our users. We started with a product research, went through user tickets and made up to 15 user interviews to make sure we are covering users' requests.

In our market research we checked over 30 websites and all the main competitors.
So we gained data and decided to implement all the features that were in usage  by over 15% of the websites.

Specs:

gfpp - is a control centre for the component, that allows the users to do what they need on the stage

Each button opens a dedicated panel

Layout panel allows to design the component layout

Screen Shot 2023-06-06 at 15.18.54.jpg

Flows:

Screenshot 2023-05-29 at 17.04.17.png

We built and added the accordion component to the layout tools add panel for Editor X with ready solution for the classic editor, but it's not yet implemented.

Tabs for Editor X

Tabs is a similar component to accordion &
it also was a very high demand component.

The process of work was similar :
Research (user interviews/market research) > Flows - Specs >
Development
QA
Production

Lessons learned - next steps for container based components

We saw that in classic Wix editor the component was in relatively low usage. After checking usage recordings, we realised that one of the main reasons was lack of ability to resize (make the containers smaller), as the classic editor containers don't have an overflow behaviour.

So next step suggested by me in improving these components will be adding an overflow feature to the containers in the classic editor. This solution will allow users to resize any container, by choosing whether they want to hide the content, show it or scroll the container that has hidden content.

This solution already exists in Editor X and in most competitor platforms, so there is no risk of hurting existing websites by adding this feature.

Screen Shot 2023-06-06 at 16.58.23.jpg

CSS Editing

CSS Editing was another very strategic product we created for the Velo editor (the editor for the developers). Until recently, developers could only edit JS on Velo. 
By categorising all Wix components we came up with solutions to allow users edit the CSS of almost every component from the add panel.

This project was created in collaboration of the components team and the Velo team at Wix. 
On my side it included:
- a very deep research of how components are built on Wix
- users behaviours on Velo and on local development tools
- business understanding of Velo editor
- research of CSS editing in general / learning a bit with CSS and playing with it
- Creating flows and making UX decisions 
- Usability tests:

Explore more projects

Screen Shot 2021-08-05 at 15.53.43.jpg

QuantaApp

Graphic Design Editor

Frame7 2.png

Beamie

Architects' business management app

Frame 1 (13).png

UX for e-commerce company

Beed-it

bottom of page