Co-investir, redesign of a website — UX case study
As the band ABBA said, this project is about “Money, money, money”.People are comfortable with singing money but have more difficulty to talk about it and to manage it well.
The Project
👤 — The client
Co-investir is a startup created in April 2020 and which appeared on Facebook. The mission of these founders is to make stock market investments accessible to everyone.
For that it proposes 3 different things:
- A training to learn how to invest your money in the stock market with online courses and a masterclass
- A toolbox to help you select the right investments
- A community ( located on Facebook) to exchange, share, and participate in workshops.
📍 — Problem
If co-investir called UX designers it is because on the website, the founders are pretty satisfied with the content of the training courses and the Toolbox, but they want to improve the onboarding process, and the user flow to access the Toolbox.
👥 — Our role
To bring a solution to the problems we were a team of Two UX designers : Kevin and I. It was our first collaboration together. We had 15 days to complete this project.
Empathize
As neither of us had a financial background, we started this project by studying the data provided to us by CO-Investir and by doing our research.
🔍 — Secondary research
We found that :
- One third of the French population is interested in stock market investments.
- 53% of french people think that investing in the stock market is complex.
- 45% of french people think they have a lack of financial education.
- And due to the context in 2020, it is estimated that 400,000 more people would have invested in the stock. (This means that co-investir have at least 400,000 potential users.)
📝 — Survey
To know more about the users and their relation with the stock market , we conducted a survey post via Google form which allows us to collect 60 answers.
We have retained 2 pieces of information:
- 80% of the people who invest consider that they have a beginner’s level
- 50% of the people interested in the stock market but who did not invest yet would like to be guided in their steps
Heuristic evaluation
In parallel to the launch of the survey, we conducted a heuristic analysis of the Co-Investor website. This analysis allowed us to build the following table.
Users insights
To better understand the needs of its users we interviewed them.
We find that the The main reason to invest is to optimize their investment
Also, They invest because of the challenge, they want to learn a new field, and to manage their own money
We also did usability testing. We have both users who knew co-investir via facebook, and people who did not know co-invest at all.
The main returns involved:
That the website did not provide a good understanding of the concept of co-investir:
“ The two main reasons for the site are too low in the page”
The community was not highlighted for user who are not coming from facebook were missed this part:
«I don’t understand where the community is »
The lack of presentation of who is co-investir causes a feeling of insecurity:
«To create confidence it is necessary to advance with an open face »
Then, we gathered all the information collected by making an affinity diagram, and we proceeded to a dot vote to select three categories :
- Trust
- Message
- Concept
Define
👤 — Persona
Then, we have created our persona of the typical user: Marc.
He is in his Early 30’s. His income is between 35 000 -50 000 euro per year. He’s looking to learn easily about the stock market. And he Likes the challenge of it all. About his frustrations, he wants to be guide in his investments.
🗺 — User journey map
To localize our design opportunities We retraced Marc’s journey when he first come on Co-investir
The journey begins with the discovery of the site. And Quickly the first design opportunities appear because, he have difficulties to understand what Co-investir offers and to whom :
« The site is aimed at beginners but there is already specific vocabulary in the home page »
Then the second design opportunity is when he goes to create an account. At this time he feels that the website has a lack of security. He is not asked to check his email:
« We manage our money with it, we don’t feel we can trust this website »
And our third design opportunities appears when he arrives on the trainings page and as he said:
“He would like to be guide “
❓ — HMW
This three pain points allowed us to formulate our HWM :
HMW promote the co-investir community so that the newcomer feels confident?
HMW guide the user during the registration process so that he selects the most appropriate course according to his/her profile?
HMW make the concept of co-investir more understandable and attractive when they arrive on the site?
With this three how might that we start to re-design CO-investir.
🧠 — Ideation
To answer his problems we have ideate. As our role was not to create a new solution but to localize the problems, and improve the user experience we made a worst idea, and a crazy eight to find the solutions.
We decided that it was necessary to add a presentation page on the homepage, to reassure. Also, by highlighting the Facebook community on the site, which is composed of active users on the group, we thought that this could also be reassuring.
We also need to personalize the offer proposed for the needs of users, and for that we wanted to put a profiling via a small questionnaire.
Finally we did a brainstorming of Ux writing to adapt the speech and the tone of the speech to clarify the concept of co-investing.
Information architecture
Sitemap
Before starting to elaborate our wireframes, we worked on the construction of the sitemap of the site. We wanted to create a site with a very simple navigation. Our first version was composed by the home page which explains the principle of co-investing and gives access to the about page, and the page with the explanation of the different subscriptions that Co-Investir offers. You can also create an account or log in to access the training content, the community, the toolbox, and the profile page.
User flow
This allowed us to build the user flow below.
This allowed us to build the user flow below. It represents the path used to create a profile, and proposes a personalized offer according to its knowledge in stock market investment.
This is a way to feel more guided to start training.
Mid-fi prototype and user testing
Using the information from the architecture and our research, we created our mid-di prototype and showed it to our clients and had them test it.
For SEO reasons the community page, which we wanted to reserve for registered users, had to be moved to the home page. Also, the customization that we want to implement was for the web developer too technical to implement.
The path proposed to the user was to navigate the homepage to understand what service Co-Invest was offering, then create an account and sign up for a course.
The main feedback we had was :
- the homepage which was always too long
- The tone was “pretentious” (for example: “Apprendre la bourse “ = “Learn the stock market”)
- And the table that we proposed for the different types of subscriptions was not clear enough.
UI
Brand attributes
After iterating, we started the UI phase.
We select three word that embody Co-Investir :
- Trust (very importante in the financial world)
- Learning (The purpose of co-investing)
- Community (this represents the DNA of co-investing and makes the proposed service out of the ordinary)
Moodboard
Based on his words we have put together our Moodboard
Trust is represented by the handshake. We find the community with the rowing, and the fists, and the learning with the classroom, and the man on his computer. We also added textures for the fintech side. We had a constraint concerning the UI; the founders wanted blue, hence its presence on the moodboard.
Style tile
In order to elaborate our High-fi, we made a tile style with the different elements we want to incorporate in the site. We wanted to keep the design simple to represent trust, while adding color and rounded shapes for the community spirit. Also, we played on a light gradient from blue to purple for the fintech side.
High-Fi prototype
To make the concept of Co-investing understandable we have created these three cards to explain the concept simply.
In order to provide personalized content, we have developed this screen which allows you to select the most suitable formulas according to your profile.
This table is what we have designed to subscribe to subscriptions.
We have simplified onboarding:
We have emphasized the presence of the community on the homepage, and the use of blue can also be seen as a reminder to Facebook where the community is actually located.
Below is the link to access our entire prototype.
Next-steps
The next steps would be to do a new serie of test and iterate. We can also do desirability testing.
Concerning the site, after having looked at the onboarding, we could focus more on the logger part of the site and the toolbox.
Thanks a lot for reading me !
