Lensway
UI/UX Designer
Productpage for lenses
UX/UI Designer, Project-lead
Lensway is a wellknown Scandinavian brand that sells contact lenses and Eyewear online since 2000. Lensway have e-stores in Sweden, Norway, Denmark and Finland. Since I started as a consultant the Brand has gone through a rebranding where I had a lead-designer role. Some of the designs has since then been iterated or updated.
Challenge
The product page for lenses was perceived as “messy” and difficult to navigateon, especially in mobile mode. Depending on the type of lens and at what stage the type of lens was in (on sale, expired, equivalent alternative available, etc.) different types of flexible modules were needed. Since eye products contain a lot of information, there was also a need for menus that optimized the surface
Result
The new product page won in the A / B test with the old one. The design proved a clear navigation improvement with smoother modules with fly in menus instead of scroll function for longer pieces of text. A sticky menu with an order button increased conversion. In the sticky menu there was also a unique service that was reached via button. It also received an increased number of clicks. There was a strong focus on keeping the most important content above fold and easy for the thumb to access compared to before where the user had to scroll to access important information (which data showed that they were reluctant to do).
Left: before
Right: after
Problem: a lot of important information was hidden below fold, sometimes it took a lot of scrolling and we could see the users didn’t interact with the design as desired.
The difference: is mainly that the two most important buttons are displayed always above fold in a sticky menu along with name of product, star-rating, price and images.
Left: before
Right: after
Problem: The original left version had an autoscroll – so when the text was long (which it usually was on mobile) – the user was automatically scrolled far down on the page and had to manually scroll up.
The difference: Long text content that was both important and that could contribute to conversion was easier to access. The menu provided a clear overview with another background color to make it easier for the eye to see. And the menu was fly in, so the user could anytime close and stay in the same position.
Research – data and customer service
Apart from looking at data from google analytics, hotjar and other tools I also interviewed the customer service at Lensway about the most common misunderstandings, frustrations or questions the users had when ordering. A lot of findings were made, and I quickly realized I had to make the page scalable with menus and optimize space for information. That’s why I chose to build the menus as below on desktop. Of course also included in mobile. At this time most of the users came in from mobile devices for lenses and desktop for glasses. But the responsiveness was crucial.
Getting to know both the user and the products
This research gave me a deeper understanding of the complexity of having eyesight issues and that contact lenses prescriptions from the opticians can contain rather difficult words and concepts for a common person to understand. I also realized that these customers knew what product they needed already. But they had other insecurities that we could meet in the now more visible menus.
Optimization of space
The fly in also optimized placement of important text higher up. The menu was designed wth modules that could multiply if needed. All product has different needs.
Rating and menu below
While doing research we found that a lot of users were insecure about how to shop online or how to get a recipe from an optician. I designed a menu next to the rating to make it easy to read more without having to scroll much further down (as on the previous design). This also created a possibility to test more content on the product page without making it look messy or difficult to navigate on.
Improvements in mobile
were all made as a grey menu with fly in function so that the users could easily find an interesting headline and read more. And then easily hide the fly in and be back close to the buttons.
Improvements in mobile
• Swipe on images and possibility to add more.
• sticky menu with the two ctas + name, price (and reduced price if campaign), stars above fold.
• ratings folded out in mobile and visible in desktop.
• A short summary of “about the product” visible to make the user understand what kind of content it will be before click in menu.
• Fly in menu.
• Work with colors on menus, symbols and information hierarchy to make it easier for the eye to sort content.
• The fill in presciptionmenu is displayed after click on “beställ” instead of before.
• more information that stills insecurities found in ux research with customer service.
Different states
When designing a product page for so many different varieties of states I had to keep in mind “what if”. What if:
• the product is out of stock
• it’s equal to another cheaper product
• sale if you buy multiple packages
• Product can’t be found and more.
All modules are constantly A/B tested and live-studied to see what works. As a designer, I learned a ton about the product but also about how it is to have a defect of vision. Insecurities to buy these kind of products online and what information is needed to feel secure.