The Project

We decided to redesign the current HeroSpark landing page editor. This was necessary due to the context of usability issues we were facing within the application. After several studies and analysis, we decided to rethink the UI strategy and the format of configuring each element of the editor, as well as remodeling the entire branding style of the application.

The problem

Over the course of a few months, we have received a lot of qualitative feedback from our users, claiming difficulty in using the HeroSpark editor. Analyzing the data, we could understand that more than 67% of our users who started editing, could not finish their page due to difficulty or non-comprehension in configuring various elements of the application. Furthermore, we have noticed that more than 32% of users, after entering the editor, did not start editing their pages at all. Watching some screen recordings, we understand that this was due to the difficulty in understanding how to edit some page elements. At that point, it was very clear that usability was very problematic to our users' experience and therefore, the redesign was the smartest decision at that time.

The process 

After prioritizing this delivery, we understood that we needed to get a more analytical insight on the problems. Thusly, alongside the support team, we collected all the tickets that referred to the pages' application. At the same time, we reviewed all the screen recordings in Hotjar. After we gathered the results and established, in a visual way, all the main problems of the application.

Having clarity of the problem, it was time to think about solutions. For that, we started to map out all elements of the current application and how they've worked. We've marked the elements that were causing more frustrations for our user. At the same time, we started benchmarking with 4 other editing tools. 

Then, we started to prepare the changes themselves. For it, we made some brainstorming sessions, we've used the "crazy 8s", "6 thinking hats" alongside other design tools to develop solutions with our internal stakeholders and some users. We made an initial prototype, which went through some in-house usability testing. With the results, we have made the necessary adjustments and proceed with new usability testing, this time with end users. Then we made the final adjustments and finish it out the final screens to proceed with the delivery process.  

The deliveries

Check more on: https://www.figma.com/file/d3FYcpDzV168aVjReekDQU/Portfolio?node-id=1%3A3845