UI Iterations.

Introduction

After the first round of user tests I gathered quite a few good feedback points that would help to improve the user experience of the tool. During these tests users interacted with the tool and shared their thoughts on what worked well and what didn’t. This feedback was great because it came directly from the people who would be using the tool. By looking at their comments and suggestions, I was able to find the most important and realistic ones to implement. My goal was to make the tool more user friendly based on the insights I got from these tests.

Abstract

The first priority was changing the way how sections can be regenerated. The way a section could be regenerated was by entering edit mode, selecting a section, and entering a prompt asking for the specific things you would like to change. However the input field for this was at the bottom left which was not user friendly, as through the user tests it was discovered that this wasn't clear.

Before Iterations

To make this better and clearer, I first changed the way edit mode works. Now when edit mode is enabled, the page takes up the full size of the screen. This way the user can fully focus on the individual sections. Now when a user selects a section, instead of the input being at the bottom left, it is now shown right under the selected section. This way it's really hard to miss the input bar.

Improved Edit Mode and Section Selector

Another improvement that came from the user tests was the selection of products in the product search. Before, you had to specifically click on the checkbox to select a product. However I changed this so now the whole product item is clickable. This makes it a lot easier for users to select products.

Before Improved Product Selector

Improved Product Selector

With the more clear way of making changes to sections, there was still an important functionality missing: publishing. I needed a way to include this button in the UI that wouldn't further obstruct the view of the generated page but would still be clearly visible. I decided to add a header to the design and place the publish button at the top right. I could now also move the edit mode switch into this header so no elements would obstruct the generated page at all.

Improved Layout and Added Publish Feature

Lastly, while discussing the changes with my company mentor he mentioned that it would also be good to include a title editor, where users can set a title of the page before publishing it. This would give users even more control over their final page and also improve the SEO of the page.

Added Title Editor

Conclusion

These changes greatly improved the tool. By chaning the edit mode and making sure that important features like the input bar and publish button are easy to find, the overall user experience has been improved. Users can now navigate the tool more easily and complete tasks more efficiently.