Studio Madreselva
UI UX Designer
The project began as a follow-up to a prior one; a website, designed & developed by me for the studio. The team provided mock-ups for developing a new site, striving to create a new aesthetic, add features, and address changes to the business.
Goal: Create a new storefront that would accommodate features such as product forms, in-store pick-up, and local delivery.
Problem: Finding solutions for sales needs while limiting the increase of monthly costs.
Solution: Use multiple platforms to develop the result, benefiting from their different strengths.
Explore options
Every platform has its strengths & weaknesses but finding one with all the right capabilities was the studio's principal concern.
With that in mind, we explored several options including Foxy.io for Webflow, custom code integrations, and e-commerce platforms like Shopify.
Narrowing it down
With some time & effort, the studio managed to narrow the options two, Foxy.io+Webflow or Shopify.
Mostly, the decision had to do with forms, like product messages. On its own, Webflow has limited capabilities to edit its e-commerce features directly, requiring a third party like Foxy.io to have more editable product pages. Which means added costs.
Shopify on the other hand has some of the best e-commerce features but is limiting unless you know their development language (Liquid).
The winner
In the end, the team decided to take a mixed approach thanks to a service called Udesly, a converter company.
With this we could take a custom-designed site from Webflow, tag its components, and then convert the site into a Shopify Theme, changing the HTML, CSS, and Javascript into Liquid code where applicable. Giving us the best of both services.
What's practical vs what's possible
While each of the platforms has its distinct capabilities, it can be difficult to fully communicate all of what is & isn't included to clients and stakeholders. This often led to requests (features mostly) that violated one of our primary priorities, avoiding added costs.
Throughout the development of the project, we identified what features would require third-party services and what could either be eliminated or solved through clever design.
What's important
The team began its work from designs created by the studio's graphic designer. These designs had a style but lacked the consistency of ready-made wireframes and mockups. As such, a consistent style guide was not developed until we were well into the project.
With the team's help, I reoriented the design, eliminating redundant elements, redesigning pages to meet the constraints of the platforms we chose.
What comes next
Once all the website's pieces were accounted for, we created a timeline. This acted as a guide, helping us organize our efforts, compartmentalizing the steps to help us reach a minimum viable product.
With a working site in place, we could begin to work out site content while finishing up a final template to help speed the development and prevent the team from being bottlenecked.
Iterate, iterate and iterate again
With the teams gathered details, we set about addressing pieces of the site in need of standardization. Undergoing around 18 rounds of iteration on various elements of the website, working to establish a cohesive vision across the page designs.
This included components, spacing, user-interactions, content strategy, and the information architecture (IA) of the site. Focusing on meeting the business's needs while steering them away from decisions that impede usability.
Standards and measurements
Next, we developed rules for building the components of the pages. This included creating standards for the site's images (Aspect Ratios: 1:1, 4:3, 3:4, 16:9, 21:9), spacing, typography sizing, hover effects, focused interactions, line weights, etc.
With these, a style guide was assembled on the development website to make global adjustments across the components.
Every piece in place
To convert the site from Webflow to Shopify through Udesley, the design had to ensure it had a few key pages to meet Shopify's minimum qualifications of functionality. This included the following pages: Index (Homepage), Cart, Blog, Default (a templated page for reuse), Collection, and Product.
Beyond this, there were additional pages required like blog templates and other such. Overall I created 16 pages including some dynamic pages which were developed in 4 different breakpoints.
Making the decision
Why Shopify
So why Shopify over all the other possible e-commerce platforms? Easy, it offers the most robust all-in-one integrated e-commerce platform for a small business like Studio Madreselva. The ability to manage, run and modify an online store is unparalleled versus much of the competition. The only issue is your restricted to using themes - a prebuilt site package, developed with Liquid (Shopify's coding language).
Why not Webflow
Webflow is an amazing tool for building HTML, CSS, and Javascript visually, allowing for a lot of freedom in design. However, its e-commerce tools are still fairly new & limited without integrating secondary services which adds more developer maintenance and development cost.
Why Convert
We explored the possibility of acquiring a pre-built theme to use, adjusting it to fit our needs. However, we eventually settled on creating our own when we discovered Udesly. It allowed us the most freedom to achieve their vision as closely as possible. Utilizing Webflow's freeform building while operating it with Shopify's robust tools. Tagging the completed content to enable the conversion into our very own theme.
How its made
In Webflow, the site is constructed visually using HTML, CSS, and Javascript. Using classes, components, and standardized elements I've created to build out the pages. Making adjustments to fit the design to its breakpoint.
Making a change
With the site built, all the pieces tagged, and the required pages in place I'm able to output the code from Webflow, uploading it to Udesley, returning a converted theme that may be plugged into Shopify.
Bring it together
The theme, being finished, meant we could begin to see the shape of the final product. Each iteration on the template bringing the site step-by-step closer to completion. From this point all that remained was testing, installing integrations, and adding final copy/ images.