Sonce — Vikilas

Webpage redesign to increase engagement and conversion

Company: Sonce
My role: Visual & UX Design
Date: 2018

Sonce is one of the largest Slovenian companies manufacturing solar power plants, and the only one that offers the transfer of excess electricity through the SunContract energy market.

The company’s mission is to bring clean and affordable energy through renewable energy solutions, coupled with user-friendly and engaging experience that empower customers to easily transition to sustainable energy.

Problem:
The client aimed to redesign their webpage to increase customer engagement and conversation rate by presenting a professional image to customers and elevating their UI and user experience. This image should be an accurate representation of the company and all the elements needed to be arranged in a distinctive design and pattern.

My role:

Collaborated with product managers, developers and stakeholders to deliver user-centred solution
Ensured decisions are made with relevant data and user insights
Created wireframes, design process flow, UI designs and prototypes.
Designed responsive, clean and intuitive webpage

Discovery phase

Upon joining Sonce, I began by understanding of the problem through existing research and product data to helped me to gain a better understating of the problem we are trying to solve. After running through different scenarios and highlighting what I perceived to be the main pain points that were causing UX issues, I asked the stakeholders for a meeting so I could learn more about their company vision and ideas.

The main reason was to learn about the ‘business goals’, which would help me to fully understand the information architecture and the webpage functionality. This information enabled me to start creating User Personas and User stories to recognise the different user needs and expectations.

Define phase

After collecting the data and insights from quantitative surveys and competitor analysis I was able to identify the true needs we should address. To synthesis all the data I’ve used the following methods:

Affinity mapping to group user needs and pain points
Created personas out of the user surveys
Defined problem statement that needs to be solved

Ideate phase

Once I had collated all the information, I started the project by sketching my ideas on paper, so I could do rapid development to get my ideas down quickly. My early iterations featured three main elements:

Simple layout to build trust, communicating value and navigating visitors to the next step
Present the products as clearly as possible
Effective use of primary calls-to-action placement

A well-designed webpage is important to compel visitors to dig deeper into the webpage and move them further down the funnel.

Working mainly with the product lead I mocked up a couple of ideas to run a series of lab tests before moving straight into A/B tests live on the webpage. Over 2 days we watched 10 users performing tasks we had set, so we could understand if our mapped assumptions were correct or incorrect.

Our lab tests revealed that users didn’t know where or how to navigate on the webpage. Although it was pretty clear to us, they just couldn’t find the way without spending a lot of time looking for it. This gave us a clear view and provided us with good data in understanding our user goals.

Design

Once the client was happy with the corporate webpage design, I started designing the webpage in Figma, a browser based interface design application. Based on my sketches, I finalised the style guide.

The font I used was already chosen by my client – Geomanist, but to make sure the fonts were readable I used different styles and sizes. For the colour pallet I used their branding colours – yellow, blue and green, with a strong emphasis on their main colour, yellow.