responsive designs

RIPPLE ENERGY - responsive website

The Challenge

The project objective was to create the first B2C responsive platform (Website, Account creation and Dashboard) which allows people to calculate their wind farm ownership based on their electricity demand, choose an affordable tariff with Ripple's supply partners and cooperatively own a wind farm with other members.

This also involved designing their MVP features, building the company Design System, deliver prototypes to show case features, user testing and overall optimization of the UX/UI design.

To comply with my non-disclosure agreement, I have omitted and obfuscated confidential information in this case study. All information in this case study is my own and does not necessarily reflect the views of Ripple Energy.
My Role

Solo Product Designer

In addition, I worked alongside a Brand Creative Lead, a Marketing Director, a Product Manager, a Graphic Designer and a Web Developer.

I was part of the ambitious project of designing Ripple Energy website

The website was launched globally on the 4th of November 2019.

Read the detailed - Full Case Study (pdf)

Tools

Whiteboard - Pen and Paper - Adobe XD

Wireframing
wireframes

Progressive iterations of the landing page from low-mid to high fidelity wireframing
Usability Testing

As a team we decided to:

  • collect data from Google Analytics and Hotjar;
  • conduct A/B tests and desirability testing with 5-7 participants for the website landing page.

We aimed to understand if the landing page was effectively communicating the intended message and improve the overall website usability, navigation and interaction, through capturing accurate data on user behaviours.

Insights

User testing helped us to validate our designs choices and prioritize further iterations to improve business and product targets. Our priorities focused on:

  • reinforce the benefits of joining Ripple Energy to increase user engagement;
  • clarify the different costs/payments to Ripple Energy and to the supply partner;
  • review and concise the content of the pages and improve UX.
For confidentiality reasons I have omitted the actual values for these metrics.
Final Designs
final designs
Key Changes
  • all the content was reviewed aiming to achieve clear and concise information;
  • font was changed to Montserrat to achieve better readability;
  • one unique UI design for the CTA button “Get a quote” to be easily identified by the user and trigger action;
  • specific and tailored FAQ’s were added to the end of the pages;
  • overall improvement of accessibility throughout the website was made;
  • UI design throughout the website was changed;
  • I created a Style Guide and a Design System.
Takeaways

It was great to be able to be part of the beginning of this project. It was a complete design and built from scratch.

Ripple Energy offers a unique product which on itself is very challenging. It was highly important to build a platform, as easy and pain-free as possible for the user whilst ensuring consistency across platforms.

It was a very enriching experience to build the first Design System of the company. This aimed to ensure consistency for the evergrowing product and significantly improve the team's efficiency.

I've learned a lot from this project by working alongside an experienced and diverse team. From establishing processes and ways of working, receiving feedback and making informed design decision to understand customer journeys that helped me to uncover new problems to solve and ultimately build a better product.

Read the detailed - Full Case Study (pdf)