New design conversion-driven Beech website focused on their three target groups (new clients, colleagues and interns).
View websiteView appView report
New design conversion-driven Beech website focused on their target groups
The current Beech website doesn’t reflect the new culture of the company, strategy isn’t aligned and a lot of content is simply outdated.
Create a new design for the Beech website that reflects the company's new strategy. Trying to drive more conversions i.e. attract new clients, colleagues and interns.
Brainstorm and approach plan
After the project brief I initiated a brainstorming session with a relevant colleague (project manager) to get a sense of the scope of the project, what tasks needed to be done, how these were to be divided between the two of us and if we were dependent on other parties. We defined several project phases e.g. user research, concepting, design etc. These phases and tasks were then put into tasks lists in GitHub. Every task had a deadline so we were able to create an approach plan.
Where possible we would formulate Key Performance Indicator (KPI’s) to create achievable goals. However, to be able to formulate KPIs we first needed to create a zero measurement. A zero measurement of what we know and track at that moment.
During the first phase of the project (user research) getting a zero measurement was part of the tasks.
Analysis phase: user research
To get a clear view of the target audiences who needs to be reached through the website, we defined the following target groups:
From every group we conducted interviews with:
Each interviewee was selected based on target group match and availability.
The interview questions were formulated to discover chances & opportunities, user goals, needs and pain points.The zero measurement was done by asking interviewees what their opinions and experiences were with the existing Beech website. The interviews were on- and offline and took around one hour.
All output from the interviews were put in draft personas and customer journeys. The client/colleague/intern journey to Beech was treated as the customer journey. The draft version template was taken from FigJam.
Persona’s
The persona’s described eg. the user groups goals, needs, pain points, expectations and motivations.
Each persona has a customer journey
The customer journey consisted of five phases: user awareness, consideration, acquisition, service and loyalty. Per phases the following states of the user were described: goals & expectations, thoughts & feelings and pain points.
In a separate session I led with several relevant stakeholders, we defined opportunities per pain point. Thus, creating actionable tasks.
All three persona’s and corresponding customer journey’s were treated as deliverables. These deliverables can be continuously updated by repeating the described tasks above.
Internal analysis & market research &
To get a better view of Beech itself and the market it operates in, several tasks were done to complement the analysis phase:
Website content & structure
The persona’s and customer journeys together with the market research and internal analysis were used to define a rough draft of the site structure and goals of all the pages. Every page was divided into content blocks. For each block we described the position and goal of the block and what type of content it would show:
Each content block also described which target group would have to address by the content, the goal of the content and some KPIs to measure its result: scroll depth, impressions, clicks etc.
Validation and iteration
A small user test was conducted to gain new insights and validate the design decisions of the site structure. The test was a card sorting session. Three interns, who are part of one of the target groups, were invited to the session. These interns were chosen because of their availability. Every card had a word on it and was the title of a page. In turn they had to group several cards together which made sense to them. Every user did the test. The results were photographed and the similarities and differences were documented and evaluated. The insights were processed in a new iteration of the site structure.
Wireframing
Once the website structure and basic content blocks were defined, I began to start visualizing the content blocks. Several questions were taken into account:
The persona’s & customer journey and internal analysis & market research. Content block also described which target group would have to be addressed by the content, the goal of the content and some KPIs to measure its result.
Special attention was given to the call-to-action blocks of the website. Together with the Sales department we discussed how we would be able to create more engagement. Some design decisions:
Moodboard
The next step from wireframing was starting to apply final UI elements to the content blocks. Before doing this the current identity of the company was examined and how it could be improved and applied to the new website. Theme, mood, colors, textures and patterns were analyzed and designed. All the research was stored in a moodboard.
Once all style elements were defined the final phase of this project was conducted: the detailed design of the new website.
UI Design
After all previous phases, the final phase, the style elements were applied to the content blocks. To get a tangible result I created the design of a one-pager first and later the rest of the website. See results below.
