Designing a successful eComm site

Everybody loves dogs.

Your parents, in-laws, your friends cousin uncle. There’s no denying it. And… what’s more adorable than dogs themselves? Dogs with fashion apparel!

Introducing our client- “Gnaw”

Gnaw is a LA Based B2C eCommerce startup that will offer unique dog apparel.

The primary goal of this website is to give customers a CLEAR understanding of what Gnaw is all about while making it super EASY for the customer to purchase the products they desire.

All of this must be accomplished while keeping Gnaws business values at play: fun, trendy and exclusive.

The site also needs to distinguish itself from other competitors by hyper focusing on their unique branding and value proposition.

They’re launching soon and wanted a UX expert to help them get started on their website. Good move.

Let’s get started.

RESEARCH

User Personas

Who are we designing for? More importantly, who are we selling to?

In eComm, it’s vital that you know who your target audience is from the beginning.

Things we need to know: age, salary, online shopping likes/dislikes, and social circle influences.

After the research was performed, Gnaw and I generated these three user personas.

And some more customer data that I gathered from eComm resources to reinforce our existing findings.

User Research Executive Summary:
Gnaws target audience are millennial dog owners with a mid to high average income. They are heavily influenced by Instagram and usually make online shopping choices through recommendations from friends and Instagram influencers They buy online products that are thoroughly presented, described, and supported by customer reviews. They are also more inclined to purchase if it’s cheap or free shipping with a fast delivery time.

Competitive Research

“If you’re not first you’re last.” — Grant Cardone

I performed research on the competition in order to gain some inspiration for the site and analyze how Gnaw could differentiate itself from the rest… and beat them.

Key features I analyzed were their UI, UX, IA, User flow and value offerings.

The owner of Gnaw and I identified these three direct and two indirect competitors

I gained some important insights from this. Key ones being how competitors designed their site, structured their products and presented their features. It proved to be helpful info that’ll assist me in ensuring that Gnaw becomes a top competitor.

It’s very important in these heavy competition spaces to be distinct. We have to find a way to be memorable through our usp, design, branding, and customer experience. Because if we don’t, we’ll just be competing on the price of products and that tends to be a race to the bottom.

Information Architecture

Here’s a reality check for fellow designers.

We can have the MOST trendy web design with HIGHLY aesthetic images and the COOLEST animations but the true success of our design will be measured simply by the amount of complete purchases being performed. If customers aren’t buying, it means the design is BAD.

You’ll get fired. Stakeholders lose money. Customers miss out on an amazing product. Nobody wins.

Thankfully, good IA plays a major part in helping avoid this issue.

It’s essential that our IA provides a clear intuitive navigation and helps customers understand things in their journey like:

• What brand they’re dealing with.
• Where’s the menu. Where’s the search. Where are the filters.
• What page they’re on.
• Where’s the option to contact support.
• How can they can pay us.

With this in mind- let’s get clear and organized.

Sitemap

Our categorization has been established. Now let’s visualize how a customer would go through the process of completing their goal.

The purpose of this exercise is to put ourselves in the shoes of a customer and see the experience through their lens. This data set can help us optimize the site for business goals while ensuring the customer achieves their goal in a smooth and frustration-free manner.

Scenario:
Cristina is scrolling through Instagram and sees one of her favorite influencers showing off her dog rocking an awesome dog hoodie. “What a cute hoodie” she thinks to herself. The influencer shouts out Gnaw and promotes her discount code.

Winter’s coming… and remember… Cristina loves her dogs like her kids so she doesn’t want them to be cold on their daily walks and hey the hoodie looks cool. Cristina decides to go to the Gnaw website and buy 2 hoodies.

This is how it would look.

Solid journey. We were able to anticipate some possible pain points and resolve it even before we started designing :).

Proactive. Never reactive.

Every element on the site must be deliberate and play an important role because it can affect conversion significantly. In the eComm market today, buyers can’t be hindered by unnecessary steps. They demand an experience that is faster, more convenient and easier than going to an actual store. If we don’t provide it to them, they’ll go elsewhere.

Onwards.

DEVELOPMENT

Now that we have gathered enough data, it’s time to start building.

I’m starting off with a pen and paper sketch with the goal of getting a better picture of how the site will look overall.

After completing the sketches we tested the prototype with some potential customers to make sure that we were solving those customer pain points from earlier and get their feedback. (It’s important to start testing now so we can make most of the changes in the early stages instead of later on in the product cycle were it’ll cost more time and money)

I had them go through three different scenarios and I observed how they performed. The scenarios were:

1- Add three items to your bag and checkout. At the checkout screen remove one of the products and add two of the same ones without going back.

2- Locate a dog hoodie and then navigate to see all of the dog hoodies from the product page without using the top nav.

3- Locate a medium dog collar and checkout with the fewest clicks possible.

Testing Results

1- The customer was a the checkout screen and was able to locate where she could adjust the quantity but was unable to remove an item because there was no delete or X button (epic fail by me)

2- Customer located the dog hoodie through search feature but didn’t know how to view the hoodie category without using the top nav. This led me to implementing a small clickable category link right on top of the product title. (Didn’t want to use breadcrumbs yet since Gnaw is starting off with a smaller more exclusive inventory.)

3- Customer breezed through it with no problems. Success!

Presenting the main sketches. (I know it’s not pretty but that part’s coming later. Promise)

Wireframes

I enjoy the process of bringing things to life.

Here’s the wireframes showing how each feature is deliberate and how it’s addressing user problems.

Now let’s go through a breakdown of my design thinking… as well with colors.

Homepage

The main purpose of a homepage is to very clearly share who you are and what your brand offers.

My goal with this page is to keep it extremely simple and hook people right away. You can only make a first impression once.

I needed this page to engage customers and help them with their goals of purchasing through efficient navigation and streamlined CTA’s, that’s where the conversion happens.

Hero image

I designed this banner with the purpose of blatantly explaining what Gnaw offers — dog apparel. It’s my first chance of grabbing attention so the image has to be big and beautiful as well with a custom branded CTA button that effectively contrasts against the backdrop so the eyes of customers are naturally drawn to it.

A unique CTA button is key because it makes your branding distinct and it achieves one of the top rules for conversion — help the customer get to the product page asap.

New arrivals

Here I included the latest products to show customers that the page is alive as well with helpful suggestions on what to buy.

It’s also a good space to implement refreshes. It allows us to update the page with new inventory and introduce trends in dog apparel. Gives the feeling of aliveness- similar to swapping out mannequins in a brick and mortar shop.

More categorized images

“Show. Don’t tell.”

In today’s market it’s super imperative that we attract and engage the customers with beautiful images. Today, the main driving factor of online sales is high quality photography. Product quality, sizing and description takes a backseat. We simply buy what looks good. I’m no different, I regularly catch myself engaging in this behavior lol.

In the front of my mind, I was always reminding myself to include luxurious photography that showcase the product in use. If the customer can relate and mentally see themselves and their dog in the photos, the chances of them purchasing dramatically increases. Stories sell and we need to help the customer envision themselves as the main character using our product.

Link to brand story

I’m a millennial and most of my friends are as well. Also, Gnaw’s target customer is millennials.

What does this mean?

It means that we demand brand trust. We’re not affected by traditional advertising… Millennials are responsible for spending billions in annual online shopping. We must help fulfill their purchasing desires.

Here is a banner that gives a glimpse of the brand story and a brand cause. It links to the Brands story page when clicked.

If we can get our target audience to trust us, we’re 10 steps ahead of our competitors. It’s so important to build trust because it’ll help Gnaw secure long-term loyal customers with lots of spending power!

Social proof

Again, millennials rely heavily on social media, brand recommendations from influencers, and reviews from the public to help influence their purchasing decisions. So it’s a no brainer that an IG feed has to be included on our home page.

If your customers see you interacting with others on social media, it leaves a positive impression and shows that you’re a brand they can trust.

Instagram engagement is one of the main avenues of traffic for Gnaw and providing different avenues for customers to reach your page also helps with SEO and conversion efforts.

Email signup

Finally, I made this a highly visual element on the page because it’ll be super helpful to the customers of Gnaw if they sign up!

It’ll help inform customers of sales, specials and new products.

Also, email is proven to be one of the top driving forces for converting sales in the current market. It’s super vital for Gnaw to build their list and convey important info to their community.

Next page.

Product page

Your product page is the most important page on your site.

It can make or break the whole thing. It’s where customers make the decision if they’re going to purchase.

It must be fully optimized.

Product feature image

The #1 most important thing in a product page is the feature image. It sets the expectations from the start. You would trust a store that properly photographs their photos and vice versa.

The way to becoming AMAZING at online sales is by effective presentation. Remember, one of the biggest pain points consumers have online is the inability to touch or interact with the product before purchase. Let’s help them with this.

When you take high quality product shots, you provide a descriptive presentation and make consumers desire the product more.

If you’re aware of the 80/20 rule; the featured image is definitely part of that 20%.

Product gallery

This helps with the above pain point of not being able to interact with the product before purchase.

Ideally, you want to show your product from all angles and include scenario product shots that help communicate a story. It’s important that the customer knows exactly what they’re buying to increase conversion and reduce returns.

Product video

Do you want your site to be listed on the first page of Google?

Yes you say? Cool. Well it needs to include product videos :)

Videos will help your site rank high because:

• Google perceives video clicks as a sign of higher engagement to algorithms
• It indicates that you have an established online presence
• Google owns Youtube so they reward online stores that use it.

Besides driving more sales through SEO, videos give your audience a live demo of the product which additionally helps with the mentioned pain point.

Product overview

The first way to effectively present a product is through images. Second is text.

A detailed product description is a must in terms of informing the customer and helping them with the decision of buying. It’s also an opportunity to express your brand’s voice and establish brand trust.

More importantly, here’s an area where you can help relieve potential customer anxiety.

If we go back to the user journey from earlier; 3 potential questions that were interrupting Cristina from purchasing were:

- ”Does this fit my dog?”

- ”How long does shipping take?”

- ”What if I don’t like it?”

This has been solved directly by placing the answers right there in a critical time of the customers shopping journey.

Product CTA

Designed to be one of the most dominant elements on the page.

Shoppers need to know what the next step is in buying the product and a really big and branded CTA button is a great way to steer them in the right direction.

Included icons under the button that help reinforce trust with the customer and relieve anxiety.

Product up-sell

“Would you like fries with that?”

Here’s where we help deliver more value to customers by offering products that will compliment their purchase.

It’s best to choose these selections based on data from previous transactions on the site. (What products customers usually pair together)

Product reviews

Research shows that any customer is 60% more inclined to purchase if there are reviews. And with millennials, that number shoots up to 90%.

Reviews build trust and trust increases conversions.

In today’s market- social proof is a must.

Checkout

Checkout flow

“Build it and they will come”

…Not exactly the case in eComm :)

Lots of sites have high traffic rates but perform poorly on sales due to a bad checkout flow.

Here’s how I designed Gnaw’s and did my best to make sure it was seamless
and intuitive.

Multiple payment options

It’s 2019 and many customers have formed loyalties to different payment options such as Paypal or Visa checkout.

Gnaw is starting off as a small shop. So with the fact that it even offers Amazon Pay, Google Pay, and Paypal, it 10x’s its brand credibility since these are trusted providers.

Recent stats also shows that eComm sites have increased conversions by 7% by simply including Amazon pay.

No header

The customer doesn’t need any distractions in this process.

Removing the top nav allows the customer to focus on checking out while still having the option to go back if necessary.

Capture email

In business, there’s lots of things that you can’t control… such as cart abandonment.

It’s essential to make sure this is the first form field you capture so you can use Google autofill and give them a great experience or capture the only data you need in order to start your cart abandonment campaign.

Successful cart abandonment campaigns usually help around 20% of customers follow through with their purchase. That can equate to thousands of dollars in revenue depending on the size of your business.

Continue as guest

I’ll have a full bag online and be ready to checkout. But if i’m asked to create an account, i’m abandoning that purchase 80% of the time.

24% of transactions were abandoned in 2018 which proves that others feel the same way. We can avoid this dilemma by simply adding the option of continuing as guest.

Promo code

A lot of customers will be directed to Gnaw’s site by Influencers with affiliate links. I made it pretty obvious where to input the code so the customers have no confusion.

Total summary

What’s worse than high shipping fees?… Hidden fees.

It’s important that all the pricing is laid out in the summary so the customer knows exactly how much they’re paying.

This helps add brand trust and trust equates to customer loyalty :)

Checkout page closing thoughts

The key to a good UX flow during checkout is to keep things as simple as possible.

Help the customer summarize what they have in their cart and give them the option to edit it from there. Remove all unnecessary form fields and implement modern payment methods.

My goal is to make it easy for the customer to receive Gnaw’s product.

Prototype

Here’s a prototype of a smooth user flow in action.

NEXT STEPS

Going forward, I will keep updating the site while helping measure data and observe where the strong points of the site are along with the weak points.

It’s my duty to make sure Gnaw receives the latest and greatest design while being optimized for conversion.

Gnaw’s site is launching soon. In the meantime, you can follow them on Instagram at @Gnawdogs if interested.

Thanks for your time. If you have any questions, feedback or interested in collaborating- you can reach me at lazviera@gmail.com.

Cheers
~Laz

Tools: Sketch, Figma, Adobe PS, Invision