Yevheniia

Competitor Analysis

Website Analysis

The heuristic evaluation showed:

• the purpose of the website is not clear enough for users
• current website design is not visual compeling and quiet outdated
• there are some inconsistency in fonts, colors scheme, and content representation
• overwhelming amount of information for users to read
• there is no search feature

Proto Persona

Affinity Map

I like, I wish, What if Method

Feature Prioritization Matrix

Affinity Diagram and “I like I wish What if” method helped us to prioritize and improve the main features:

• Enhance Donation Feature
• Simplify Request Fence form
• Faster way to volunteer sign-up

User Research

Survey Results

Key Findings:

• The majority are dog owners
• The majority thought the purpose of FFF was to learn about the organization
• Users would be more motivated to donate if the process was more convenient

User Persona

User Insight Statement

Shajiah is passionate about dogs and willing to make a donation to Fences for Fido. She also wants to request a fence for a neighbor who has a dog chained up outside.

How might we redesign the FFF website to help Shajiah have a seamless, efficient experience navigating the website and achieving her goals.

Problem Statement

The Fences for Fido website's content is not optimal to support the organization's business goals: increasing the number donations, volunteers, fence/care requests while raising general brand awareness.

In particular the Make a Donation, Volunteers Sign-Up, and Fence Request features of the website do not contain a clear call to action. Added to that, the design of the features does not promote trust. All of this results in the mediocre conversion rate.

Value Proposition Statement

To support the FFF mission in improving the overall quality of life for dogs living outdoors, the new design aims at optimizing user’s experience, driving online donations, volunteer signups, merch sales, and face/care requests while increasing brand awareness.

Empathy Map

Storyboard

Card Sorting. Part 1

• There was some redundancy in a menu
• Lots of reading was required on a current website
• Information was in places where users did not expect to find it

Card Sorting. Definition Part

• Information sorted grouped and organized
• Navigation structure simplified
• All the essential features will be navigated through the main menu

Site Map

User Flow

• Donation flow has more payment options
• Each payment option was designed for seamless user experience
• We also added the “Request the Fence” flow with a simplified form (not displayed on the diagram)

User Journey Map

Paper Prototype

Considering all previous work we built mobile paper prototype first and then went to Lo-Fi prototype where we decided to show the Donation Flow. The main goal was to give user a good choice of payment options.

Also, we wanted to create fast, convenient and trust-forming experience.

Lo-Fi Prototype

From Scratch to Lo-Fi Desktop Prototype

Lo-Fi Testing

Learnings:

• Check the progress bar
• Add one more flow
• Being able to change the donation amount
• Check PayPal payment option flows

Lo-Fi testing led to the next iteration:

• The progress bar was fixed
• The PayPal flow was improved
• The Request a Fence flow was build - which is also a core features on the website.

2x2 Prioritization Matrix Lo-Fi Prototype Test Results

UI Style Tile

• Colors selected are based on the current branding
• New colors were added to a style tile to create brightness and add some grounding to the overall look and feel
• For the fonts, we wanted to communicate the playfulness and fun of the Fences for Fido mission and help people feel good when they visited the site
• We also created a new logo based on the updated color story and rebranding that inherited the elements of the old logo (the circle, dog, triple lines, name)

UI Style Guide

Hi-Fi Prototype

After that we came up with Hi-Fi Mobile prototype where two flows were built.

• The Donation flow now looks cleaner, it has very few simple steps but offers a variety of the most popular payment options.
• We reworked the Request fence flow to be as simple as possible and asking the most necessary information only.

A/B Testing

Than we came up with two different navigation designs and desided to conduct A/B testing

• The mobile version of the website designed to look and feel like a mobile application
• The Header and Footer contains core navigation
• The hamburger menu appears as a list of options

Performance of test B was on 25% higher than Test A.

Plan for the nex iteration:

• Simplify “Request a Fence” page
• Make mobile buttons larger
• Tie up dead ends

Hi-Fi Prototype

Iterations were implemented in Hi-fi Mobile and Desktop Prototypes

• Minimalistic Design was applied
• The amount of information was reduced for better consumption
• The main mobile navigation lies on a hamburger menu. Primary desktop navigation - on header and footer
• Social Media links were replaced at the bottom
• Call to actions buttons are notable
• All buttons have hover states. Micro-interactions were added on a search bar, hamburger menu, tools, “dogs” components
• The Interface is User-friendly

Final Thoughts & Next Steps

Plans for future iterations:

• Improve navigation
• Build adoption, med care and a volunteer sign up flows
• Enhance merchandise feature
• Present our redesigned website to stakeholders

What we have learned:

• We realized that Initial research is a key to success it is important to talk to business owners to know their pain points and needs. It takes a lot of time and iterations to learn a business domain in details.
• I found it challenging to build a PayPal payment flow that exactly matches the actual one. To learn how it works I went to the fashion retail website. It ended up being a funny story when I accidentally ordered a dress there. My husband still thinks that I did it on purpose. Anyway, I like my dress as much as our new Donation Flow.
• We have learnt that Mobile First design has its benefits because it is easier to expand elements and components than collapse them. Last but not least I want to express my appreciation to my teammates for being supportive, flexible and collaborative despite the Christmas time.
• We hope that our project will be implemented in real life and will help to improve the lives of dogs