keyboard_arrow_up
keyboard_arrow_down
keyboard_arrow_left
keyboard_arrow_right
Webdesign

Janine Utsch

Role
UI Designer
Client
Moderatorin Janine Utsch
Timeframe
12/2020 - 02/2021
Website

Brief

After almost 2 years of working together on different projects, Janine was asking me to redesign her website. She told me, that she had changed her image and brand over the past couple of months and couldn't identify with her current website anymore. Another requirement was to work with a system that makes it easier for her to add text and photos by herself.
Tools
Notion, Procreate, Figma, Zoom, WordPress
Methodology
Competitive Analysis, User Interviews, User Flow, Wireframing, Interface Design, A/B Testing

Understanding the Problem

Scenario

Let's try to understand Janine's view. We're still in the middle of a pandemic and confronted with constantly cancelled public events. To keep up with her competition, she makes use of these quiet times efficiently and keeps improving her skills and growing as a person. Janine also relies on people finding her website, network platforms, and profile on agencies' websites to find jobs.

Problem Statement

Fortunately, companies, artists and organizations still plan online events for the masses and Janine is capable to host those.

So, what can we do to make Janine stand out as presenter in a time that only allows virtual events? ๐Ÿค”

Competitive Analysis

Janine and I were analyzing and pointing out elements on her competitors' websites and compared them to Janine's website. To understand the possible solutions better, we structured our findings and summarized the strengths, weaknesses, opportunities, and threats. Good ol' SWOT, am I right? The goal was to get closer to potential solutions for the redesign.

Strengths

Introductions are very prominent and short on the homepage which makes it easy to remember a face to a name

Showing off known clients

High-quality photos of presenters and also in-action photos

Extract of projects on the homepage

Structured project overviews to filter different kinds of events

Testimonials to build trust

Weaknesses

Lack of personality, no information on how these people are and why someone should book them

Storytelling all over the place, no guiding thread

Showreel at the end of the homepage

Lack of consistency and/or outdated design trends for websites

Opportunities

Developing a consistent brand to connect a face with appealing visuals

Communicating specialization, showing off to be an expert for certain topics in the beginning to grow trust in abilities and personality

Including behind the scenes and hobbies that speak for the personality

Having an appealing online appearance can help to be recommended by bigger competitors in the network

Threats

Miscommunication could harm the brand and affect leads negatively

Lack of information about the skills and value of a presenter could make competitors seem stronger and more competent (e.g. pandemic and post-pandemic: online events)

Steady clients could be thrown off by the new website's structure if they can't find the information they're looking for

GDPR!

Point of View

Persona

We started to understand our competitors and our opportunities after the SWOT analysis. It was time to invite the most important guests to our research-party: Event managers and recruiters! Because in the end, they are the ones we have to convince.

So, Janine and I sat down together (on Zoom, of course! ๐Ÿ’ป) to analyze the hiring process and the feedback she received from her audience. We also evaluated the type of people that usually reach out to her. We gathered all the information she got, dived into her LinkedIn and XING network for more information and merged all common traits we had to visualize her audience with a persona.

Portrait of Persona Karen
photo by: @icons8
The Organization Talent

Karen, 34

Karen is an event manager and based Cologne, Germany

"I make sure that all our corporate events are organized well and enrich every participant with lovely memories. Finding the right people for that isn't easy, so the risk of hiring less suitable presenters is always there."

Goals & Needs

Karen needs insightful and structured information about the presenter's personality and recent work to find the right people for the company's events.

Motivations

She also wants to save her superior's time by taking responsibility for the event organization. Hiring the best people to organize a great experience for everyone involved will help to enhance the positive brand with a successful event.

Frustrations

Some presenters don't communicate their story, skills, and personality which makes it harder to evaluate if they're a good fit.

Possible Solution

A structured website that wakes emotions, looks professional, and showcases Janine's abilities, personality, and work experience was the goal. Learning from the competitor's weaknesses and reinforcing the content that motivated clients to hire her would help us to achieve it.

Ideate & Prototype

Before we immersed ourselves in WordPress, we had to go through her new content, brand, and the way she feels about herself now. She told me that she grew out of the "cool sporty girl" image and wanted to show that she's now all business. We started to plan the overall structure of the website, collected ideas for the visuals and discussed how we can combine the business-image with her hobbies and interests which are a big plus according to her audience.

Given that it was important to keep the base structure of her old website, I decided to work on a sitemap that would help us to keep the already straightforward navigation and find a way to list and filter the projects better.

The previous project page was a one-pager that listed all the events with no order and no way to filter those. We decided to divide the page into the most interesting and relevant topics. As I stated before, virtual events and social media became even more important during the pandemic and we should show the audience that Janine is ready for it. So we focused on communicating that she isn't only an expert for fairs and events but also creates as many unforgettable memories for live shows and videoplatforms.

Lo-Fi Wireframes

First, we discussed what CMS would suit to her. I'm a big fan of Webflow but Janine has been using WordPress for a while now and didn't want to learn a new system, hence why decided to go for that. We also talked about how the new the builder and/or theme shouldn't affect SEO negatively and should also make editing easier for her. A bit research and tests later, we found that Astra and their Elementor Builder fit her needs the best. That helped me to determine if I need to work on wireframes for desktop and mobile.

Turns out, wireframes for the desktop version should do for now since Elementor alleviates the struggles with responsive web designs for users.

Hi-Fi Mockups

I worked on high fidelity wireframes, based on Janine's new photos. They are pretty professional, classic, and dominated by the color navy blue. I used the blue color scheme to represent the professional she is and harmonize it with her new photos. As mentioned before, her clients genuinely appreciate her approachable personality, so warming up the design with more personal pictures that keep this vibe was important to us.

Desktop: Homepage
Mobile: Homepage
Desktop: Projekte
Mobile: Projekte
Desktop: Vita

Test & Last Revisions

Considering Janine wanted to develop the website as early as possible, we skipped the prototype and dived right into realizing the wireframes with WordPress. Together we went through the desktop and mobile views and reviewed the pain points early on to avoid wasting time. Janine wasn't too determined about her vision for the visuals. Especially the homepage header turned out to be the most challenging part, since she didn't feel like it represents her fully. Both of our ideas seemed to be conflicting. Therefore, we took a moment to reconsider the process together, understood each other's concerns, and planned how we're going to move forward.

After a couple rounds of explorations and iterations, we were ready to gather feedback from others and fortunately go live shortly after. Janine has a responsive network and audience that send us feedback regularly. That's how we can keep improving the website, fix bugs and respond to new circumstances.

Next Steps

Since the design changed a lot during the process, I didn't document every element and will have to work on corporate design guidelines for the final website.

SEO became a crucial factor during the project. Hence why we will hand the website to my former coworker and Google whispererย Tim Eichhorst.

To keep track of Janine's initial goals, we will have to observe how the new website will affect her visibility, image, and most importantly bookings.

Learning

Many people I've been talking to and working with are stressed and sensitive during the pandemic. Staying calm during a time of uncertainty can be a challenging task. Not everything can go according to the plan, so hiccups during the flow are not the end of the world. The key is to keep a cool head, see every difficulty as happy incidents ๐Ÿ–Œ๏ธ, and work through it with a positive mindset. Patience, empathy, and communication became so crucial and were the keys to this successful project.