Smartpeak is an AI powered E-commerce suite that helps stores manage, merchandise and market their products in a better way leading to more conversions and sales. I had a chat with the founders and decided on the following goals:
Copy on the website should be focused on the benefits and their should be no technical jargon.
The design should support the copy with relevant graphics and animations
The overall look and feel should be vibrant and welcoming.
Step 1 : Research
I started with the information they provided and went into deep research on their competitors and inspiration websites. After 3 days , I was able to create the moodboard, sitemap and write some heading variations for the homepage.
Step 2 : Copy + Wireframe
After doing intensive research I was ready to write the copy and draft up the first wireframe. You can see the initial copy and wireframe below:
Copy + Wireframe
There were little to no changes asked on the copy and we ended up using this wireframe as the base.
Step 3 : Design
After finalising the wireframe , it was time to move to the design phase. I went on an revisited the moodboard and inspiration websites to refresh my memory and jumped on to the Figma canvas. I was also going through their product UI to get an idea of how things look currently so I can use that as a base to create stylized graphics to represent some sections of the product on the landing page.
I went all in and created this design as the First Iteration:
I shared this design and they were not happy ... haha , but I understand because this was just the first iteration. So I had a discussion and wanted to understand their concerns about this design and they had this to say:
This looks like a wireframe...
Then I really understood what they meant by the vibrant and welcoming look they were aiming for. I'm a minimalist designer and this was already too much color for me but anyways I took their feedback and after spending a lot of time shared the second version:
They certainly liked the direction and had very minimal feedback, so I went ahead and adapted the design in accordance with the feedback I got and here's the final version we ended up doing:
Final Design:
Step 4: Development
After finalising the design we had a Framer vs Webflow discussion and ended up using Webflow for this project.
Here's the preview link : Smartpeak
Thanks for reading till the very end, if you enjoyed it please don't forget to leave a like
The goal was to present a complex AI-powered suite for E-commerce tool in a way that it's easy to understand. The project involved custom, copy, design & dev.