Redesigning the sensenet.com website

October 19, 2020CsabaPeter

As lot of you already know we came out with the SNaaS (sensenet as a service) beta for the hacktoberfest and with the whole new admin system it’s only fair that we would do a whole new website for sensenet.com as well from scratch.

In early summer when it became clear that we want to launch the new SNaaS in October we also decided to redesign our website as well. Given that it was our goal to finish the site in September so we can properly promote our product and make a site that gives easy to access information about it. The schedule was very tight but at the end of the day the team made it happened.

The research

This time I didn’t had to do the research alone because Blackhole Media (a marketing agency) helped us out in the process. They did the personas and competitive research and we had sessions and small workshops together where we made customer journey maps and the sitemap as well. Because of the recent pandemic situation in the beginning we did everything online and used Miro during our sessions where everyone could brainstorm and share his or her ideas at the same time.

Later, we had the chance to work together in person as well, but we kept using Miro throughout the whole design process.

Wireframing

After the research when everyone agreed on what info should go where and made the sitemap it was time for me to start making the low-fidelity wireframes. I used Adobe XD as my primary design tool. As the first step I made the wireframe as we agreed on the sitemap but after I finished it and showed to the team and the stakeholders as well, we made a few small changes to the wireframe.

During the design of the low-fidelity wireframes the sales team and Blackhole Media were working tirelessly on the copy of the website so by the time I finished, and everyone agreed on the first iteration they could be ready as well.

The next step from here was the high-fidelity wireframe with the finished copy and this time I made a clickable prototype as well. I choose to do a first round of user testing after I got finished with the high-fidelity wireframe because we wanted to make sure that if there’s any issue with the design we should find out as soon as possible and make it right in the early stages.

User testing

After I was done with the clickable prototype it was time to recruit participants for the user testing. We managed to recruit seven people and arranged the test times. Because I was out of office during the time of the tests, I did a workshop with our sales team where they learned how to conduct the user tests. By the time I got back they finished with everything, so I was able to watch the recordings and read the notes they took. Fortunately, I had to do only minor changes, after that I started to work on the final design.

Final design

For the final design the team choose the colors and photos that we will be using. I started laying out everything and made it into the design. At this point I haven’t changed anything in the layout as it was validated with the user tests, so I was able to focus only on the design elements and chose which images should we use. After everything was in place it was time for another round of user validation which went very smoothly.

Conclusion

I had a lot of fun during this project although it had a very tight schedule, we made it working thanks to all the people who participated and helped to make it happen.

You can check the site at www.sensenet.com