Building templated lite sites
to reduce user friction

Outcome
01
Positive feedback & increase in engagement
  • Business objectives and goals were met with a 38% increase in customer engagement across the board with all partner lite sites
  • The development of the lite site resulted in a successful product launch with positive feedback from stakeholders
  • 1-3 day turnaround internally from design to staging once partnership is formed
Visit Live Sites
Contact Cart's Lite Site ↗Eiyan's Lite Site ↗Eyeconic's Lite Site ↗Waldo's Lite Site ↗
Context
02
Despite its clear advantages for both parties, why doesn't the return for Visibly and its partners match the volume of site visitors? 🤔
Forget prescription hassles. Visibly integrates with online eyewear retailers, allowing customers to seamlessly renew prescriptions within the shopping cart, boosting conversions and saving everyone time.
Info
03
Icon with 3 figures
Team
Product Designer (myself)
3 Engineers
QA Engineer
VP of Products
Icon of wand with sparkles
My Contribution
Wireframes
High-fidelity mock-ups
Branding Kit
Design Library
Icon of clock
Duration
2 months
(March - May 2023)
Icon of a delivery cart with a package
Deliverable
High-fidelity mock-ups
Disclaimer:
- Due to NDA restrictions, I am unable to disclose all visual details about my projects.
- All designs presented were either designed by myself or in collaboration with designers under my direction.
Previous Customer Journey
04
Time to understand our user's p.o.v.
Glasses or contacts wearers crave a refresh, but renewals can be a hassle. Visibly simplifies the process, transforming frustration into a convenient, at-home experience, but is this the case?
The Challenge
05
How can we... seamlessly transition user from the partners’ website to Visibly’s prescription renewal experience?
  • Amplify user engagement and boost conversions, particularly in the realm of virtual vision tests
  • Majority of the users are first-time users and the virtual vision test seamlessly surfaces when users need a prescription renewal during checkout with our partner retailers.
  • Transition from partner’s website to Visibly’s vision test is jarring and disorienting due to the change in visual design and branding
Storyboarding
06
What is the best case scenario?
In attempt to understand the user's experience, a storyboard is created to prove initial thoughts and assumptions of what the user needs, what the flow lacks, and where things could go wrong.

Alisha's browsing online to find a new pair of glasses to change things up

She comes across a great pair of black wayfairer glasses that she's been seeing and loving!

She adds it to her cart and is  excited for the new Alisha 😏

She's glad she doesn't need to go see her doctor to get her eyes checked again because her prescription is still great

What?!

Her prescription is expired?! No! She doesn't have time to go to the doctor or pay for another eye exam when her prescription works just fine!

What is this?

Renew prescription in 6 minutes? How 🤨 Let's see what this is about.

Woah! She can renew her prescription online right now with just her phone and laptop through this partnership? Let's do it!

Alisha gets all set up and takes the vision test right in her living room with just her laptop and phone

24 hours later, she receives a her renewed prescription in her email, and is ready to complete her order

Alisha is happy with her new glasses and happy to she didn't have to go to see her doctor.

The Lite Site
07
The Solution: A scalable templated lite site for all and future partners
Streamline renewals with the scalable templated lite sites. This ensures a smooth user experience while clearly showcasing the Visibly and partner brand partnership.
  • Empower our partners' user experience
  • Consistent and seamless transition from partners' website to Visibly's visions test
  • Swift solution that works across the board for current and future partners
Focus 1
Templated Responsive Design
  • Easy way to add vision test services into partners' platform
  • Quicker partner onboarding
  • Swifter turn around for the internal team
Lite Site page for Eiyan & Visibly, Contacts Cart & Visibly, Waldo & Visibly, and Eyeconic & Visibly
Focus 2
Seamless Transition
  • Clear indication of partnership with Visibly through logo in navigation bar and footer
  • Incorporating partners' branding and visual design to ease transition
Wireframe of Visibly's partner lite site with labels pointing to different areas of the wireframe that point out how incorporating partner's branding & visual design and clear indication of partnership with Visibly allows partner's users a seamless transition to Visibly's vision test
Focus 3
Empower user experience
  • Provide easy-to-consume context to prepare user for unconventional virtual vision test
  • Consistent call-to-action throughout page to reach business goals
Wireframe of Visibly's parter lite site with labels pointing to each section of the page: hero section, here's what you'll need, and here's how it works.
Retrospective
08
🔎 Identify type of users to helps pinpoint focus
Identifying type of users based on their experience level and goals help determine how to set the user up for success
🧑‍💻 Be mindful of engineers and their process
Understanding technical limitations up front streamlines the design process, allowing you and your team to brainstorm creative solutions and workarounds
🤝 Your job as a designer does not end once design handoffs to engineers are complete
If you want your designs to align exactly with how you designed them, you are very much a part of the QA process!
🌈 Curious questions become bridges, not walls
They open doors to learning and foster collaboration between stakeholders