A Guide to creating whaletastic websites

Good news everyone! Your ultrasonic inquiries have been heard. The secret about how can Whale Agency design user-centered websites is about to be revealed! Yes, you read it right, all those sleepless nights and days spent in agony while your minds were stranded on the Isle of Great Big Curiosity constantly wondering about what are the essential steps of crafting remarkable web products have come to an end.

It’s because we live to listen that our most trusted whales scanned the ocean of concern and located your strongest source of uncertainty – User driven webdesign. Fear no more, the Fins of Change are closing in to take you and your company on a remarkable ride of creating wonderful websites. But in the meantime, let this blog post serve as a message in the bottle assuring you that help is on its way.

Here’s our 7 step guide to whaletastic webdesign:

Step 1: Ask and Listen – Interviews

When it comes to crafting great user-driven websites, the first step is interviewing the client (or end user). Asking the right questions and listening carefully is a must in order to uncover what a particular company is all about. During these sessions we ask our interviewees to provide us their brand guidelines, mission and vision statements, target audience and everything else we need to know about the company and their products/ services in order to be able to dive into designing remarkable user experiences, which coincide with our clients’ goals, values, current market conditions and trends.


Step 2: Summarize – Brief

The second essential step is summarizing the findings from the interview and project description. This written brief represents “The Bible” which serves to keep everybody involved in the project on the same page. Here we list:

– Our end goal

– Project success indicators

– All that needs to be done

– The approach towards task completion

– Reason why tasks need to be done in a certain way

– Must-haves

– The target audience- user profile

– Marketing strategy to reach users

– Members of the project team

– The deadline


Step 3: Analyze the competition

Competitor analysis is a must. We need to compare the rivals’ strengths, weaknesses, opportunities and threats in order to map out their KPI-s (key performance indicators). This enables us to see which features should be adapted and which ones should be avoided.

The main keyword here should be KIS (keep it simple) since long descriptions of competitors brings little to no added value, focus on what “they say they do well” and think how you can “out-do them yourself”.

competitor analysis

Step 4: Organize content-information architecture

The following step is crucial for designing great user experiences. Information architecture means that we need to organize the content on the website in such a way that no extra effort is required to understand the processes. To achieve this we create structural diagrams, which show a clear overview of the relationship between all the screens of a site. Information architecture serves as a checklist for coding, designing and filling a website with content.

information architecture

Step 5: Design wireframes

We use wireframes to guide us in the design process and get a sense of the flow of the future webpage. This enables us to be proactive by solving potential issues before they occur, visualize how the content on the actual page would look like and get an overview of how every element is related to one another.


Step 6: Create inspiration boards

Next up is finding inspiration. After defining the end goal, brand values, dos and don’ts retrieved from competitive analysis, organizing the content and designing high fidelity wireframes it’s time to think about the look and feel of the website. During this phase we create collections of images, color pallets, animations, typography and navigation. Then we use Illustrator and Photoshop to mix and match what we have aiming to craft the perfect combination.


Step 7: Craft Mockups and prototypes- Test

The last checkpoint before the gate towards excellence is creating mockups. During this phase we create actual interactive prototypes and test them in order to receive valuable feedback. Then we ask our test subjects to describe the process as they go and say all their thoughts and concerns out loud. This is necessary to highlight potential weaknesses and finalize the project.



There you go dear reader, a complete 7 step guide towards excellent user driven webdesign catered by your very own Whale Agency. Go ahead, give it a try yourself. In case you sink it’s too much for you write us an email or call Carlos, he’ll be more than happy to help you out.

Share it