SPIN-O

SPIN-O is a new startup that wants to sell portable pizza oven to restaurants and individual customers. They approached us in need of a website that would best showcase their product. My challenge was to create a beautiful website that would introduce users to the innovative oven, guide them through its features and convince them to support the company on Kickstarter.

First steps

I met with the client shortly after receiving the first brief and product photos. We talked about the project and the client's expectations and I came up with a few quick and dirty wireframes. This gave my client a rough idea about where I wanted to go with the project. The next step for me was to prepare some actual wireframes in order to plan out the content. I added some microcopy for the (remote) copywriter to work with. I used Figma because of its excellent remote collaboration capabilities. That allowed me to easily present the wireframes to my client and then have the copywriter enter the copy or add comments etc. We had a few rounds of back and forth with the client inbetween to decide on what we thought was the right amount of copy and content. It wasn't until a round of user testing that we realized the copy needed some refinement.

The visual part

After ironing out all the obstacles discovered through working with users it was time to move on to the next stage. The SPIN-O team was very proactive in providing all the necessary content and information for the website, which is somewhat refreshing and something I really appreciate. The product photos and films for SPIN-O were of really high quality and set the mood for the visual side of the project, which saved us some time. While wireframing greatly improves mutual understanding between the designer and the client and helps a lot in the early stages of planning out content, I'm not one to strictly follow my wireframes if I come up with better ways to present the content that don't impact the UX in a negative manner. It wasn't any different in case of SPIN-O. Only after we had looked at the first mockup with the client, we came up with a great way to talk about the team behind SPIN-o and their story. This required some additional wireframing and copywrite work. Having completed the entire website as far as visuals go, it was time to do perform another round of user testing using a lo-fi Figma prototype to iron out any issues. I had to dial back on some design choices in order to make the website more comprehensible for the average user. Another round of testing confirmed that it was time for us to take another step.

Takeaways

I'm really glad for the opportunity to work on projects like this one, where the client is willing to cooperate on all stages, is enthusiastic about the whole project and brings a lot of his own ideas to the table. It also makes me happy when I get to employ such amazing tools as Figma in my projects, as they greatly improve communication and speed at which everything moves forward.