case study make.org: redesigning the home page
(q1 2020)
who is make.org?
Make.org is a French civic tech startup. We believe people have been distancing themselves from politics due to trust issues, but are willing to get involved in some other way. We try to trigger change by conducting general interest consultations (we've had consultations about violence against women, how to better take care of the elderly, how to be more inclusive of people with disabilities...).
People get a chance to submit their solutions and vote on other people's. Once thousands of people have given their opinion, our moderators gather the solutions that carry the same ideas, and our algorithm ranks the most popular and realistic ideas to determine the citizens' top priorities. Make.org and its partners then act on these priorities.
People get a chance to submit their solutions and vote on other people's. Once thousands of people have given their opinion, our moderators gather the solutions that carry the same ideas, and our algorithm ranks the most popular and realistic ideas to determine the citizens' top priorities. Make.org and its partners then act on these priorities.
why redesign the home page?
The previous home page (HP) had been there for more than a year when we started the redesign process. As with many other products, the HP does not play a central part in our user journey. About 90% of our paid users never get to this page, which means that's not where they chose to click for reassurance/more information about the company.
Yet, the HP does play a great part within and outside the company. Potential investors, partners and future users who have just heard or read about Make.org will land on this page and, as we all know, you don't get a second chance to make a first impression. That's also why many stakeholders within the company often insist on showcasing their projects on the HP, to better encourage partners or prospects to join us. ⟼ Through time, the HP had lost some of its editorial consistency.
The previous HP looked like this:
Yet, the HP does play a great part within and outside the company. Potential investors, partners and future users who have just heard or read about Make.org will land on this page and, as we all know, you don't get a second chance to make a first impression. That's also why many stakeholders within the company often insist on showcasing their projects on the HP, to better encourage partners or prospects to join us. ⟼ Through time, the HP had lost some of its editorial consistency.
The previous HP looked like this:
what were we trying to solve?
Dig into the data
First, we started by gathering all of the user feedbacks we had about this page, whether from emails users sent us on our generic contact address, feedbacks we had gotten from the commercial team, and (of course) feedbacks from the data. What didn't our users understand, how did they behave on this page?
How users used to behave
As aforementioned, people landing directly on the HP were only a small part of our users. But they were precious to the company because, according to the data, most of them had the best behavior we could dream of:
First, we started by gathering all of the user feedbacks we had about this page, whether from emails users sent us on our generic contact address, feedbacks we had gotten from the commercial team, and (of course) feedbacks from the data. What didn't our users understand, how did they behave on this page?
How users used to behave
As aforementioned, people landing directly on the HP were only a small part of our users. But they were precious to the company because, according to the data, most of them had the best behavior we could dream of:
- they had a higher sign-up rate (which meant we could contact them again to trigger another visit).
- they were more likely to submit proposals (which means they were part of the most engaged users, more likely to share content and ask their friends to vote for their proposals).
- they had a higher voting rate than the average paid user (which meant they engaged more with the product, even when they didn't sign-up).
users' pain points
Though most users seemed to behave as we wished they would, a significant part seemed to experience pain points, such as:
Though most users seemed to behave as we wished they would, a significant part seemed to experience pain points, such as:
- they found it difficult to really understand what the company actually did, who we really were and what we were trying to achieve.
- there was too much information (cognitive overload) ⟼ They didn't understand what was expected from them.
- the copy of the HP (and the whole product) wasn't user friendly. it was full of civic tech & internal jargon. e.g. we had some consultations branded as "great cause", others as "grand débat". People felt lost (and so were we).
figuring out the solution
First step: sending invites for whorkshops
To find out what we expected from the new HP, we organized workshops to share information and viewpoints. Design workshops are an amazing way for people in the company to speak their mind, get involved in the solution, but also to align visions. That's why, apart from the usual product, design and dev people, we always invite people from other departments of the company to attend these workshops.
Turning problems into opportunities with "How might we?"
The series of workshops for the new HP were introduced with Bénédicte, our Head of Product, summarizing the user feedbacks and data we had gathered. We gave each participant a stack of post-it notes and asked them to write down opportunities as Bénédicte was talking about the issues. The HMW exercise is an amazing tool to help people focus on solutions. Most HMW notes were gathered as follow:
To find out what we expected from the new HP, we organized workshops to share information and viewpoints. Design workshops are an amazing way for people in the company to speak their mind, get involved in the solution, but also to align visions. That's why, apart from the usual product, design and dev people, we always invite people from other departments of the company to attend these workshops.
Turning problems into opportunities with "How might we?"
The series of workshops for the new HP were introduced with Bénédicte, our Head of Product, summarizing the user feedbacks and data we had gathered. We gave each participant a stack of post-it notes and asked them to write down opportunities as Bénédicte was talking about the issues. The HMW exercise is an amazing tool to help people focus on solutions. Most HMW notes were gathered as follow:
- HMW better explain who we are?
- HMW better explain what is expected from the user/how she/he might help
- HMW improve our storytelling and explain what we expect from the user?
- HMW reduce the cognitive distractions (logos, colors and fonts)?
- HMW simplify how consultations are branded for the user to understand?
Crafting design solutions
Once we had a clear idea of what we were trying to solve, we asked our participants to browse the Internet for inspiration (maybe have a look at how competitors and other companies introduce themselves on their HP) and start sketching solutions on paper. They were allowed to focus on different sections or to sketch a whole page. Each of us showed her or his work and explained it so we could all debate.
These sketching activities are always quite fascinating since you really get into people's minds and get to understand how they think. It really provides a wide range of ideas on how to tackle the issues.
Anyway, we ended up with these conclusions:
Once we had a clear idea of what we were trying to solve, we asked our participants to browse the Internet for inspiration (maybe have a look at how competitors and other companies introduce themselves on their HP) and start sketching solutions on paper. They were allowed to focus on different sections or to sketch a whole page. Each of us showed her or his work and explained it so we could all debate.
These sketching activities are always quite fascinating since you really get into people's minds and get to understand how they think. It really provides a wide range of ideas on how to tackle the issues.
Anyway, we ended up with these conclusions:
- We needed to be more straightforward with the who we were and what we were doing
- We needed to simplify how we branded the consultations: the internal jargon was confusing and useless to our users
- Our news section, that was currently sitting on top of the HP needed to be better curated to show content that was meaningful to our first-time users (with time, anything and everything that was vaguely considered news ended up here, creating confusion)
- Consultation status needed to be clarified for the user (it's either open or closed, as opposed to what we currently had: consultations were closed but since we were still trying to turn some of the top priorities into actions, we artificially displayed the consultations as open)
- There was a great need to reassure and be more transparent with the users (displaying numbers related to our product and the consulations)
wireframes
Once we had a clear vision of what problems we were trying to solve and a set of solutions, it was time for the designers to start the wireframing process. We tried different solutions, iterated, discussed options with the product, dev teams and the executive team.
We ended up agreeing on one version (see below).
We ended up agreeing on one version (see below).
Better storytelling
The idea is to better tell our story. Instead of throwing too much information at the user and let her/him deal with it, we want to start by telling what we are doing (with some kind of high level, detail-free introduction) and why we are doing it. And the more the user scrolls, the more details are unveiled.
Reassurance
We then display some high numbers about how many million people have already used in our product. It aims at reassuring the user about how serious we are ("if so many people have been there, then it must be serious"), and also plays on social proof ("if so many people have taken part in this, then maybe I should too").
Big titles to guide the users
Every section has a BIG TITLE, which helps explain what's expected from the user.
Showing you the core value of the product
The section entitled "Votez et proposez" gives access to all the current consultations on the product: that's the core of our product. We gathered all the consultations, now matter who launched them, and dropped most of the branding surrounding the types of consultations. Our assumption was that it's meaningless to the user (at least at this level), and that people are attracted by a question or a topic, not the branding or who's behind them. The branding only adds unnecessary complexity and doesn't even encourage people to click. (Spoiler alert: we'll be checking that assumption during the user tests detailed below).
Offering a glimpse of what's coming after the consultation
If a user gets the big picture of what we're doing, that we're doing it thanks to millions of people through consultations, she/he will have understood the most important part of our message. Yet, we don't want to let them think we're just a consultation website, because we're actually more than that.
That's where the next section comes into play. It aims at giving an overview of the topics we're covering, and showing carefully curated news about how we're creating a concrete impact on society.
Launch a consultation on Make.org
The last section of the new HP is mainly targeting our BtoB audience, but also brings some information to our BtoC audience. We remind people that we're working with institutions, companies and associations on all of our projects, to bring a concrete change to the society, but also serve as a consultation plateform for third parties.
The idea is to better tell our story. Instead of throwing too much information at the user and let her/him deal with it, we want to start by telling what we are doing (with some kind of high level, detail-free introduction) and why we are doing it. And the more the user scrolls, the more details are unveiled.
Reassurance
We then display some high numbers about how many million people have already used in our product. It aims at reassuring the user about how serious we are ("if so many people have been there, then it must be serious"), and also plays on social proof ("if so many people have taken part in this, then maybe I should too").
Big titles to guide the users
Every section has a BIG TITLE, which helps explain what's expected from the user.
Showing you the core value of the product
The section entitled "Votez et proposez" gives access to all the current consultations on the product: that's the core of our product. We gathered all the consultations, now matter who launched them, and dropped most of the branding surrounding the types of consultations. Our assumption was that it's meaningless to the user (at least at this level), and that people are attracted by a question or a topic, not the branding or who's behind them. The branding only adds unnecessary complexity and doesn't even encourage people to click. (Spoiler alert: we'll be checking that assumption during the user tests detailed below).
Offering a glimpse of what's coming after the consultation
If a user gets the big picture of what we're doing, that we're doing it thanks to millions of people through consultations, she/he will have understood the most important part of our message. Yet, we don't want to let them think we're just a consultation website, because we're actually more than that.
That's where the next section comes into play. It aims at giving an overview of the topics we're covering, and showing carefully curated news about how we're creating a concrete impact on society.
Launch a consultation on Make.org
The last section of the new HP is mainly targeting our BtoB audience, but also brings some information to our BtoC audience. We remind people that we're working with institutions, companies and associations on all of our projects, to bring a concrete change to the society, but also serve as a consultation plateform for third parties.
ui + prototyping
Since what we tried to validate with this new HP was more about understanding and reassurance, we wanted the users to test a version of the HP that would look real, in order to get feedbacks that would be more accurate. So we worked on the UI of the page, remaining quite faithful to the current UI of the product, while bringing some major changes that would enable a better usability and accessibility.
user tests
The whole team was now aligned with the solution. It was time for a user test session to validate or invalidate our assumptions. Yosra, our design intern contacted people for user tests and Nicolas (the other designer) prepared the interview for the test. The assumptions/changes we were trying to validate:
- The new way of introducing the company, unveiling more and more details when the user scrolls, would offer a better understanding of who are and what we do. ⟼ We'd check this by asking the testers to give us a description of the company after each section and see if it was getting more and more precise.
- The numbers displayed on the HP would leave the user with an image of seriousness. ⟼ How did the testers react to these numbers?
- Gathering the consultations and simplifying the branding would help the user understand what she/he was watching. ⟼ Could she/he tell us what she/he was watching, what was going to happen if she/he clicked on a call to action button?
- The user would understand what was expected from her/him at each section, making them more likely to go further. ⟼ Was the copy explanatory enough?
- The user would understand that Make.org was covering a broad spectrum of topics and acted on them. ⟼ Could they describe what this section was about correctly? What did they think they would find when clicking on the cta buttons?
- The user would understand that Make.org was working with other entities and that they could launch consultations on the platform. ⟼ Could they explain what this section was about?
The user tests were held during the same week (quarantine made people available). 7 users tested the prototype. The testers were aged between 27 and 66 and had various occupations, ranging from retired psychologist, to teacher, civil servant or project manager. All tests were filmed and transcribed.
conclusion
Overall, the user tests have validated most of our hypothesis:
- The hero section was pretty effective. After reading the title and short description, people were able to describe the product accurately.
- The numbers did their job at reassuring people: judging by these numbers, the users gave an average 7/10 rating to the reliability of the company and felt they were "impressive" enough to trigger a participation.
- People didn't have any issue with the mixing of all the consultations. We kept just one consultation that was branded as a "great cause". People were intrigued but managed to give an explanation of what it might be (and the explanation was in fact what it really is)
The tests also inspired changes:
- We initially used the words "vote" and "proposals" (or "submit a proposal"). At this stage, several users were intrigued and felt a little bit lost, since they couldn't imagine what they were supposed to vote for or what a proposal was (the HP is indeed proposal-free). Questions were also raised about the difference between initiatives and consultations. ⟼ Copy improvements and consistency.
- The BtoB section at the bottom also made people confused. They understood it was aimed at partners and companies, but the copy obviously wasn't clear enough since people had a hard time explaining this part.
After the user tests, we also worked on our brand values and image, to convey a more consistent message through all of our communication. This work had an impact on the images we used in the hero section of the home page.