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 the preview site

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 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, 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 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.

Cost avoidance

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.

UI Components

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.