what’s inside. oddit preview take a look at

18
Take a look at what’s inside. Handcrafted by Oddit ©Oddit 2021 ODDIT PREVIEW

Upload: others

Post on 17-Jan-2022

5 views

Category:

Documents


2 download

TRANSCRIPT

Page 1: what’s inside. ODDIT PREVIEW Take a look at

Take a look atwhat’s inside.

Handcrafted by Oddit ©Oddit 2021

ODDIT PREVIEW

Page 2: what’s inside. ODDIT PREVIEW Take a look at

Simply put, a ton of valuable insight that will help generate revenue and build a lasting brand.

We provide feedback to help get the most out of the eyeballs on your brand, regardless of how they found you. We want to ensure your DTC brand lives up to its potential, and never gets comfortable with the status quo.

WHAT DO YOU GET IN AN ODDIT?

Page 3: what’s inside. ODDIT PREVIEW Take a look at

Quick WinsLow effort suggestions that are easy to implement with minimal time and cost. Things like copywriting or simple CSS edits that likely don’t require additional strategy or development work.

SAMPLE

FOCUS

Small HurdlesMedium effort suggestions that most teams can tackle in an afternoon. The incremental impact of these changes will have the power to move the needle substantially.

Major MovesHigh effort items that should only be put into your queue once you’ve discussed their cost, and disruption of all priorities. These larger shifts can drive big impact but aren't easy to implement.

Red AlertsRegardless of effort and cost, these items should be reviewed and dealt with as soon as possible. They are having a drastic impact on your brand presence and the conversion of your products.

LOOK FOR ME IN FULL ODDIT PRODUCTS!

HOW WE BREAKDOWN ODDITS Full Oddit products are broken into 4 categories so you can better prioritize the changes we recommend.

Page 4: what’s inside. ODDIT PREVIEW Take a look at

NEW

Give users clear, quick access to purchase. The product pages do a good job of providing product info but with a few minor tweaks, users could be digesting the page faster, and hitting “Add to Cart” more often.

Oddit Recommends

Suggestion 1 Left-align all text. Currently the product title, price, quantity selector and Add to Cart button are centered-aligned. Left aligning these items allows users to scan/navigate the page faster as its more natural.

Suggestion 2 Make price 1.52x larger, and heavier height font. Also, when showing price for a 6-pack, show price as “$15/6-pack”

Suggestion 3 Move the Add to Cart button directly below the Quantity selector.

Suggestion 4 Make Add to Cart font weight 800 (currently 500, remove letter spacing, and widen padding on edges to make it more visual!

CURRENT

Simple CSS changes that will help you convert faster.

Page 5: what’s inside. ODDIT PREVIEW Take a look at

Remove

Reduce Vertical Height

+

Get customers to your products faster.On product category pages, product cards are getting pushed down the page on desktop and mobile by large images that don’t provide much in additional value or helping convert sales. Typically getting customers to

Remove

Oddit Recommends

Suggestion 1 Remove the image section from all category pages on both desktop and mobile.

Suggestion 2 Reduce height of ‘Free Shipping & Returns…” panel on mobile. Currently takes up 100px+ of vertical space, and should take up no more than 60px. Same goes for the “Jeans” heading container on mobile.

+

Data-driven guidance to get people into your purchase funnel.

Helpful Hint: If you’re missing the lifestyle photography once the top images are removed, add some variation to the product cards by showing lifestyle images of the products instead of just simple products on white background. This could be done using a single image, or by allowing users to click through multiple photos within the card before clicking a product.

Page 6: what’s inside. ODDIT PREVIEW Take a look at

Too many messages = no message.Data suggests that carousels typically create less engagement above the fold - and that 90% of carousel interaction happens on the first slide. Multiple messages distract from the core goal.

In addition, within each carousel slide the user is given multiple options with little hierarchy, and below average clarity. The timing on the carousel is also quick, meaning the user needs to be very engaged to read & digest the info before it changes.

Oddit Recommends

Suggestion 1 Drill down and decide what is the most compelling story your brand tells – put that, and only that in place of the carousel. If you want to keep it simple, just remove the other 4 slides!

Suggestion 2 If you are going to have multiple options within the header, give them hierarchy so they are differentiated. See UI examples shown.

Suggestion 3 Ensure header (and all) messaging is super clear. “Shop” is typically associated with shopping all products when not specifically paired with a product, you could add “Shop Our Best Seller” or “Shop The Fat Cat” to clarify.

Expert opinions, paired with data-driven recommendations.

Page 7: what’s inside. ODDIT PREVIEW Take a look at

Cool doesn’t always convert.You have a great brand and a consistent, fun vibe. Your aesthetic and attention to detail in design has no doubt played a key role in the performance of your brand. That said, finding the balance between sexy and sales is the key to growing your digital performance.

Oddit Recommends

Redesign your Add to Cart button to be a clear interaction point that stands out from the rest.

Suggestion 1 Increase button height from 40px to 50px

Suggestion 2 Differentiate the button from other items on the page by making it a higher color contrast item. See image to the left for reference examples.Actual design mockups

paired with conversion driving suggestions.

Helpful Hint: Users can’t see hover states on a mobile device – so even tho the stroke buttons fill on desktop hover, that interaction is never seen by mobile users.

Page 8: what’s inside. ODDIT PREVIEW Take a look at

A consistent experience builds trust.Your product collection page is full of inconsistencies across product cards and imagery, with a lack of direction guiding users to purchase.

Oddit Recommends

Suggestion 1 Commit to a photo style. Currently some have a shadow, some are on white backgrounds, some are in real life settings, and some are too large for the image window.

Suggestion 2 Remove hover state from the price, and remove stroked border – it makes it look like a button, and it is not a button. In fact, it’s currently the only place on product cards that you cannot click.

Suggestion 3 Add a simple line of text describing each product on the product card.

Suggestion 4 Show the color variants on product cards. If the user doesn’t like the color in the initial image, they may just keep scrolling – let them know there are options.

Multiple suggestions and real-world examples for how to execute issues.

Page 9: what’s inside. ODDIT PREVIEW Take a look at

Homepage needs a clear, connected call-to-action.Your brand has greats products, with a great story – bring that to life in this first section of the homepage, and give users somewhere to click that matters. Currently the only prominent button upon first getting to the site is a large “Help” button.

Oddit Recommends

Suggestion: Rethink your main headline. The current headline assumes users know what products you provide, or know what ‘natures’ gifts are, leaving you to explain what they are below it.

Updated headline: Greener Gardens, Tastier Meals & Livelier Homes.

Sub-headline: 400 varieties of hard-to-find Australian herb plants, spices, teas, medicinals & oils delivered directly to your doorstep.

CTA/Button: Shop NowCopywriting and CTA suggestions to improve clicks.

Page 10: what’s inside. ODDIT PREVIEW Take a look at

Bring in more social proofYour brand has a strong social presence, but lacks reviews. Reviews (and other forms of social proof) are a major driver to help people convert online.

Oddit Recommends

Suggestion: Explore different ways to work reviews into your shopping experience - three we recommend are (1 review ratings placed above the fold on individual product pages; 2 Full user reviews included on the individual product pages, and; 3 highlighting reviews on the homepage, landing or other core pages.

Identify new features and interactions to better relate to users and drive action.

Page 11: what’s inside. ODDIT PREVIEW Take a look at

NEWCURRENT

Review site accessibility.While it can be useful to refer to the Web Content Accessibility Guidelines (a set of principles used as the standard for determining accessible color contrast), we recommend simply using common sense. Accessibility when it comes to color contrast, is intended to accommodate users who suffer from color blindness, or simply don’t see very well. While we want to keep that in mind, we also need to consider the simple fact that most people don’t have their screen brightness at 100% at all times. The lower the color contrast of type vs background, the harder it is to see in low light.

Oddit Recommends

Suggestion: Review your headlines and icons site-wide. Look at them at smaller sizes, low screen brightness, etc – are they popping as much as they could? A simple switch to high-contrast headlines can have a drastic impact on what’s being communicated to users.

Highlighting best practices, and things that play well with the search engines.

Page 12: what’s inside. ODDIT PREVIEW Take a look at

Highlight the most important interaction.Your product page has a lot of great information and visuals, but the key interaction here needs to be getting users to hit the ‘Add to Cart’

Oddit Recommends

Redesign your Add to Cart button to be a clear interaction point that stands out from the rest.

Suggestion 1 Increase button height from 40px to 50 or even 60px.

Suggestion 2 Differentiate the button from other items on the page by making it a different color contrast. We suggest testing both black text on a gold button and white text on a black button.

Simple suggestions to highlight the most important interactions in the customer journey.

Page 13: what’s inside. ODDIT PREVIEW Take a look at

Mobile first, or finish last.The page in general is overwhelming on smaller screen sizes, however performance is the major red alert here.

TLDR; your page speed needs some serious work. Your Mobile Insights Lighthouse score was 13 out of 100 overall (A Lighthouse Score, is a weighted score based on multiple metrics) - and it took 4.0 seconds to get the first contentful paint (first contentful paint “FCP” is a performance metric that measures how much time has elapsed before the browser begins to display the first elements of the site). FCP should be below 2 seconds, with a long term aim of 1 second.

Oddit Recommends

Suggestion 1 Use video formats for animated content instead of large GIF files

Suggestion 2 Defer/lazy load offscreen images

Suggestion 3 Reduce JavaScript execution time

Suggestion 4 Remove unused CSS

Tips to improve page speed, SEO, and other overlooked elements.

Page 14: what’s inside. ODDIT PREVIEW Take a look at

Sell those boosters!Boosters aren’t included in the quiz flow, or checkout flow. It’s possible this is in the roadmap, as the explanation is provided as a user digs deeper - “Boosters are in limited supply and are currently only available as an add-on to Babyblends orders.”

Oddit Recommends

Suggestion: Add as an upsell/cross-sell whether recurring or as a one-time add on.

Simple recommendations to upsell and increase your AOV.

Page 15: what’s inside. ODDIT PREVIEW Take a look at

Make the decision path clear and simple.As step one of the purchase/quiz experience, it’s important to be as clear as possible. Further into the quiz the site redirects users based on what the child is currently eating. When this happens, and the user selects the alternate path (Kids Meals rather than the initial Baby Food for instance), they are asked to input information again, creating a small but annoying hurdle to completion.

Oddit Recommends

Suggestion 1 When users input information for the baby’s sex and birthdate, cache it so that they do not need to input it again if they are re-routed down an alternate path.

Suggestion 2 Display additional info on average age for each category at Step 1. For example, “Baby Food (012mths)”. Could also give info such as “No Prep or Cook time” at this stage.

Suggestion 3 Use the 4Grid seen to the left as Step 1 of the quiz flow. This alleviates any chance of having to redirect users to the start of the flow.

Identify typical frustration points throughout the purchase journey

Page 16: what’s inside. ODDIT PREVIEW Take a look at

The intention behind “Wonderfully soft to the touch, but how they make you feel is even better.” is great, but the execution is somewhat wordy.

Improve messaging, call-to-actions, and flow

Oddit Recommends

Suggestion 1 Rewrite headline.“Soft to the touch, nice to the planet”“Good for your phone, good for our planet”“Feels soft, and gives you the feels”

Suggestion 2 Don’t indicate “Step 1” if the user is not shown a “Step 2”. This is the first thing users see when they scroll on the homepage.It indicates “Step 1” but there really isn’t a step 2 laid out.

Alternate: Maybe simplifying to “Get Started: Choose Your Phone Size”

Page 17: what’s inside. ODDIT PREVIEW Take a look at

Divide, and conquer.These bullets to introduce the product are a bit overwhelming.

Oddit Recommends

Suggestion 1 Highlight the top 34 key points. Hide the others in a tab or little dropdown for users who wish to learn more.

Suggestion 2 Break the points into categories with sub headings so it’s easy to digest. For instance “What we love about Judy” with 34 points. “The Details” With few points about the size, dimensions, etc.

Review styling is misaligned.For a site that has a great, fairly meticulously managed brand - the reviews section really stands out as an after thought in terms of styling.

Oddit Recommends

Suggestion: Invest in restyling Yopto reviews to better align with the overall brand aesthetic.

Analyze clarity of information & align your brand positioning, UI, & communication.

Page 18: what’s inside. ODDIT PREVIEW Take a look at

If you’d like to uncover conversion leading analysis within your own product, we’d love to dive in!

 3035 pages of analysis Review on all screen widths Detailed messaging and CTA feedback and suggestions Navigation review

 Full visual design & UI review including detailed CSS changes Site architecture review to remove frustration points Prioritized for both ease & impact New feature recommendations

Our full Oddit products include: Visit oddit.co/pricing to get started!

COOL, HUH?