Ynergie - Web App Design

The contexte

Ynergie is a company specialized in energy renovation for individuals. Ynergie had contacted my company in order to evolve its vision and business strategy and to offer new services. To this end, a total of 9 sprints were sold to the client in order to accompany them in the construction of a B2C web app and the redesign of their website. I intervened as a reinforcement during the sprint 3 & 4 to accompany the design team in the realization of the desktop models of the web app and the realization of user tests on the mobile version.

⛳

Objectives Build a B2C web app

📬

The missions ✔️ Monitoring of best practices in terms of user experience ✔️ Facilitate the management and tracking of customer work sites within the web app. ✔️ Design of the interface of the web app desktop version ✔️ Conduct usability testing ✔️ Powering the design system ✔️ PO reviews

👥

Project Team (Intern) 1 Business Ambassador, 1 Business Visionary, 1 Tribe Master, 1 Squad Master, 1 PO, 1 CRM Manager, 3 Growth Hacker, 1 Tech Lead, 1 Lead designer, 2 Prd, 5 Dev ( 1 intégrateur, 1 Dev Back, 1 Dev Front, 1 Dev Full Stack)

👨‍💼

Stakeholders (Customer) 1 Sponsor, 1 Business visionary

🏃🏿‍♀️

Sprint 2 weeks

Project Planning

🏃

Sprint 1 - Realization of the desktop models of the web app - Realization of user tests on the mobile version of the web app - Feeding the design system - Analysis and recommendation - Presentation of the results to the client - PO reviews 📦 Expected deliverables: mock-ups, design system, synthesis & recommendations ppt, tickets po reviews (jira)

🏃

Sprint 2 - Research of best practices in terms of user experience when using toast - PO reviews 📦 Expected deliverables: synthesis & recommendation ppt, ticket po review (jira)

Step 1 : Understand

I was asked to intervene on the Ynergie project in order to help the design team which had difficulty in meeting the production deadlines. I first inquired about the services offered by the customer and then I was interested in the organization of the internal product team. I then consulted the backlog and the roadmap to understand my scope of intervention. I then discussed with the designers to understand what had been done, what they expected from me and how their design system was structured.

‣

Learn more about the actors involved in the services offered by Ynergie

✅

After this first analysis, I had a better knowledge of the services offered by the client, I knew my scope of intervention and was able to work with the design team.

Step 2 : Prototyping

After having taken knowledge of the perimeter on which I had to intervene on the desktop version of the web app I went to the prototyping on figma.

I had to intervene on 2 key steps of the journey:

The pre-diagnosis step of the renovation project: the moment when the user connects for the first time on the web app to create his account
The diagnosis step of the renovation project: the moment when the user consults the details of his project after having filled in the information about his project online or by phone.

Here are some screens symbolizing the key moments of the project:

Pré-Diagnosis Step

Password creation page after receiving the email during the pre-diagnosis stage

Diagnosis Step

Page of monitoring of its housing, work and financing

Design system

✅

At the end of the sprint a desktop version of the web app was delivered

Step 3 : Review PO

The PO review consisted in helping the PO to give feedback on the integration of the models developed on Figma and to keep the developers informed of updates in Jira tickets.

PO Review on the B2C site mock-ups

Step 4: User testing

I participated in remote user testing sessions with end-users in order to evaluate the usability of mock-ups that had been made during previous sprints.

✅

Working in sprint allowed us to test every features with our users. It helped us validate our delivery and reassured the customer that we keep a user-centric approach during the construction of the mvp.

Step 5: Monitoring of best practices in terms of user experience

My lead designer informed me that the developers had started to integrate toasts all over the application to replace the error messages. She asked me to do some best practice monitoring to see when toasts should be used to guide the teams on the do's and don'ts.

‣

Toasts

✅

At the end of my watch I presented the results of my research to the client and the product team in order to set up guidelines on what to do and what not to do.

Where are we today ?

🚀

The project is now in its 9th iteration, the new B2C site has been launched, you can discover it here and the web app is still under development.

Win Working in a large product team with an agile organization is very interesting because the models are quickly put into production and the many agile rituals allow for effective communication.

Frustration

The PO Review and user tests were not sufficiently taken into account in the project organization, which made it difficult for the designers to meet deadlines.