← Back to works

🏠 Ynergie - Web App Design

Ynergie

Product DesignUx DesignUi DesignTestingSprintUX ResearchWeb AppTestScrumB2C
📌

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.

⏱️
Contract
1 month
🧑‍💻
Team
1 PO, 1 CRM Manager, 3 Growth Hackers, 3 Product Designers, 6 Devs
🌐
Product
WebApp
👨‍💼
Stakeholders (Customer)
1 Sponsor, 1 Business visionary
⛳
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
    • Mission 1 : Understand

    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)

    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

    Ynergie is organized in the following way, it has main, secondary external and internal actors.

    Main actors

  • B2C customer: Individual owner of an individual house, wishing to carry out energy renovation work (small works/breaks, partial or global renovation)
  • Accompanying project leader : Ynergie project manager dedicated to the client and his project from A to Z

    • Secondary (internal) actors

  • Ynergie solution : Sales person in charge of collecting the mandates and getting the quotes signed
  • Ynergie Opération : Technical center in charge of making estimates and purchasing materials
  • Ynergie Valorisation : Applying for and obtaining financial support for various projects
  • Ynergie Groupe : Accountant in charge of paying the artisans and doing the bank reconciliation in the closing phase

    • Secondary (external) actors

  • Craftsman: Carries out the implementation / the work
  • Vehicle partner (business): Partner supporting energy renovation using the Ynergie device
  • Convenience/auditor partner: External partner with business expertise, needing to log in to upload key files for project progress
    • ✅
    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.
    Mission 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.

    • Pré-Diagnosis Step

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

    Diagnosis Step

    Page of monitoring of its housing, work and financing
    Page of monitoring of its housing, work and financing
    Design system
    Design system
    ✅
    At the end of the sprint a desktop version of the web app was delivered
    Mission 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
    PO Review on the B2C site mock-ups
    Mission 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.
    Mission 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

    Toasts are short, temporary notifications with simple messages and low priority alerts

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

    Key Results

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

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

    Process constraints

    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.