Hero program


A case study researching and creating a solution for Renovate America and Hero program site that would be more effective for users

and get better customer conversion/sales in their lead generation funnel.


1. UX heuristic expert review/audit

With a usability expert review, I evaluate a product or website’s usability against a set of principles or best practice guidelines. Expert reviews are popular, quicker and cheaper to carry out than a usability test, particularly when working on an existing product. I use a research-based set of guidelines based firstly on the BS ENISO 9241-110: Ergonomics of human-system interaction – Part 110 and the Jakob Neilsen’s ten usability heuristics. This resulted in a measured empirical analysis of the findings and the effects it had on the overall UX score of the site, enabling an informed data-driven decision on what was a priority to tackle.

Some UX review findings:


There was no search function, No about us and nothing to explain on the site how the program worked upfront, users were expected to call.

Social side doors

Users coming to the site via social media channels referencing certain articles, have no fixed nav to introduction or sales funnel except they navigate to the home page. A lot of these social side door users might feel frustrated with this and leave.


No clear privacy assurance. The forms did not autosave user input, so all inputted data disappears when the user clicks away, without any warning. If a user got confused or tried to abandon the form, there was no help prompt, such as a chat that offered any assistance. The site would not accept pre-populated data, but never indicates it, it just says something is wrong. Obviously, this is done to reduce inputting wrong data, but for those whose prefilled data are correct and/or want to save time by inputting prefilled data, this lack of accurate feedback on what exactly is wrong becomes a source of resistance and frustration for the user.

Value Proposition

There are no fact and figures at the start that would help a user understand the value proposition. It seems one has to dig really deep or call before seeing an example of what can be saved in terms of figures

Navigation and information architecture

The site did not display all the steps that needed to be completed during application. It also did not give feedback or awareness on the user’s current position in the follow. Users were not able to sort and filter the catalogue pages according to price, popular etc

Help, feedback, error tolerance

The chat feature was not preemptive, easy to overlook. This was not too helpful for users who couldn’t call.

Social proof, trust and credibility

It’s not easy to see the bios and pictures of the people/professionals behind it. There are no realistic product reviews; we all know life is never perfect, so a mix of varying excellent, good and fair reviews would show more credibility.

2. Persona creation through ethnographic research

My qualitative research highlighted enough data, which I used for an affinity map. This enabled one to clearly see how the app was used and what the key user requirements were, and also allowed the identifying of some pain points for the user.

I created filters based on demographics and psychographics to determine who to observe and talk to and who not to.

I used google trends to collate demographic data and users from usertesting.com and optimal sort subscription services to get data for my research. I also did some guerilla face to face testing with local acquaintances who fitted the persona.

  1. Found patterns in the interviewees’ responses and actions, and used them to group similar people together.
  2. Established archetypical models of those groups, based on the patterns found.
  3. Resulted in three user groups( persona types) that helped with  the information architecture and mental modeling

3. Affinity diagrams, Journey maps and Emotional maps creation

Three-Step Decision Framework

Before beginning the mapping effort (regardless of the type), I considered 3 decisions as described by Nelson of NNgroup:

a. Current (as-is) vs. future (to-be)

This decision involves the actions and states depicted in the visualization: do they reflect the current state of the world or a desired state of the world?

  • Current mappings are based on an actual “today” state of what you are mapping. This approach is ideal when the mapping goal is to identify and document existing problems and pain points. I used current state maps to help analyze the current issues and align the team around a data validated problem.
b. Hypothesis vs. research

This decision depends on the type of input that you will use to build your mapping.

  • I decided on Research mapping as I had actual user data gathered specifically for building the map. This approach did take a while to compile the data. Although I was able to considerably reduce that time by using tools like Optimalsort which allowed for fast remote assessments
c. Low-fidelity vs. high-fidelity
  • I went for high fidelity as a lot of the tools afforded the ability to get quick detailed data.

Affinity diagrams

Journey maps + Emotional maps

4. Card sorting

performed remotely using optimalsort spread across three personas (35 remote partcipants) to discover the information architecture and mental model of the users

5. Dendrogram

were one of the analysis tools used on data from the card sorting exercise, to build the information architecture tailored to each of the three user types

6. Mental models

I used data from the interviews, personas, dendrogram and card sorting to build a mental model chart

7.  Red route analysis

enabled me to determine the most important route or task a user would want to achieve in the app. This would greatly affect the information architecture on what should be front and center, based on actual user actions rather than designer assumptions.

8. Competition analysis

All competitors sites analysis indicates a norm that showed users approximately how much they would be saving with each program

9. Historical AB testing of similar UI patterns

From data collected so far, there seemed to be a consistent need for an upfront calculation of possible savings and so I checked for any previous tests with similar UI patterns and it’s success rates.

Version A

Version B

Version B was successful, with a loan cost calculator(slider), causing 19% more visitors to fill out a lead generation form.  It was  a great idea to test which site’s multiple offers UI pattern should be front and center.  Also, it’s one of several tests we’ve seen that show visitors are often interested in getting pricing information far higher up the conversion funnel than is typically revealed to them


This is a unique website which will require a more modern browser to work!

Please upgrade today!