Shop My Porch

E-Commerce
Design System + Product Design
March 2022 — November 2022
The Overview
Shop My Porch is a hyperlocal shopping platform for makers and small businesses to connect with buyers in their local communities for free.  It has over 25k+ users among the United States with a neat unique feature that no one in the other e-commerce site has.

“Hunting For” feature lets buyers ask for specific products or even ideas for products around themes. “Spam me with ideas for a mermaid themed birthday party for a 5 year old.” Shop My Porch has 150 Facebook City Groups that are National and International (Mexico, Canada, UK, Italy, Pakistan, India, Philippines, Chile, Australia, Morocco, China) and is continuously growing.
The Challenge
This project was crucial to address some of the concerns when it came to the users who use this platform. This small start up company wants to change how we shop and how it can affect our local communities. The goal is to help create a company website and app that stands out from the e-commerce industry and reflect artisans within their local communities.
My Purpose
I came on as a Product Designer Consultant in June 2022. I was instructed to make better user experiences and redesign the entire site along with the mobile app.

What I did

  • Research
    Personas
    interviews
    Market Research
    Latest Trends (E-commerce Industry)
    Wireframes/Lofis
    User Interface
    Landing Pages
    Design Systems while conducting for the best practices for website and app (IOS & Android). 

  • Social Media Assets (Instagram gifs, Stories, Reels Graphic Assets)
    Flyers
    Presentations
    E-mail templates
    Icons & Illustrations
    Marketing

Resources
N/A

Color System

There was a lot of colors that complimented the brand colors, but it didn’t feel like it co-exist with them. So brainstorming and nitpicking the colors and narrowing it down. We came up with a solution. This was their new digital branding on their platforms.

Components

When I first started the components, I research what was common in a figma file. This wasn’t my first design system I have created, but it is my first design system starting from scratch. 

Buttons

This is a good example of primary, secondary, a link, a second link for buttons. These buttons play a key role in Shop My Porch because there are a lot of call to action screens that will direct users to different places in the app or website.

The reasoning of the link 1 and link 2, for those who are curious. It is based on the background color and situation of the screen. I believe there needs to reasoning behind several links and I was taught you should only have 1 primary button on the screen to help users being directed correctly.

In Shop My Porch, dark blue indicates first importance or a call to action. Secondary button with a lighter brown is second and is a button to direct the user to another screen or page. 

Button Examples

Here is an example of the primary button to show the user which maker is near them (left). Here is an example of a link button within a navigation. This indicates a user hovering over a link and it will direct her to the page (right).

Cards

Cards in this design system was a huge part in making the website and app. There are several cards that were used for specific things within the system. Events, Posts, Upcoming Events, Mobile Cards, Favorites, and Inspiration Board.

Forms

Forms were also used throughout Shop My Porch and became a way for users to fill out and respond to other users such as Makers and Buyers. They are also used to help market and SEO the website for Makers and their content. In a Designer perspective, forms are also an easier way for users to stay on task.

Symbols

Shop My Porch has very specific symbols and icons used throughout the site that is unique to their brand and user interface. Here I will talk about the uniqueness of the symbols/icons and their meanings. 

Researching the Product

During my first couple of months, I wanted to understand their users and the problems they have faced. In each feature that was presented to me for Shop My Porch; I did my research, wire-framed, then produced a high quality mockup. 

SEO Landing Page

So I have mostly been on top of website trends, but a lot does get through my fingers and I admit I knew nothing about SEO Landing Pages.

So what is a SEO Landing Page?
It is a Landing Page that are optimized for search engines with features that make it particular appealing to the algorithms that decide whether or not a page is valuable to searchers.

I knew about SEO and I knew about Landing Pages, but I never imaged that they can coexist with each other. I was tasked with a making a design for a SEO Landing Page.

Mind you, I was taught that Landing Pages always need 1 call to action to direct the user to that only, but I realized SEO Landing Pages were more about the content inside the page than the “call to action” for the user. It is really about the search engine and how a user will look up a particular thing.

Porch Pay

Shop My Porch has an amazing feature where makers and buyers can go through and only get 10% transaction fee. With that, Shop My Porch takes that amount and does all the state taxes and shipping costs and the rest goes to the website maintenance. 

I realized what was missing with Porch Pay was a shopping cart and its features. So before going through the designs, I needed a bit of background and research information. 

Porch Pay Findings

These are the findings I found about Shopping Features:

- Know our buyers and find the wishes of target audience.
- Design has to be consistent so that users can see consistency for all screens which means all social networks and print materials. This way it is familiar with the users when they see the brand.
- Refresh the experience start with small changes and work your way up to bigger changes. This is so users can start getting use to the workflow and then will gradually fall into place.
- Check your solutions Always apply on user testing and making improvements based on real user interactions. 

Maker's SEO Page

Unique to Shop My Porch, they have given Maker’s and artists a place to promote their products with a SEO landing page with a small fee. This gives makers a better way to sell their products for profit by filling out a form and having it generate a Maker’s SEO Page. 

Newsletter

When it came to the Newsletter or Blog of a website there were several layouts that I went through until we finalized one the team agreed on.

Profile

So the profile of Shop My Porch went through several face lifts. I did a bunch of studies of what other popular websites have been doing to their profiles and how they handle so much information. 

Filter Feature

People think that a small feature like the filter does not make an impact on a website. Research has shown that filters are very data driven and can improve user experience. UX Planet has commented that, “Filters are a great chance to present a variety of products, improve the UX, reach a wider audience and increase sales.” 

Also, when building filters, you need to be very aware of your data structure.  What’s made of a character string versus a boolean? is it associated with a timeframe or date? Numerical values versus text strings, quantitative, or qualitative values, etc. These different types of data require different types of selection inputs which in turn can make or break a design and user experience based on the data given.

Local Neighbors

Another neat feature that Shop My Porch provides is Local Neighbors which allows users to search who is near them that sells or offers services/products. 

Final Notes
With each feature and research, that comes to the end of the Shop My Porch case study. I will add more if things change within the site, but these are most of the features I showed within this case study.Thank you for taking the time to read everything and go through my process and thought process when it came to designing for this website. Next will be images of other graphics and services I did for this business. Feel free to skip it since it isn’t exactly part of the case study, but rather a showcase of the work I did. Enjoy and thank you.

Achievement Badges

I was assigned to create achievement badges for the website so users have a chance to engage and set goals for themselves to reach the achievements. A lot of them are hidden, but this is so they feel compelled to finish. These are all drawn by me using illustrator/affinity designer. 

Instagram Stories

I was assigned to make Instagram stories for makers and buyers to post when they need to promote something. These are free to use and it is to show how much Shop My Porch can provide for Makers and Buyers who are willing to shop locally.  

Email Templates

I created e-mail templates for them to use when users get a new message, post, offer on an hunting for posts, etc. These were designed in Figma but ideally can be shown in any e-mail host.