Rhaegar is a React app that is essentially a redesign of our Design Editor for Pixlee's 2019 Hackathon. It was crowned the winning project.
Problem: If you want to use Pixlee to create and publish widgets that you can use on your websites, you need to use our Design Editor to create, customize and style it. It's functional, works great most of the time, and does the job. However, we occasionally do run into bugs that somehow break a client's widget or on other occasions, it doesn't turn out how they thought the widgets was going to look like.
The reason I wanted to tackle a redesign of our Design Editor was because I had some ideas on how to improve it. Also, as someone who has to use Design Editor very often when debugging or even fixing bugs for clients, improving it would my make my life easier.
After spending almost 9 months at Pixlee, getting familiar with the app and all the nuisances of it, I had come to a theory that most of the publishing widget bugs were due to the simple fact that users couldn't visually see how the changes they were making to the widget would end up affecting their widget. While there was a live preview in theme customization window, a lot of customization options to alter the widget visually were in lightboxes that had no live preview.
Most of the required info is set up first in the first Lightbox. These options reflect what content is displayed in the widget and how they are displayed.
Then if the user wants to, they can pick a theme and customize it to their liking
This is the Design Editor. This is where most of the visual customization happens. You get a live preview of the changes you make to your widget.
Solution: For my redesign, I ended up simplifying the workflow and added a live preview that was fixed on every screen/section of the new Design Editor. This way, any small or big changes you make on the widget, you can see the impact right away.
I also ended up adding better empty and error states to give the user feedback on what happened and how to correct it.
It was a 2 day hackathon project so I didn't quite get to all the features I wanted to add but some of the other improvements I managed to squeeze in were: