Inovelli.com 3.0 - Feedback Thread

So Hot Right Now News
#1

Quick Link to the site: https://inovelli.myshopify.com/

Hey all!

Some exciting news and something I’ve been wanting to work on for a long time, but never really had the bandwidth… website optimization!

With the merger completed, my role has changed to focus more on marketing/branding and user experience. A main portion of that includes the website.

The current site was good for what it was and was a major upgrade back in 2019 from WooCommerce, but with the limitations on the backend from a coding perspective and extremely high pricing, we decided to move to a different platform (Shopify) that is easier to work on and also just works much better (and about 1/5 the cost).

I’ve started to build out the site and I’d say I’m about 60% done and am in the, “wire-framing” phase right now, which means that there likely is some placeholders with text, pages are duplicates, formatting may be off, but the overall skeleton of the site is there.

The purpose of this thread would be to get feedback based on the various phases which are as follows:

  • Wire-Framing
  • Content Writing
  • Testing, Review & Launch
  • Maintenance

We’re planning to get this off the ground before the next billing cycle of our current platform which is just under a month away.

–

That said, here’s the link to the site: https://inovelli.myshopify.com/

3 Likes
#2

I will be commenting as feedback comes along, but I will also comment when the phases are completed.

For the first phase (Wire-Framing), I’d like the following feedback if you all have time:

  • Is the site easy to navigate? Customer should be able to get to where they want within a couple of clicks (preferably 1-Click)
  • Do the pages flow properly and are you able to understand the purpose of the pages (I will outline what each page should describe below)

Pages:

  • Home Page: Overall purpose is to get you to click on whatever the, “Hero” is (in this case the Blue Series)
    • The top portion should capture your attention and get you to click on whatever it is we’re directing you to (again, in this case, the Blue Series).
    • Moving down the page, it should continue to get you interested in what we’re about (in this case, we are trying to tell the story of how we believe we’re the best at lighting) – if you’re not immediately intrigued by the header (ie: more selling points)
    • Bottom portion is more to show a teaser of what we’re all about (community driven company)
  • Category Pages (Ex: Smart Switches, Smart Lighting, etc): Purpose here is to give a quick overview of the product, but ultimately it’s to lead you to easily find what you’re looking for
    • I’m debating back and forth on what all needs to be on this page – in looking at other sites, it looks like most just have a header and then just list the products (I’m guessing it’s to quickly get you to click on a product and then you can research on the product page). However, I think if I were to put something here, it may be a comparison of Red vs Blue and/or vs competition. But it would be underneath where the products are (as more of a, “just in case you want more”)
  • Product Pages: Here’s where the story needs to be told but also where the important data lies to do research (@pabigot, @JimK, @ThreeFN and @kreene1987 – here’s where I’d love your input as we progress into the, “Content Writing” portion)
    • @pabigot – I put the dimensions in the Tech Specs portion, but if you’d like to see it somewhere else, I can definitely do that – curious where you’d look for it yourself as you called it out initially
    • Overall UI should make it easy for someone to purchase the product (if they don’t want to read the story)
    • Moving down the page, it should be clear on what this product can do as well as why it’s “better” (subjective, I know) – this is the final step in the sales process and the last time to convince someone that this is it.

Other pages are pretty self explanatory, but I’d love to hear your thoughts. I think it’s very important to portray who we are as I do firmly believe we’re much different than the competition in that we are small, but also not really due to our amazing community. Our business model is much different and hopefully that resonates with people.

Other feedback welcome, admittedly, I’m not really a UX kind of guy, but I love learning about it.

#3

Looking good so far! Here’s what I’ve noticed:

-Mobile-

  • Home page takes a VERY long time to load up the menu button. I assume the menu uses onReady, which is taking a long time due to the images/main video of the switches to load up.
  • Menu on the bottom takes some getting used to, just different not necessarily bad. Many people may find different unintuitive to use/navigate the site

-Desktop/Mobile-

  • The images under “shop collections” on the homepage, and I think a few other places, seem hard to read to me. Perhaps a full image opacity vs the little oval behind the text would be easier to read
  • The filtering is a really good touch!

I’ll do some additional browsing

1 Like
#4

You’re fast! I was racing you to put the first comment down lol. Appreciate the feedback :slight_smile:

Do you notice this every time, or just the first time? I actually never noticed this until you said something about it (great catch!). I cleared cache and then opened up a private browser and yes, it took a good 4-5 seconds to load. However, the subsequent times, it was fairly quick (<1 second).

Not sure on the onReady, it was built into the theme I chose, but I’ll take a look at speed optimization.

Yeah, initially this kind of annoyed me bc I wasn’t used to it. In fact, I did some research as to why they chose to do that (I can turn it off, but decided to stick with it) and I think this sold me on it:

image
image1580×1550 302 KB

It makes sense in theory – but the initial shock factor may be a turn-off, I’m curious what others think. Once I got used to it, I really liked it.

Good call-out – I think you’re right. I’ll need some custom HTML/CSS work from the other Eric to fix it lol.

Yeah I thought this was really cool – the challenge will be the backend and, “mapping” it to our current setup in inventory, but I think it can be done!

#5

A couple more.

  • Carousels/Slides don’t have arrows. Fine for mobile, might want to add to Desktop view
  • Not sure if you can use something other than a GIF, but it’s noticeably grainy
  • Adding links at the top of a product page could be useful for navigation. -Design -Features - FAQs Getting to FAQs on mobile takes a bit of scrolling.
  • The menu size on desktop is nice. The BC site does come across as an enlarged mobile site
1 Like
#6

First load on Android 12/One UI 4.1, the menu button, the menus and the menu items all loaded instantly.

1 Like
#7

It makes sense in theory – but the initial shock factor may be a turn-off, I’m curious what others think. Once I got used to it, I really liked it.

Same here, and the iPhone infographics you linked are exactly what I had in mind for the usage in the first place. It makes sense, in theory it is better, but some people are allergic to change haha.

I think it will be better if it shows up right away, which may happen with a smaller file to load for the video.

Do you notice this every time, or just the first time?

I had that thought, and refreshed, navigated around and came back, but it always took a while for me. I get about 4-5 seconds too.

#8

Strange. If I just sit on the homepage and tap refresh it takes a good 5 seconds on a 100mb/s fiber connection. That’s with Safari or Edge browser.
Considering the Lighthouse report came back decent, I’ll chalk it up to the fact that my phone is on a beta of iOS 16.

#9

Why are buttons there for red series, blue series, and then smart switches? Seems counterintuitive.

I would filter store by “Switches”, “Sensors”, “Hubs” and THEN narrow by sub-type (Blue Series, Red Series, White Series switches, etc.)

I would also add the zigbee and/or “Zigbee” to the blue series, same for z-wave for Red. For the first time buyer they can’t be expected to understand which color relates to which technology, especially because z-wave symbol is blue and zigbee is blue.

More thoughts I’m sure as we get down into the individual product descriptions.

#11

Overall I like the new site. Makes sense to focus on where you can bring the value-add, which hosting an e-commerce site is probably not on the list.

One comment for the ‘Our Favorites’ product carousel on the home page would be to sort by in-stock status first. It is not a great user first impression when 4 out of the first 5 favorites are out of stock.

1 Like
#12

Great question – the theme only allows for two sub-menus, and one of my pet peeves of the current website is that you can’t get to a specific product, but rather you have to click on the category and then scroll down the page to find the individual products.

So, the thought process here was:

  • Show Categories (ie: Switches, Lights, Sensors, etc) that drill down to the individual products
  • Then if you’re not sure what you’re looking for but have heard online about the Blue vs Red series, you’d click on that and you’d be taken to all Red or Blue Series products

What part are you talking about? It shows up as Zigbee or Z-Wave in the Category menu – were you referencing the next drill down (ie: Product Menu). If the product menu, it may be difficult bc of the length of characters are limited (bc it would then cause two lines for the description). I tried to solve for this by putting Zigbee/Z-Wave on the actual product pages in the title. I definitely had the same thought though!

Yeah I wish there was a way to differentiate them. I prefer the minimal look of the dots, but can understand not everyone may see them. Definitely a good call out – curious to hear what others say too or if they notice it can be scrolled left to right.

Yeah… ugh. I’ll have to check to see if there’s a plug-in or possibly some custom HTML/CSS that can be done. Out of the box, there isn’t a way to do videos that scroll, so I had to make them GIF’s. I tried to get them as high-res as possible, but I’m limited to 20MB, which makes it challenging.

Nice, yeah I like that – I did like that about our current site!

Lol, yeah – that was intentional. I remember it being hard sold to us and I actually really liked it. I never did any heat-mapping to see if it was successful or not.

Excellent point – let me see if I can finagle that a bit!

EDIT: I was able to figure it out – kind of a workaround, but I had to create a specific group by manually adding in products that are in stock. Thanks!

#13

Just for the sake of consistency, would it be possible for the Community menu link to also have a dropdown for Forums (could link to socials, etc if you wanted more items instead)? Even if just clicking it has the same effect, it feels weird mousing over it and having it be the exception in the middle of the others.

Also is it possible for clicking on Store to actually display products directly instead of sending me to the categories? Can always filter from there?

#14

Yeah I wish there was a way to differentiate them. I prefer the minimal look of the dots, but can understand not everyone may see them.

I like the minimal approach as well. The issue is that you have to click and drag to advance slides, which is unusual behavior for desktop. If you have a thin < and > on the sides, it will still give a minimalist look, while offering a simple click to advance behavior. The arrows should be able to be hidden in CSS under x pixels wide.

#15

Or maybe a different color text or background to show that it behaves differently than the others.

edit: or maybe a line break
STORE SUPPORT | COMMUNITY

1 Like
#16

It was here:

image
image1319×785 91.5 KB

Red and Blue were options there, but now they aren’t. So all good I think?

#17

There doesn’t appear to be any text under the store items unless I hover over each item individually. Is that a bug or on purpose? It would be a lot better to read the page without needing to constantly move the mouse.

image
image1957×1811 182 KB

Next, the drop menu changes color to acknowledge the mouse only on sub menus. It doesn’t change color at all on individual items. After seeing a hover color change on the first two menu items my brain wants to pause the mouse and wait for the web page to catch up when it doesn’t continue following the mouse position.

image
image1264×828 125 KB

Third, the browser in the following screenshot here is snapped to half of a 1920 screen.

image
image1875×304 20.9 KB

The menu is wrapping the word Discover down under the top drop menus. I’m not really a fan of form over function, and in this case the function is suffering because of the centered logo. If you put the logo on the left you would have a lot more space for the menu before it wrapped or needed to collapse into a mobile menu.

1 Like
#18

First of - Nice! I really like the new site.

Two things I noticed.

  1. The Discover - Our Story. Videos (Animated gifs?) take a long time to load. I was trying to see if I could turn on the sound on them, but that obviously won’t work if they are gifs… :wink: . The first video is nice (the one with the young family) but seems to showcase a bunch of products that are no longer available…?
  2. On the iPad in landscape mode with the side pane open, one of the titles doesn’t display properly:
    image
    image2388×1204 210 KB
#19

The new site is looking fabulous! I look forward its release.

Feedback on the site as requested. Testing performed on desktop, as it looks like others are covering mobile nicely.

Menu:

The community is certainly a large part of what make Inovelli great. That said I’m not sure it deserves the prime real estate of being a top-level item. I would suggest placing it under Discover (as in discover our awesome community!)

image

I believe this was mentioned earlier, but I would remove Blue/Red series from the store menu. These may make sense for returning buyers, but new buyers may be confused.

Under the switches flyout instead of listing the specific switches I could see creating groups for the types of switches. So, Store > Switches > Dimmer or Store > Switches > Combo (2n1). You could then use the landing page to explain the series options and why someone may want one switch over the other. I remember the lack of clarity around the Red/Black switches before their release, and wishing I had pre-ordered Red series.

Home Page

It’s likely not as important these days, but one thing to keep in mind with all the animations (gif/video) is the overall page size. It’s currently around ~13MB, which is nothing on most wired connections. The impacts may be more noticeable on mobile.

“Animated Notifications” slider

I’m not sure who’s garage is featured, but it looks like they need to replace a light bulb :joy:. I’ll mirror what others have said, you should consider adding arrows or some other more noticeable indicator. I completely missed that was a slider on my first pass.

I’ll slightly nitpick on the slides:

  • Garage - It looks like you reuse the same animation in multiple spots. It’s more work, but I could see doing some different animation examples. For example, flashing red for garage open (better showcase the awesome animation potential).
  • Scene Control - I would suggest slowing down the “video”. The transitions are fast enough I could see users missing what’s happening and/or having an adverse reaction to the rapid flashing. It’s also hard to notice the switch compared with Smart Bulb Mode.

Regarding the image quality. It should be possible to leverage javascript to replace the gif with a video if desired (only on desktop for example to keep page load down). That said, I think the gif quality is fine for this purpose. I would only look at these for a few second and then want to click for more information.

“Teaser Video” under Favorites. This seems out of place to me. I would have the actual video on the product page, but leave it off the home page. I would move the Crafted by Us section up to take it’s place.

“Shop Collections” block - As already noted the text gets a little lost on these. Reducing the transparency should resolve the problem.

Adjusting theme.css - line 9707, which will look something like this (with more lines in the brackets). You would just need to change the transparent part to adjust. (Granted shopify likely has you do this differently)

.skrim_title:before {
background: radial-gradient(rgba(0,0,0,var(--colorImageOverlayTextShadow)) 0%,transparent 80%);
}

Catalog Page

This could be a good spot to add a block talking the different switch series.

Product Group pages

It looks like the newsletter block exists twice (“Sign up and save” and “Join the club”)

Hope this helps!

#20

Discover is probably the last place I would think to look for the forums. It seems more like a support option. If moved into support, I would also rename it to Forums since there is a Community Knowledge Base item in there.

#21

I liked the filtering option for the switches. Easy way to compare without needing to click what items you want to compare.

Not sure if it’s in your control, but a confirmation after tapping the minus button on a qty 1 item in the shopping cart would be nice for those who accidentally hit it.

Also, are the red series 2 in 1 really (pre)order-able? If the answer is no then obviously not a serious question :upside_down_face: