Mother Erth

UI/UX Design Internship


Goal: Work with web development team to optimize website conversions and create effective digital ad campaigns

Date: April 2018 - June 2018

Duration: 3 months

Skills: UI/UX Design, A/B Testing, Development, Graphic Design, Digital Marketing

Tools: Adobe XD, Adobe Photoshop, GemPages, Shopify, Facebook Ads Manager, MailChimp, AdWords

Role: UI/UX Design Intern


Overview

Mother Erth is an eco-conscious fashion company based in Toronto, Ontario. Mother Erth sells handmade weaves bags made by talented artisans mother in the Philippines. The company's vision and mission are to empower artisans mother and to reduce plastic pollution.

Some of my work during the internship includes:

  1. Worked with the web development team to optimize website conversions.

  2. Created landing pages to increase the subscription rate and to promote current promotions.

  3. Created and conducted A/B test on digital ad campaigns on Google and Facebook.

  4. Created Remarketing Ads.

Projects


A/B Testing Facebook Ad Campaigns
×

One of my first assignments when I first joined Mother Erth was conducting an A/B test on Facebook Ads. Since Mother's Day was near with the first day of my internship, I was assigned to create two versions of ads to promote the "Mother's Day" discount program. The first thing I did was researching for the best way to present three selling points of the company. After thorough research, I have found that lots of e-commerce companies use emoji as bullet points to show their top 3 selling points on Facebook Ads.

The next step is choosing the best headlines, ad copies, and CTAs which I have received from the content team. After a lengthy discussion with my manager, we have decided on the top 2 headlines, ad copies, and CTAs that we're going to use for the ad:

Ads content
×

I used the same photos for both ads to be able to test which headlines and ad copies is more effective than the other. Below are the two ads being tested along with the A/B Test results.

A/B test results
×


Website Re-design
Design process
×

The first step that I did in re-designing the Mother Erth website is identifying the pain points of the current design. Some of the pain points that I have identified are:

    Pain points 1 & 2
    ×
  1. The menu bar was transparent with a thin black font. This causes a problem when the background photo is dark or has black elements in it. The menu will blend with the background and users won't be able to read it.

  2. The position of the menu bar was too far from the top which seems a bit off.

  3. Pain point 3
    ×
  4. The "Ambassador Rewards" button doesn't stick to the corner and as users scroll the button covers some of the content.

  5. Pain points 4 & 5
    ×
  6. The separation between the 'About Us' and 'Better Choices' section isn't clear enough. It also blends with the 'Most Loved' and 'Why Mother Earth is A Must Have?' because of the use of white background for all four sections despite the use of the small lines in between. One of the principles of web readability is the use of separators. Using a good separator such as different background color for a particular section will make that section stands out than the rest of the page.

  7. The "About Us" section on the homepage isn't necessary since it's just the repetition of the "About Us" page content.

After listing all of the pain points on the current design, I did some research on other e-commerce websites and made notes on how they presented their products, what important elements/sections do they put on the homepage, etc. Once I have taken all the notes necessary to guide the design process I'll be doing, here are the solutions that I came up with:

  1. Made the menu bar to have a solid white background to avoid the problem of being unable to see the menu caused by the clashing of font color with the background image.

  2. Move the menu bar up so there won't too much space between the top of the page and the menu bar.

  3. For the "Ambassador Rewards" button, I like the idea that the button stick the bottom of the page and we could keep that functionality. But we need to change the position (to stick to the bottom corner, not floating) and the shape of the button to make it looks cleaner.

  4. Use a different background color or add more space for each separate section.

  5. Get rid of the "About Us" section and replace it with "New Arrivals" section. From the research I have done, "New arrivals" is a section that all e-commerce websites have.

After I have figured out the solutions for the current design problems and list some of the new elements that are worth to be considered, I begin designing the new website homepage. First, I made the wireframe using Adobe XD to get the big picture of the elements positions on the homepage. Then, I start implementing my design through GemPages, a plugin on Shopify that the company uses. Below is the final design of the website homepage:

Final Design
×


Designing Remarketing Ads

My last assignment before ending this internship is to design a couple versions of remarketing ads. I used Adobe Photoshop to create all of these ads and published it through Google AdWords:

Ads Final Designs
×

Takeaways

It's an honor to be able to work with my manager, Daniel Scott. He has continuously guided and challenged me to do something out of my comfort zone. Exposing me to the world of digital marketing that's different from my usual design tasks. Since I was doing this internship during the spring quarter, it has been challenging for me to manage my work and four other classes. However, it's certainly helped me to become better in time management. Overall, it's been a fantastic opportunity to be able to gain this experience and to learn new tools that will help me to excel as a designer in the future.