ecommerce website design case study

Got a project you want to discuss?

Your journey is about to start here.

No Details Needed Get a free quote for you app

Want to make sure your idea sticks? Use this tool to measure your success

Quick and Easy Estimate

What platform(s) do you like, will payments be made through the app, will location based services be required, what stage is your idea at, alright ... let's chat.

No Details Needed Get a free quote for you app a

Plot your growth

How passionate are you about your idea, how important is the idea to you, how many similar apps are out there, how much time are you willing to invest.

1.855.864.9322

eCommerce Enterprise Website - Memobed

Where technology meets ecommerce.

Get Started

• description Case Studies
• view_stream Portfolio
• camera Video Portfolio
• local_offer Products
• build Services
• widgets Technologies
• mail Contact

Project Overview

It is inevitable to go out of business if you are not keeping up with technology. the mattress industry in retail space is one that is greatly being impacted by its shock traditional stores like mattress firm are claiming bankruptcy and closing shops left and right. as a result more retailers and marketplaces are increasingly looking for modern web and mobile technology to promote their services, attract more clients and increase sales and profit. uniwebb recently developed an enterprise level ecommerce web application for memobed, a branded online mattress retailer in northern california. they came to us with an idea of selling branded copper mattresses online and ship them in the box and wanted a fully streamlined business process in place to support their high-tech marketing system. part of their marketing platform, they wanted us to create a similar portal as in amazon smile., what does memobed website do, product page, order process, mattress construction design, shipping tracking, search & select charity, register organization, ecommerce marketing tools, ecommerce affiliate banner, mobile screen, mobile product page, mobile menu, prototyping, once we agreed on the details with sheila at memobed, our ui/ux designing team started to work on wirframes. so, we began by studying similar on-demand ecommerce aplications to learn from their mistakes and wins to build a better ui, wireframes and build a great application in the best possible way., there are 3 parts to the application, by the end on the planning stage, we had already created detailed wireframes and a working prototype in invision app., ui and ux design, to design the memobed web portal we had to make it fully mobile responsive with native mobile features, since downloading an app was not an option. they wanted to make the application as seamless as possible and easy to navigate. we gathered information about memobed’s main competitors and analyzed their website’s features. next we built a storyboard followed by wireframes and prototypes. wanted us to design an animal character to appeal to their audiences and capture their attention through storytelling. so we went to our sketch board and designed several animal character choices. the winner was a cute parrot we named “memojo” to associate with the brand name “memobed”. memobed’s goal was to build an intelligent copper mattress technology and the choice of parrot supported that idea. parrots are very curious and intelligent in general and some have the thinking power of a human toddler. so a talking parrot named “memojo” was born to represent memobed’s brand. as part of artistic work we also created several human characters to tell stories throughout the website..

Web Development

Technology stack, kitchen appliances iot app.

Quality apps for construction industry

Construction Inspection App

Get started.

Featured Website Design, SEO, & Paid Search Case Studies

Select a client below to learn more about their project and results in working with OuterBox.

In the summer of 2020 Warehouse Lighting needed to revamp their SEO efforts. They were looking for an agency that was quick to react to Google’s latest algorithm update as well as one that was 100% transparent in everything they did. OuterBox proved to be just the strategic partner they needed – more than doubling page one rankings.

Through a robust and ever-evolving SEO and PPC strategy, OuterBox has helped increase Lethal Performance’s organic and paid revenue by more than 490% year-over-year.

As a start-up brand within the last 2 years, Aviya has grown into a major player in the online mattress marketplace. With individual day sales topping $20,000 and monthly revenue in the six figures, the new website and online marketing plan have been a major success.

With the need for a website redesign and eCommerce capabilities, A&C Plastics came to OuterBox. Not only was a new website developed, but a highly successful SEO & SEM campaign were put in place to grow sales.

As a provider of innovative boat lifts, Jet Dock needed a professional website, with the modern functionality and aesthetic to emphasize their competitive advantage. Our holistic approach to eCommerce design delivered a site that ranks, too – providing sustainable growth in organic traffic for years to come.

Needing a fully custom solution, Blackburns came to OuterBox to brainstorm ideas. The final project included a branded eCommerce portfolio that allows customers to login and have a fully branded shopping experience showing their color schedule and logo.

GPI Meters came to OuterBox looking to improve eCommerce conversions and sales from their authorized reselling site based around GPI/FLOMEC liquid flow meters for industrial and commercial purposes. The search for an agency began because of a low ROI and it was clear the campaign needed major adjustments and optimization.

Wanting to grow sales online, Boat & RV Accessories needed to change platforms and integrate a search engine marketing strategy. In just a few months sales grew by over 60%, while organic traffic jumped over 50%.

With 75,000 industrial parts, Fanuc World is an online leader in both new and used Fanuc Parts. Fanuc World was in need of a modern website, both from a design and functionality standpoint. The goal was to streamline their sales process and make online purchasing simple for both their customers and their warehouse. Additionally, Fanuc World needed an effective online marketing campaign in place to drive new customers to their store.

Needing a strategic partner, 1 EDI selected OuterBox to manage both SEO & PPC, creating a fully integrated campaign to increase leads online. Since the campaign begun 1 EDI Source has increase monthly leads by over 65%.

After a new website launch, Cardinal Peak experienced a significant dip in keyword positions. Needing to focus on getting back to where they were, Cardinal Peak partnered with OuterBox. Today the number of keyword on the first page of Google are at an all time high.

Bambi Baby came to OuterBox in the spring of 2021 looking to kickstart their SEO campaign – they wanted to rank for the luxury brands they carried but needed an SEO expert to help. Since partnering with OuterBox, Bambi Baby has seen their page one rankings increase by 138% and their organic revenue grow by more than 100%.

In the summer of 2020, based on strong recommendations from some of their B2B partners, CORSA reached out to OuterBox. Over the past two years, OuterBox has helped to increase revenue by nearly 300%, with organic search revenue jumping 366%.

Our expert team will talk through your digital marketing needs and provide you an accurate customized proposal.

• Site Building
• Quick Reads
• About Academy
• Perspectives
• 9 ​Ecommerce UX Best Practices​ in Action (Case Study) ​
• Implementing Accessible UX for Your Business Site
• Dynamic Web Content 101
• How to Use Instagram for Lifestyle Marketing
• Six Tips for a Smooth Hiring Process
• New Content: Getting Started With Social Media
• Five Examples of Customer-Focused Email Campaigns
• How to Set Up a Home Office on a Budget
• Getting Started With Email Marketing Segmentation
• 3 Types of Systems Your Remote Business Needs
• 5 Guidelines for A/B Testing Your Email Campaigns
• 5 Strategies for Giving Remote Feedback
• How to Run a Remote Meeting That Gets Results
• How to Create a Well-Rounded Marketing Team
• Project Management Tips for Remote Workers
• Three Steps to Your First A/B Test
• Building Trust Into Your Team’s Remote Culture
• How to Lay the Groundwork for a Successful Remote Meeting
• Email Marketing Automation: Five Examples & Workflows
• Book More Clients With These Tips for Your "Services" Page
• How to Create an Effective Knowledge Base
• 66 Questions to Help You Craft Realistic Customer & User Personas
• 5 Ways to Showcase Your Value Proposition
• Best Practices for Website Navigation Menus
• Ecommerce UX: 3 Examples to Learn From
• How to Respond to Negative Feedback in Customer Reviews
• Creating Support Pages that Support Your Sales 
• 5 Important Elements to Put Below the Fold on Your Company Homepage
• 3 Strategies to Increase the Response Rate on Requests for Business Reviews
• 9 Characteristics of a Killer FAQ Page
• How to Turn Customer Surveys into Testimonials
• The Business Benefits of Creating Mission, Vision, and Values Statements
• How to Write Your Mission, Vision, and Values Statements
• 5 Top Tips for Your Business Website

Even if you’ve read our tips on how to create stronger, more effective product pages , shopping carts , and everything else that goes into an ecommerce site , you may be wondering how you can pull all of those separate elements together. What does it look like to consider UX from the jump, and create a site that helps visitors along their journey, while also generating more sales?

We scoured one award-winning ecommerce site for with the intent of demonstrating exactly that. Keep reading to see best practices in action for every step of a potential purchaser’s journey, from browsing to buying.

A well-designed ecommerce site: Heyday skincare

Heyday is a self-described “one-stop skincare shop where knowledgeable experts, customized facials, and powerful products come together to help you put your best face forward.”

The site is a fusion of service-plus-product. Visitors can book an appointment with a licensed esthetician in New York or Los Angeles. They can also buy “products our therapists love and use” in the other half of the site, an online shop. This framing bakes social proof into the site from the very beginning. After all, if professional estheticians use the products, they must be good.

Connecting with customers

When visitors land on Heyday’s site, they’re greeted with a video in the “hero image” space. Using video in this space is a terrific way to capture visitor attention immediately. The hero video cycles between several different people using skincare products.

What makes this video so strong is that it appeals to a customer persona quite different from the persona typically associated with, or expected from, skincare companies. Heyday makes it clear from the beginning that their products (and services) aren’t gendered. Men who click into the site immediately know that Heyday considers them a potential customer, and don’t have to ask if they’re in the right place.

Sign up for our newsletter to get more business tips straight to your inbox:

Subscribe Now

Keeping it simple

Aside from the hero video, the simplicity of the options offered above the fold is immediately obvious.

The CTA buttons just below the value proposition show visitors there are two primary actions they can take on the site. They can book an appointment, or they can shop products. Those same options show up in the main menu (top right corner of the page) for visitors who look there first. Heyday’s more complex navigation menu is hidden behind the hamburger icon (top left corner of the page). This keeps visitors from becoming overwhelmed when they first land on the homepage.

When a visitor clicks on the hamburger menu, here’s what they see:

User-focused navigation

Initially, it might seem that there’s a lot happening here. But when you look closer, you’ll observe that Heyday offers more options in order to make navigating simpler (meaning: fewer clicks) for its visitors. There are four primary categories on the left side of the menu, in orange text so as to stand out:

For visitors who are looking to browse the company’s selection, Heyday offers two options under “Products”: “All” and “Bestsellers.” The right side of the main menu is for visitors who know what they’re looking for. Those visitors can shop by product, brand, or skin condition.

“Skin Focus,” by the way, is a filter we don’t see often enough. It’s a brilliant—and empathetic—way to make UX easier on visitors who have arrived on the site in a frustrated or concerned state. They may initially have no idea what products to look at, but the navigation guides them there.

In other words, Heyday offers a navigation menu that caters to two types of prospects:

• Those who don’t know the company or the industry well and are in “discovery” or “browsing” mode
• Those who arrive on the site with a clearer intention and don’t want to click through Heyday’s categories to find what they’re looking for

In creating their menu, Heyday is keeping their whole range of users in mind.

Since we’ve never been here before, we clicked on “All” in the “Products” category. Here’s what we saw next:

Note that, for visitors who click on “All” products, Heyday groups its offerings by type. These visitors probably aren’t looking for specific brands or for particular skin conditions. Otherwise, they’d have clicked into those menu items.

On this landing page, types are listed in the horizontal menu beneath the hero image. Those categories are displayed in the same order when a user scrolls down. Naturally, Heyday puts their bestsellers at the top.

Remember, we’ve identified ourselves as “browsers” based on what we clicked into from the homepage. We’re probably not committed to a purchase yet, so offering these “hot items” first might capture our attention more quickly. It also continues to provide social proof and simplifies the shopping experience for first-time users.

Persuasive product pages

We clicked into the After Sun Soothing Aloe Mist:

Heyday’s product pages do a lot of things right:

Strong product photography

Granted, it doesn’t follow the best practices we laid out in our Ecommerce Product Photography Guidebook . (A great reminder that “best practices” are only that—they’re not law!) For example, the shadows that fall in the upper-right hand corner and to the left of the product are not a best practice. Even so, those shadows and the line where the table meets the wall frame the product rather than distract from it. It’s an interesting decision on the photographer’s part and it works well. Most importantly, both the product and the copy on its label are clear.

Easy-to-find “Add to Cart” button

It’s the second most-visible thing above the fold. Remember, your ongoing question when thinking about UX should be: Does the user know where to go next from here? Heyday ensures they do.

That space above the fold is entirely clear of visual clutter. Users see the product, note the price, choose the size they want (the price auto-updates when a new selection is made), and click the CTA. Indeed, our only recommendation for the company would be to stick with convention and have the button read “Add to Cart.” A button that says “$12” doesn’t exactly tell us what’ll happen when we click on it. Users should always know precisely what clicking on a button will do.

“Heyday tips” and “Pro tips”

What we love about this decision is that it affirms the company is as interested in educating its market as it is in selling to them: Prospects feel they’re being seen and heard rather than capitalized on. Indeed, these “tips” aren’t even specific to Heyday’s product. They’re true of all aloe vera products, and they’ll benefit the target market no matter who they buy their aloe from.

Product education

This continues further down the page (check out the headings “We Recommend This For,” “How We Use It,” “What to Expect”). Heyday doesn’t leave a stone unturned—or a question unanswered—here: When would I use this? What’s the best way to use it? What will it do to/for me? And of course: What, exactly, is in it?

Social proof

Heyday offers social proof from the demographic prospects most want to hear it from—professional estheticians. Remember, everything that’s sold on Heyday’s online shop is already recommended by the pros; but putting faces and names to those recommendations humanizes the endorsement, making it even easier for prospects to trust the product and the company.

All of this occurs on a remarkably clutter-free and easy-to-scan product page.

Clean cart & checkout design

We won’t linger too long on Heyday’s add-to-cart and checkout processes, but it’s worth noting a few things in that portion of the buyer’s journey. For one, a series of microinteractions occurs when a user clicks the “Add to Cart” CTA.

Three things happen at once:

• The color of the button changes
• The copy on the button changes
• The cart icon in the top-right corner is updated to reflect the addition

These microinteractions instill confidence in the user and signal that the website registered the action they took.

We’d have loved both a more conspicuous route to checkout and a CTA to keep shopping at this point (you should always give users both options on your cart page !). However, Heyday leaves us to figure out our next steps on our own. So we click into the cart page and move through a pretty standard checkout process after that.

Checkout and order confirmation

Here’s what the shopping cart looks like:

Notice that Heyday displays a product image along with some details (product name and size), and gives prospects the option of increasing or decreasing order size. To remove an item from the cart altogether, users must click the “—” icon until the number hits zero. This took us a second to figure out; most users expect an “X” for this.

On the checkout page, Heyday offers both PayPal and Amazon Pay for express checkout. They also offer guest checkout as a default, but give returning users the option to sign in. There’s no forcing account creation , which we love. What we don’t love is that we weren’t given the cost with tax until this page. And we won’t be given the total cost with shipping until the next page:

By the time we completed checkout (not shown), our total cost had nearly doubled from the listed price (from $12.00 to $22.87), so Heyday doesn’t get points for total-cost transparency here. But the UX up until these final pages was remarkably good.

Clear order confirmation and specific next steps

The company redeemed itself when, after some more browsing, we ended up purchasing a product after all. Here’s what we saw on the confirmation page:

And here’s the email we received just moments after hitting the “Purchase” CTA:

Heyday does a few things really well here. For one, their confirmation page shows us exactly what we purchased, what we paid for it, where it’s being shipped to on the map, and what next steps are. A confirmation email is coming, so we’ll be on the lookout for it. We also know that we can expect shipping and delivery updates by email. But, if we prefer, we can click that CTA to get them by text instead.

In the confirmation email, we’re given more next steps (look out for the tracking number). We’re also given a few options:

• “Giftify” our purchase
• View our order
• Start shopping again (“Visit our store”)
• Look for their hashtag on social media
• And, perhaps, use the hashtag in our own social posts when the product arrives

Not bad for what’s essentially a two-sentence email!

Your UX homework:

Here’s what you should learn from looking at Heyday’s design:

• Make it immediately obvious who your ideal customers are on your homepage
• Keep your navigation options simple and user-focused
• Make good use of social proof
• Show visitors that you’re interested in helping them improve their lives and get the most from your products
• When a visitor takes an action, make it very clear that they’ve taken an action

Last but not least: On every page of your site, does the user know where to go next from here? If not, what do you need to change to do that?

Even if that’s the only UX principle you keep in mind while building your ecommerce site, it will serve you (and your business) well.

Lauren Shufran

Sign up for our newsletter to get more quality content