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
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.
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.
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.
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 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 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.
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.
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.
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.
The different posts was another unique situation, but I think that is because certain posts have their own feature and function so I had to design each individual one but also keep the design consistent throughout the site and app.
You can see the difference in the designs from before (left) and after (right) with the new design system.
These posts are one of the core factors in Shop My Porch. These posts are what makes this website so special and unique from other e-commerce websites.
If you need something made custom or unique, a user can post a Hunting For Post and wait for other users to reply with offers or ideas to help the buyer find what they are looking for.
On My Porch Posts were specifically for Makers and only for Makers. Buyers can have “On My Porch” posts when they open up their shop.
There are a few things I want to point out that makes On My Porch unique to Makers and Buyers alike!
From My Heart posts are for Buyers and Makers who want to thank people for their item or craftsmanship.
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.
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.
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.
The Maker’s Form was so it was easier for users to go through and fill it out and the payment was at the end so the Maker’s SEO Page was automatically made and viewed across the web.
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.
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.
I went through Dribbble and popular sites such as Etsy, Ebay and Twitter. I was curious how others handled the information.
We finalized the lofi profiles (top) until making the Maker’s SEO Page which we felt the profile lacked personal intel about the Maker where new users can get to know the artist behind the product they are buying. Which in this case, I went back to the drawing board and made it more personal for users and makers alike which is shown below.
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.
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.
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.
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.
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.
