Project Type
Webpages
Role
Product Designer
(3 Months)
Services Provided
UI Design
Web Design
Copywriting
Graphic Design
Project Management
Tools Used
-
Developed creative strategies for Modos’ Kickstarter campaign, highlighting their innovative use of ocean plastic for eco-conscious products.
-
Established digital presence of the campaign by designing the UI of the landing page on Figma for the storefront.
-
Utilized HTML/CSS to implement Figma Designs for display on Modos’ Shopify store
-
Successfully relaunched Modo's B2B Services by developing and publishing a business inquiries contact page.
-
Finished development on a DIY project page for curious customers seeking inspiration for their next furniture set.
The Client
Modos Furniture is a burgeoning furniture supplier based in Brooklyn, NY. The company specializes in the production & design of unique, modular furniture sets utilizing Eco-sustainable parts. Their primary mission is to provide a tool free, user-friendly, and fun alternative to the furniture experience.
Within my time as a Product Designer, I completed multiple assignments intended to further the brand's presence in the furniture design marketplace. The most important of these engagements involved the management and updating of their online storefront.
Kickstarter Landing Page
Overview
Modos developed a new connector for their furniture sets made of 80% ocean-bound plastic. A Kickstarter campaign for these parts was scheduled to launch the following year. Before then, the client requested a promotional landing page to be placed on the store website, to notify customers and drive conversions to ensure the future campaign's success.
We began by outlining details about the connectors, highlighting its salience & resonance to it’s intended audience. My partner handled most research efforts on previous campaigns that have been successfully funded.
After this sprint, we each performed various tasks dedicated to promoting the campaign on the website. The first of which was my partner implementing a popup for first-time customers directing them to sign up for campaign updates.
Before
After
For the landing page itself, I took to Figma to design a high fidelity mockup with 3 potential options for theming. After getting approval from stakeholders, I took the draft and began construction of the page on Shopify.
Figma Wireframe
Challenges
1.Migrating designs from Figma to Shopify
The only means of creating new pages for a Shopify site is through preset templates, so we needed to figure out how to bring new custom designs to a platform that doesn't accept them by default.
Solution
We discovered that Modos previously used Pagefly, a Shopify plugin that allows for developing webpages via CSS styling, for some of its other pages on the site. Think a smaller, more compact version of Webflow. Using this was paramount for us to save time and ensure responsiveness for desktop, mobile, & tablet.
2. Getting pages to display on the site
We encountered issues with publishing new pages due to Pagefly only offering a limited number of custom pages for a trial version.
Solution
Rather than requesting the client pay to upgrade their software tier, I audited the site's architecture and strategically reorganized active pages.
This forced Shopify to recognize and publish the new campaign page without incurring extra software costs for the founder.
The Result
Alongside the new page, we made other improvements to the browsing experience, like de cluttering the header, and adding this page to it for easier accessibility.
B2B Contact & Diy Pages
Overview
The other larger project within this role was to conceptualize and design new pages for the Shopify store website. These pages were made to promote Modos' business-to-business offerings, and showcase custom DIY projects made from owners of Modos Furniture.
This project required larger use of our Software Engineering skillsets, and gave us a crash course on back-end management of Shopify website via working with templates.
Challenges
1. Fast turnaround Time
This project was in fact our final assignment given to us on our last few days with Modos. For context, designing and publishing the KickStarter Campaign page on desktop and mobile was a month-long effort. How did we end up doing that for multiple pages in a span of two days?
Solution
We wisely decided to split the responsibilities evenly, my partner tasked herself with completing the DIY page, and I handled the B2B Contact page.
2. No Pagefly This Time
We'd no longer be able to use Pagefly to construct the page as we did for the Kickstarter Landing page. The only path forward was to rely on Shopify’s default page builder.
The page builder allowed for for the construction of “templates”, which are essentially pages with customized formatting and elements. These templates however, were built and designed with Liquid, Shopify’s CSS framework that prior to starting this task, we had no knowledge of.
Solution
Modifying the preexisting templates required extreme care, as an incorrect edit would make a page on the website unresponsive at worst.
After a day of experimentation, I figured out how not only how to modify existing elements within the template I used, but also able to create new elements within them.
And on the last day, the B2B Contact & DIY pages were complete & published.
One of the items the client requested for the B2B page was this premade Google Form for prospective clients. This is not something Shopify supports on it's own, but thanks to trial and error, I found a way to embed it onto the template, fufilling the most important client ask.
After I published the B2B page, I managed to assist my partner with implementing more custom elements for the DIY page, such as this carousel showcasing custom builds from previous customers.
As exciting as it was to figure things out with templates, I regret there wasn't more time to work with Liquid CSS in order to improve the structure of the pages themselves.
Regardless, testing the ins and outs of how Liquid works and adding unique features to the pages themselves was my favorite part of the experience.
Last Project
←BORING ATLAS
