Project Overview
In December 2023, the business owner of Sweet Science Nutrition contacted me about a potential redesign of their website, which hadn't been updated in over 10 years. The owner had also recently launched a new service, which added several new pages to the website.
The Problem
Since the site hadn't been redesigned in years, it wasn't fully optimized for different device sizes. The new site needed to be fully responsive and easy for users to navigate on mobile screens. The website was also in need of a more modern, up-to-date design to appeal to clients in 2024, and to make site navigation seamless and accessible.
Style Guide
In order to maintain visual consistency throughout the website, I created a minimal design system that included the color scheme, typography, main components and logo. Since it was a small site with a limited number of pages and components, the style guide was kept as simple but consistent as possible. The client did not use a design system previously, so I had creative freedom when building one. I based the color scheme off of the existing logo I was given to create a solid brand identity that the user could become familiar with when interacting with the site. The typography of the original website was mismatched - they'd been using fonts that didn't feel cohesive, so I kept the same body font (Lora) and chose Raleway for the headers. This felt like a better match.
Sketches
Before designing digital wireframes, I brainstormed various versions of the website on paper. I added notes to my sketches with new ideas, reminders, key details, and solutions that seemed fitting.
Landing Wireframe & Mockup
In order to maintain visual consistency throughout the website, I created a minimal design system that included the color scheme, typography, main components and logo. Since it was a small site with a limited number of pages and components, the style guide was kept as simple but consistent as possible.
Figma to Webflow
After creating a high-fidelity mockup of the homepage in Figma, I attempted to use the 'Figma to Webflow' plugin to seamlessly transition the design to a new Webflow site. While the design exported just fine, it didn't look optimal in Webflow at all. I worked to troubleshoot this issue for a bit before realizing it would probably be easier to build the site directly on Webflow, and recreate the Figma design as closely as possible with a different design tool. At first, this was daunting, and I was worried I was wasting more time this way. Thankfully, I was wrong! Recreating the design directly on Webflow helped the design remain responsive, and even made it easier to improve the site, since I was able to find the things that may have worked in Figma but wouldn't work in Webflow.
Setting Up Stripe
After building the order form and products pages, I was hesitant about the order process and had concerns about the service confusing potential customers. I had a quick chat with the owner about these concerns, asking if they were familiar with the third-party service Stripe. It turned out that they knew about Stripe and had even made an account in 2022, thinking about using a third-party payment system to launch a potential delivery service. They explained that they changed their mind after trying to set up their payment processes with Stripe, not knowing how to successfully integrate the service through another party. Hearing about this, I asked them which of the two order processes would be ideal for their business: organizing delivery details directly with their customers, or having those details handled for them through a service like Stripe. Their definitive answer was that if they were able to set up the process the right way, Stripe would be their clear winner. With some previous experience using Stripe as a seller and a customer, I offered to set this up for them and run several tests to ensure that their customers would be able to order specific microgreens without issue. The owner agreed, and also wanted to be certain that when an order was placed, they'd receive the details they needed to have that order fulfilled. Thankfully, we were able to set the services up with Stripe using the owner's existing account and connect links to the payment process on the 'Products' page. This way, instead of a confusing order process, customers could browse through the available microgreens and easily place an order. Both parties could have full transparency and walk away from the interaction with a positive experience. Ultimately, this meant removing the order form page as it was no longer needed. I didn't mind this whatsoever - the solution we'd come up with was the best thing for the business and their customers, which was what we wanted to achieve.
Webflow → Static → Bluehost 🎉
In summary, this project highlighted the ever-changing nature of web development, demanding keen problem-solving. Converting the format was no walk in the park; it involved careful attention to detail and several unexpected challenges. Despite these challenges, this project helped develop my strategic problem-solving skills and, in a good way, forced me to become more familiar with the development process as a designer. This helped boost my technical skills and emphasized the importance of adaptability as a freelancer. I'm grateful for the challenges I faced, because the next time I approach a similar project, my learning curve will be much shorter, and I'll work more efficiently.