Content Builder (Website Builder)

all design steps: me (lead)

Initial Requirements

create a customizable website builder
utilize technology such as drag and drop to ensure the best experience for users
allow users to style their website as much as possible

The initial idea was to create a page builder, where users can create and customize their own website (think wix, webflow, squarespace) so that we could offer a unique and creative experience for our customers to express their brand when selling through our platform.

It was also important to make sure that the examples used were the right fit for the US market - as this is our target customer base - with specific country based needs.

One of our main selling points was how quick you could set up a store, therefore, the UX needed to keep this in mind, so that our users could easily customize their site in as few clicks as possible.

Initial Wireframe

the concept started off as this:

on the left side would be the components that users can drop and drag into the middle section
the middle section would act as a preview of the components and how they are laid out on the storefront
the right hand section would be for customizing each component, including padding/margin, colors, fonts and other configurable options.

once a component is selected, a bottom bar will appear where users can drag the component into certain actions.

or they can drag directly into the middle preview section to start creating their site.

when its added, the right hand side appears where they can start to customize that component with specific options such as,

changing the backgrund color
adding a padding/margin
adjusting the width
adjusting the label font, alignment and color.

First Phase Completed

With the first initial design and implementation completed, it was vital that we got feedback from our users on what we could improve, due to the complexity of the project.

It was clear that a few aspects could be improved such as:

There was no indication of how this would look on other devices.
- An important aspect to E-Commerce as the majority of shopping experiences and purchases are made on a mobile device.
There were a lot of customizable options on the right hand side that it got overwhelming.
- With the complexity, we needed it to be as easy to use as possible - as too many choices can make a user feel confused.
We needed to communicate to users what the component they were selecting looked like.
- Clearly a website builder is a very visual task - it was needed to be able to see the components you are adding to your site.

Second Phase Improvements

Version 2 was created to help satisfying these feedback points

We introduced a ‘view’ button that could help users preview their content design in different devices
- Selecting the mobile view will adjust the preview middle section to mimic a mobile screen size
We used accordions on the customizable options to help separate sections so that users felt less overwhelmed about out vast options to choose from.
We designed and created skeleton components to use as a visual representation of what each component looked like.