MOER Creations
Shopify Storefront
Designed and built a scalable Shopify storefront optimized for conversion, performance, and brand consistency across devices.
Web Design
UI/UX
CSS/HTML
SEO
Javascript
Project Overview
MOER needed a production-ready ecommerce storefront that could support product launches, flexible content updates, and long-term growth. The site needed to maintain consistency across guidelines including typography, hierarchy, color palette, marketing copy, design assets, etc while meeting deadlines.
⚡
Challenges
•
Design was initially created in Figma and needed to be moved to Shopify.com
•
Shopify is a fairly standard and simple web building platform. It lacked usability to be able to manipulate
design and elements for complexity.
💡
Solutions
•
I retained material from Figma and experimented with plugins such as Instant to integrate from Figma to Shopify.
•
Using custom CSS & AI generated blocks I was able to
achieve desirable results throughout production.
•
Ultimately custom coding shopify's liquid into the site yielded the best results to create animation & functionality.
I created the initial design using Figma.
I gathered brand guidelines including typography, hierarchy, color palatte, design assets, marketing copy, etc.
to create a style guide with reusable assets to plug into
place in the site.
I started wireframing out the home page, I added information sections, a scrolling footer, and contact information at the bottom.
Next was gettting it on Shopify
I began with a basic shopify storefront template and began to recreate the site I made from Figma.
I created each page as before and used some AI generated blocks/sections to create desired items for the site such as a functional FAQ page and Animated Our Story Page.
HTML & JavaScript: Custom Animation
I used a plug in to implement my artwork into a no code template that would integrate straight into shopify for my hero section
Outcome
•
Throughout many iterations and trial and error I was able to achieve a functioning & straightforward e-commerce website with modern usability and aesthetic that match the shareholders vision and constraints.
•
Each page and section was hand crafted using different design tools, AI coding, CSS, etc. to meet shareholder requirements, brand identity, and usability across desktop and mobile.
Get In Touch
Have a project in mind or want to collaborate? Feel free to reach out! I'm always open to discussing new projects and creative ideas.
MOER Creations
Shopify Storefront
Designed and built a scalable Shopify storefront optimized for conversion, performance, and brand consistency across devices.
Web Design
UI/UX
CSS/HTML
SEO
Javascript
Project Overview
MOER needed a production-ready ecommerce storefront that could support product launches, flexible content updates, and long-term growth. The site needed to maintain consistency across guidelines including typography, hierarchy, color palette, marketing copy, design assets, etc while meeting deadlines.
⚡
Challenges
•
Design was initially created in Figma and needed to be moved to Shopify.com
•
Shopify is a fairly standard and simple web building platform. It lacked usability to be able to manipulate
design and elements for complexity.
💡
Solutions
•
I retained material from Figma and experimented with plugins such as Instant to integrate from Figma to Shopify
•
Using custom CSS & AI generated blocks I was able to
achieve desirable results throughout production.
•
Ultimately custom coding shopify's liquid into the site yielded the best results to create animation & functionality.
I created the initial design using Figma.
I gathered brand guidelines including typography, hierarchy, color palatte, design assets, marketing copy, etc.
to create a style guide with reusable assets to plug into
place in the site.
I started wireframing out the home page, I added information sections, a scrolling footer, and contact information at the bottom.
Next was gettting it on Shopify
I began with a basic shopify storefront template and began to recreate the site I made from Figma.
I created each page as before and used some AI generated blocks/sections to create desired items for the site such as a functional FAQ page and Animated Our Story Page.
HTML & JavaScript: Custom Animation
I used a plug in to implement my artwork into a no code template that would integrate straight into shopify for my hero section
Outcome
•
Throughout many iterations and trial and error I was able to achieve a functioning & straightforward e-commerce website with modern usability and aesthetic that match the shareholders vision and constraints.
•
Each page and section was hand crafted using different design tools, AI coding, CSS, etc. to meet shareholder requirements, brand identity, and usability across desktop and mobile.
Featured Work
Selected projects showcasing my design expertise
Project
Shopify Storefront
A beautiful storefront built with beauty pattern approach
Web
CSS/HTML
E-commerce
Project
Tradeshow Booth Design
Complete brand identity package for trade shows
Branding
Print Design
Event Design
Project
Graphic Design
Various graphic design projects for multiple clients
Branding
Logo Design
Graphics
Get In Touch
Have a project in mind or want to collaborate? Feel free to reach out! I'm always open to discussing new projects and creative ideas.
oconnellrobertj@gmail.com
Phone
714-357-5701
Location
Mission Viejo, CA
Let's Work Together!
I'm available for freelance projects
and full-time opportunities.