case study: make.org home page

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.

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:

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:
users' pain points
Though most users seemed to behave as we wished they would, a significant part seemed to experience pain points, such as:

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:
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 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).
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.

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 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.


Overall, the user tests have validated most of our hypothesis:
The tests also inspired changes:
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.
Head back to home page