Toni Richter

Wordflow

An easy-to-use desktop website builder for creating individual websites.

Roles

Research
Conception
UX/UI Design

Partner

Lucie Wittmer
Sarah Kuklinski
Vanessa Weber

Supervisor

Thomas Techert

Context

Many people nowadays get to the point where they need to create a website on their own. Some may already be experts but many also have zero knowledge when it comes to creating digital products. Of course there already are good tools like WordPress or Webflow, but we wanted to fix some problems we faced during our research and analyzation.

Problem and goal

A main issue in existing tools was that the workflow is often disturbed because users have to jump between the pages. The goal was to improve some common problems like this and create a new website builder. It should be easy to use, modern and made for everyone.

Interaction flows

In order to visualize different interaction cases, I created interaction flows. This example shows how a user is operating when they create a new page.

Styleguide

Our design approach was to create a look that’s both professional and appealing. Therefore we used a lot of white in combination with a clear, dark blue. To avoid the users being distracted, we avoided a lot of details, different colors or other small things.

Key screens

The website builder – heart of the software concept. At the top are different administrational options, like choosing the right page or publishing it. Users can create frames freehand or choose from pre-build ui elements. The toolbar is at the bottom in full-width so the live preview isn’t squeezed together.

The dashboard – on this start screen users are getting an overview about what’s going on. They have the option to change widgets or directly jump to their website.

Themes – if someone wants to use a template for their design, they can manage them on the themes page. There’s an overview of themes where users can choose from, always with the option of a preview.

Check out some more: