FUTUREYES CONTACTS👁️

Building an ecommerce store from scratch

You're currently viewing Part 2: UX Writing & Content Design. Would you like to go to Part 1?

•    •    •

Project Overview

After finishing the user research for Futureyes and coming up with user personas, I moved on to bringing structure and substance to the product.

  • Product/CX Design: Writing a mission statement; defining product features; mapping a user journey for both first time and long time contact wearers
  • UX Writing: Creating a brand voice guide; writing website copy and microcopy (email sign up pop up, error message, 404 page); putting together a Copy Doc
  • Content Design: Mocking up two versions of the landing page and product page (including images, CTAs, copy, and possible layout design ideas)

Mission Statement

Futureyes is an ecommerce store where
anyone needing vision correcting or colored contacts
can go to get good quality, affordable brands that provide
comfortable, stylish solutions for their specific eye care needs.


Product Features

Product Features Overview

View all Product Features (Trello Invite Link)

Based on my vision and the user wants, needs, fears, and pains uncovered, I organized a list of product features in Trello. These were divided into the following categories:

  • Must have
  • Nice to have
  • Extras

I considered both tangible and intangible features of Futureyes contacts and the website as a whole, including style, function, experience, and quality.

While some of the features were difficult to place, I tried to imagine the minimum viable product vs. everything additional. What was essential? What did users expect from an online shopping experience for contacts? What would surprise or delight them?

Value Proposition

To help create a strong value proposition for the brand, I made sure Futureyes included some "nice to haves" (specifically the virtual try on, trial pairethnicity picker, and brand picker quiz). This was an important step because the user research showed the target audience was likely to embrace and appreciate these features.

What makes Futureyes attractive to customers is not only its affordability, but its attention to being inclusive, sparking curiosity, and educating anyone who wants to find out more.

Virtual Try On

64.7% of survey participants said this feature would increase their interest in colored contacts.

Free or Low Price Trial Pair

68.6% of survey participants said this feature would increase their interest in colored contacts.

Ethnicity Picker

The competitor analysis and user interview revealed that many brands feature White models, even though Asians and other groups show interest in colored contacts.

Brand Picker Quiz

From the conversation mining and user survey, it's clear that some people are unsure about choosing brands and don't know what type of contacts would be best for them.

Product Name Brainstorm

Since the user research showed that people are most interested in colored contacts that enhance their eye color, followed by ones that change their eye color, Futureyes will offer both. Like many other contact lens stores, we'll also be a distributor of popular brands.

To come up with a name for a product line, I brainstormed words that resonate with the brand image. After grouping ideas into themes, I started making pairs to represent color-enhancing vs. color-changing contacts. "Shine & Shade" was a perfect choice.

  • glow and shadow
  • bright and bold
  • shine and shade
  • soft and striking
  • enhance and darken
  • pure and vivid

User Journey

User Journey Overview

View User Journey Map (Whimsical)

To visually represent how website visitors might experience the Futureyes ecommerce store, I mapped out major interactions and possible emotions. Going through the Awareness, Consideration, Decision, and Purchasing stages, potential customers will make use of different product features before they finish shopping. 

Website Touchpoints:

  • Landing page
  • Search bar
  • Brand picker quiz
  • Chatbot or customer service
  • How-to or FAQ pages
  • Virtual try on
  • Ethnicity picker
  • Free or low price trial pair (email sign up)

I differentiated between first time colored contact lens wearers and people who're more comfortable with contacts by making two versions. Below, I describe the first version.

During the awareness and consideration stages, the user learns about contacts.

Then, the user gets to know their preferred products and decides what they want.

Finally, the user verifies their prescription and goes through the checkout process.


Brand Voice Guide

Brand Voice Guide Intro

View the Guide (Google Sheets)

Next, I decided on four voice characteristics for the Futureyes brand:

  • Credible & Conversational
  • Informative
  • Vibrant & Enthusiastic
  • Inclusive & Empowering

This brand voice reflects our core values, welcoming any type of customer to see, learn, do, and be more. I included what each characteristic should and shouldn't sound like.


Website Mockups & Copy Doc

Website Mockups Overview

View Landing Page & Pop Up (Figma)

View Product Page & 404 (Figma)

View Copy Doc (Google Sheets)

Armed with a brand mission, voice, and understanding of who the brand would be speaking to, I put together content and copy using Figma.

I made two versions of each main page and drafted microcopy in key places:

  • Landing page 
  • Product page 
  • 404 page 
  • Email sign up (pop up) 
  • Error message for mismatching right/left eye prescription
  • Drop down menu to filter customer reviews

In addition, I created a well-organized Copy Doc that tracks all the images, icons, text, and microcopy that appear on each page of the Futureyes website.

Landing Page

Above the fold

  • A large, bright image captures the customer's attention
  • A short blurb briefly introduces the brand and what we have to offer
  • CTAs emphasize the Virtual Try On and Trial Pair product features

Product introduction

  • Inclusive images show men and women of different backgrounds
  • Includes the brand tagline, "A new kind of accessory for all kinds of people"
  • Major user wants are captured by the copy (such as comfort, contacts that enhance or change eye color, and variety)

How to order & product benefits

  • Three step guide makes it easy to understand the ordering process
  • Customers can either "Browse Contacts" or "Take Brand Quiz" to find their best fit
  • Futureye's value proposition is clearly shown in 5 simple points 
  • Visual icons accompany the text and keep customers engaged

Trial pair

  • Since looking fake was a user fear, the copy incorporates the word "natural" 
  • Customers are invited to try a low price trial pair, which may help build trust with the brand, spread the word, and encourage them to come back for more
  • One CTA is de-emphasized to draw attention to the other

Customer reviews & footer

  • Customer reviews and ratings serve as great social proof for the brand
  • The reviewer's name, occupation, location, and profile picture add credibility
  • Social media icons in the footer give customers many ways to connect
  • All customer service and email sign up options are easy to see

Product Page

Product Images and Prescription Form

  • Product models include a diverse range of ethnicities
  • Header and subheader text above the prescription form guides customers to the next action
  • The total price is transparent and includes tax, instead of surprising the customer with added costs in the checkout process
  • Availability, Shipping, and Customer Service are clearly indicated

Product Detail Tabs

  • Customers get a quick overview of the brand as well as the specific product they're looking at
  • Tabs differentiate between different groups of information
  • Under "Color," people can see what effect the colored contacts will have on dark vs. light eyes (see image below)

Customer reviews with filter options

  • This design makes it easy for customers to see the Average Rating and Rating Distribution
  • Filter options include common key words and a drop down menu
  • Individuals reviews can be upvoted so it's clear how many people found a review helpful
  • "Verified purchase" under a reviewer's profile gives people peace of mind

Recommendations

  • Recommended products will pop up based on browsing trends and what people have been viewing
  • Red strikethroughs draw attention to price cuts
  • Brand name, color, and quantity are clearly displayed
  • "Shop Now" CTAs may create a sense of urgency

Microcopy Close-ups


Email Sign Up (Pop Up)

Triggered when customers scroll down the landing page

Version 1

Version 2

Rationale

  • Version 1 invites people to sign up to stay informed. Version 2 is more specific about benefits. It's clear that signing up by email will lead to a 20% off coupon or code.

  • Both the text above the form, as well as the placeholder text, use simple language to show the user what to do.

  • The CTA makes it obvious what will happen by clicking. Version 2 is slightly more ambiguous, but enthusiastic.

  • The opt out text doesn't shame visitors or make them feel bad. "I'm good, thanks" and "No, thank you" are both polite, conversational phrases for declining. No dark patterns here! 

  • The overlapping circles in the background match the design in the mockups.

404 Page

Rationale

  • To have some fun with this page, I replaced the zero in "404" with an eye icon.

  • We admit not being able to find the page, but use this as an opportunity to redirect customers and help them find their "perfect pair of contacts."

  • The placeholder text shows customers they can look for any brand, not just ours.

  • Customers are given multiple options for what to do next: return home, use the search bar, go back to shopping, try on contacts, or take the brand quiz.

Error Message

Pops up if right/left eye prescriptions don't match

Rationale

  • Since the BC (base curve) for contacts needs to be the same, this error message prevents customers from accidentally buying a mismatching pair.

  • The message gets straight to the point, making it clear what's wrong and how to fix the problem. I also remind the customer what numbers they input for each eye.
  • It's easy to confirm/exit out of the message using the "Got It" button.

  • Customers can get additional assistance by clicking "Get Help."

  • This message triggers red outlines around the relevant part of the form, so that customers know exactly which numbers they need to change.

Dropdown Menu

Another option to filter customer reviews on the product page

Rationale

  • The product page has many options for looking through customer reviews, one of them being a useful drop down menu.

  • "Most Recent" is the default option, but customers can also choose Most Helpful, Lowest Rated, Highest Rated, and reviews with Images Only.

  • The outlined box and down arrow make it clear this dropdown menu can be interacted with. As customers scroll through, the option they're on gets highlighted in gray.

Copy Testing

(In progress)

Testing Takeaways

While more sessions are to come, I've conducted remote testing with 4 individuals, showing the mockups above through Zoom. I asked participants to describe first impressions, feelings about the imagery, text, or language used, and had them tell me how they would complete tasks on each page.

Below are some patterns I've noticed so far.

Images

The majority felt the imagery was inclusive and diverse, which is one of the Futureyes brand values. However, it was assumed the target demographic was slightly younger (18-24) than what was intended (20s-30s). Since the images are coming from what's available on Unsplash and free sites, this is a limitation in curating the right feel.

Design

Words like minimalistic, clean, lots of white space, playful, and hipstery were used to describe the overall look and feel of the mockups. One person said they were reminded of an "interior design website." Futureyes is definitely going for this modern, youthful vibe.

Futureyes Brand

Some participants were initially confused as to what exactly "Futureyes Shine & Shade" was. They knew it was a colored contact product, but weren't sure if Shine was different from Shade. The landing page version that says "Enhance your eye color or change it completely with the Shine & Shade series" will probably work better at emphasizing that this is a line or series of contacts.

What I Learned

This project was a large undertaking, but helped me understand the steps of the design thinking process. I realized how difficult it is to translate user research into a real product that meets unique needs and expectations. Additionally, I was challenged by the conditions created by COVID-19, where interviews, feedback, and testing had to be done remotely.

I enjoyed combining my research, UX writing, and content design skills to imagine a brand and build up its digital presentation. I've learned the importance of testing (and more testing!) to ensure that both imagery and language make sense to people, but also portray the brand as intended.


Want to see the research behind these mockups? Check out Part 1.



Using Format