How Familiarity in the User Journey Increases Conversion Rate
98% of Users don’t Convert
Filmera, a film photography e-commerce platform, is experiencing low conversion rate. The high abandon rate during the browsing stage and low purchase rate at the check out stage of e-commerce result in low revenue.
Lack of Trust and Confirmation
With too many options and limited professionally verified information, users feel indecisive about the choices they make in every stage of the shopping experience, thus they delay or abandon the purchase.
Familiarity Helps Users Make Decisions Quicker
The deliverable product leads users to a familiar path and helps them make decisions with visual intuition by integrating their shopping journey with the phone camera. Users can then make choices quickly, which leads to higher conversion rate.
Sige Zheng
UX/UI Designer
Responsibilities: Research, User Flow, Interaction Design, Branding, Sketching, Prototyping & Testing
Duration: 5 Weeks
Design Tools: Miro, Figma, InVision, Marvel, Google Suite
Approach: Lean
Platform: Mobile App
98% of Users don’t Convert
The high abandon rate during the browsing stage and low purchase rate at the check out stage of e-commerce result in low revenue.
Lack of Trust and Confirmation
With too many options and limited professionally verified information, users feel indecisive about the choices they make in every stage of the shopping experience, thus they delay or abandon the purchase.
Familiarity Helps Users Make Decisions Quicker
The deliverable product leads users to a familiar path and helps them make decisions with visual intuition by integrating their shopping journey with the phone camera. Users can then make choices quickly, which leads to higher conversion rate.
Sige Zheng
UX/UI Designer
Responsibilities: Research, User Flow, Interaction Design, Branding, Sketching, Prototyping & Testing
Design Tools: Miro, Figma, InVision, Marvel, Google Suite
Duration: 5 Weeks
Approach: Lean
Sige Zheng
UX/UI Designer
Responsibilities: Research, User Flow, Interaction Design, Branding, Sketching, Prototyping & Testing
Design Tools: Miro, Figma, InVision, Marvel, Google Suite
Duration: 5 Weeks
Approach: Lean
Higher Price, Harder Choice
A 5-15% film photography price increase in 2020 has made making purchase decisions even harder.
Alison is a freelance photographer transitioning from digital to film photography because of the increase of interest in analog photos from her clients. However, she’s unsure what equipment and film to buy.
Alison has decent knowledge about digital photography equipment and is serious about pursuing further the art of film photography. She wants her purchase to be worth the money and can be used for a wide range of clients.
How Might We Help Alison Feel Confident in Her Purchase?
Over 60% of E-Commerce Traffic Happens on Mobile Browsing
Mobile browsing lays at the center of e-commerce platforms. More than 53% of sales happen on mobile platforms. Yet, why don't users convert?
The three top reasons of why users abandon e-commerce sites are:
- Lack of professionalism of the site
- Unclear call to action
- Distrust towards the vendor
The three top reasons for cart abandonment during checkout are:
- 49% of users abandon because of extra cost
- 24% for account creation
- 30% for dissatisfaction with shipping and return
(Baymard Institute, 2021, source)
Can a mobile experience with flexible shipping and return options at no extra cost or account creation help Alison feel confident about her purchase?
Excessive Choices Lead to Site Abandonment not Commitment
Without knowing what she wants, Alison finds it hard to make choices from the beginning.
Multiple Quick Accesses Bring Hesitation
Alison can’t see a clear route to follow on the home page because there are too many choices. Because she feels hesitant even before clicking on any buttons, she stays uncertain for the rest of the purchase experience.
(click to enlarge)
Social Proof Neglects Personalization
As Alison seeks equipment that fits her own needs, it’s unlikely for her to make choices based on popularity. The “3 top seller sets” section isn’t of interest to her. Social proof fails to breed trust for Alison here.
(click to enlarge)
By looking at Alison’s shopping journey, we learned that with too many options and not enough professionally verified information, Alison feels indecisive about the choices she makes in every stage of the shopping experience, thus she delays or abandons the purchase.
Alison’s Emotion Drops During Discovery Stage
(click to enlarge)
(click to enlarge)
From testing the first solution with 5 potential users (see prototype), we found that:
- Though users get excited looking at the home page, they find it hard to choose where to start and hesitate to proceed with their shopping journey because of the multiple quick access choices.
- At the browsing stage, users looks back and forth between different products without adding anything to the cart.
- Users don’t look at the “3 Top Seller Set” section thinking it may be too generalized and not suitable for their personal needs.
As home page with multiple quick accesses doesn’t work, we want to look at if a single route user journey from the discovery stage can help Alison feel confident to move forward.
User Flow with Multiple Quick Accesses Doesn’t Work
The original user flow gives Alison too many options at the beginning. To keep Alison focused, we proceed with the new flow where Alison can personalize her camera set with both her existing knowledge and the professional recommendations on site by picking the camera body first, choosing compatible lenses accordingly, and finding compatible films at the end.
Original User Flow to New User Flow
(click to enlarge)
(click to enlarge)
Following the new user flow, we created sketches and a paper prototype to test on 5 more users. Next, let’s look at what worked and what didn’t.
Lack of Visual Guidance Hinders Conversion
Alison can navigating through the set-building process but can’t decide on which lens or film to choose.
According to our user testings, users finds the “body - lens - film” flow easy to follow. They are pleased that they can evaluate and choose each camera part according to their needs. However, users go back and forth comparing products in the same category. T especially hesitant when introduced to multiple camera lenses and films on browsing page.
Hard to Make Choices through Browsing
Like many e-commerce sites, the current browsing stage shows users several options at the same time. Users find it hard to distinguish which product fits their needs the best.
Having to go back and forth several times to compare different camera body, lens, and film prolongs users' shopping process, and hinders their commitment to continuing the purchase.
(click to enlarge)
The new user flow of a single route is successfully at leading Alison directly to the product while giving her context of the general process they would go through for building a set. Next we want to see if giving Alison more visual guidance would help her feel confident in making decisions.
Imitating the Phone Camera Interface and Interactions
Making a visual impact by utilizing Alison’s phone camera can help her make comparisons and decisions.
Imitate Different Focal Lengths with the Phone Camera Zoom Function
The lens finding page adopts the look of the phone camera interface. By connecting the concept of focal length with the “zoom” function, we provide users with previewed frames of different lenses through instant images on her phone camera.
To filter lenses by focal lengths, users perform similar interactions as to how they'd use their phone camera - to zoom in and out or slide the focal length bar.
(click to see video)
Choose Film with Live Photo Filter
We ask users to take two photos with their phone, and compare the look of the two films side by side by swiping through various film options. Like applying filters, the look of the photos gets modified with Filmera’s analog film database.
This new method allows users to see the look of the film directly next to the real object she just captured, so she can easily make a purchase decision according to their likings.
(click to see video)
Filmera - Preview Your Camera Set
Though having some trouble comparing camera bodies, Alison purchases a set with the lens and film she likes.
After making the new iterations, we tested the high fidelity design with 5 more users (see prototype).
Users get to the camera body browsing page and clicks on the product card to check product details. They try to compare products but is confused by the “drag to compare” interaction. They clicks on “Find Lens”.
Knowing what focal length they uses the most, users find the preview frame a confirmation to their knowledge. They check out the product detail page and find the professional review video on the product page helpful. They scan through the rest of the page and proceeds to find a film.
Users take two photos to enter the film browsing page. They scroll through different film options. After they realize the look of the images is changing, they click on the top and bottom groups to switch and select their two favorite looks to compare. Users find it hard to retake one of the two photos used. But they decide on the look they likes quickly and add the film to the cart without checking out the detailed product page. They then make the purchase.
Conclusion
In this project, we approached Filmera’s low conversion rate problem with an innovative method. Through several iterations, the final product adapts Alison’s familiarity with her phone camera and the use of filter, hence transferring her existing knowledge smoothly into a confident purchase. We learned that:
- Too many choices brings hesitation.
- A constructive direction decreases user abandon rate.
- Customized product generates trust.
- Visualization of the product breeds confidence in users’ decision-making.
What’s More and What’s Next?
As we iterated the user browsing flow to increase conversion rate, we also worked on the product detail page to integrate visual storytelling while presenting product information. With clear CTA buttons across the page, Alison can proceed forward with her shopping process easily.
The current Filmera user flow allows Alison to compare some aspects of lenses and film looks directly on the screen. However, Alison is having trouble accessing the more technological comparison results for camera bodies and lenses. For the next step, we want to iterate and optimize the user flow and interaction for making detailed comparisons between products, so Alison can make a quicker decision without checking several camera body detail pages. The less time it takes for Alison to feel confident in making a decision, the more likely she would complete her purchase in one go.
After the Beta launch of the product, we want to keep track of the quantitative data to help us find room for potential improvement, so we can further reduce the abandon rate in any part of the user flow.
