🆕 The beginning.
A robust digital presence is critical in our highly competitive environment, and this story is about a one-month journey we took as designers to design a fresh-looking website for WhistleWorhy.ai product by Aventude.
WhistleWorthy is a whistleblowing application. It aims to provide a secure and confidential platform for employees to report wrongdoing and unethical behavior in the workplace. The app allows users to anonymously report concerns while allowing employers to address and resolve these issues. With its user-friendly interface and commitment to privacy, WhistleWorthy is a valuable tool for promoting transparency and accountability in the workplace.
The design challenge was
Their product, however, has many competitors all over the world that are very established. Aesthetically, most of the competitor's websites are outdated. So, it was essential to develop a modern and appealing visual style that would shine a light on the brand's personality.
"Make it easy to understand the company value and facilitate positive user experience through informative and relevant content to navigate potential clients in the right direction."
😋 Design Process
When you have a myriad of business requirements, constraints, and politics, a systematic approach is paramount. Design thinking with a proper kick-off allowed us to define a business vision. This was followed by the discovery and delivery phases. This article highlights critical learnings.
The discovery phase aimed to understand the product, collect requirements, and analyze the use context. Deliverables: user segments, sitemaps, wireframes.
The delivery phase is the solution space that makes ideas tangible, usable, and beautiful. Deliverables: UI & interaction design, Style guide.
Discovery phase
Defining how any solution should work, what problems to solve, and what gains to focus on are the core and fundamental aspects of any successful design process. Even if you know the answer to a brief, take a step back and dive into research to define whether you're focusing on the right problem to solve. Here, the beginner, 'curious' mindset plays a big part in revealing correct business objectives, real user needs, and technological possibilities.
Therefore, we started our project by investigating internal (company) and external (users) drivers to crystallize the area of a potential solution, outlining how the website should work rather than how it should look. The process was divided into five steps:
Step 1 — Kick off to refine business requirements.
First, it took us a few workshops with key stakeholders (the business) to understand the brand vision, overall goals, and challenges. We needed their perspective on:
-
internal: business needs, requirements, goals;
-
external: context, competitors, best practices;
Documenting insights is essential as this becomes a single source of truth that will inform the decision-making process and foster team alignment.
Step 2 — Site and Content Audit
In order to ensure that users have an enjoyable experience on the website, it is essential to anticipate their needs and provide relevant information at each step. To achieve this, we took into account the different user types and their journeys, which helped us to structure the site in a way that simplified user flows between pages. This approach allowed us to create a more intuitive and user-friendly experience for visitors to the website, which in turn helped to promote engagement and increase the likelihood of achieving our business goals.
Final sitemap built in FlowMap
Step 3— Context exploration. When we had a general idea of the website's purpose, we needed a system for presenting different content. Here, we got inspiration from Faceup, WhistleBlower software, etc.
Step 4— Modular system. Following initial discussions about building a flexible modular design to represent various content, for our wireframes we created multiple elements based on the same logic and style with different hierarchies, balancing between images, headlines, and various supporting copy. Ultimately, we managed to create the whole website by using the elements presented below 👇
>--- Components
Step 4 — Wireframes
Finally, once the planning and foundation were built, we were ready to play with wireframes for the core desktop experience. Once you know WHY and WHAT we are doing in writing, constructing pages is a piece of cake. Of course, we went through circles of feedback. Still, it was easy to move things around without involving design ego for graphics.
The main point: each page needs to convey the goal and present main user questions and concerns. This information must be structured logically to allow users to scan the page quickly.
Content always comes first; once you know what the page needs to achieve, you can focus on elements and graphical composition.
- Key learnings
-
Start your design process only after you've identified business goals, user problems, and a roadmap — where deadlines and deliverables are clearly outlined and agreed upon with all stakeholders.
-
Document all the key points from day one: business needs, problems, design stages, feedback, and discussions in one document (which becomes our single source of truth).
-
Think business, understand their revenue stream, and learn their language. Listen to any feedback from business (you know how to do your business; they know their business!). Don't fall in love with your design ideas — listen carefully to what the business says. The best ideas can come from anywhere.
-
Involve main stakeholders and especially developers at the beginning of a project to co-create ideas.
Delivery phase
Once logic and functionality are defined, the visual design process takes little time. It turns into an enjoyable meditation on aesthetic and design quality. Using wireframes and the modular system, the UI was created, following brand visual guidelines.
During this stage, well-developed digital design guidelines help you justify design decisions and deal with alternative opinions within the team.
Another important aspect was to provide all necessary materials, guidelines, and recommendations for developers. Create this project together as a team. Don't just hand over the designs and leave lots of decisions to a dev team. On the contrary — be a driving force to maintain high design quality to make your live project pixel-perfect.
Delivery phase: key learnings
-
Designers own a live result, therefore, we need to guide and support developers while they're working on the project.
-
Define your design patterns and language first. Consistency — is what defines good design.
Final say
Overall, reflecting on this process helped us to extract the key pivots that enabled us, blockers that we should eliminate, and all the learnings that we can use to improve our process next time.
Key takeaways:
-
Only start the design process once you get all the business requirements.
-
Only jump in the visual design once you are happy with your solution (UX).
-
Always spend time during the discovery process to think about whether you are doing the right thing…And validate all assumptions before any line of code is written.
🚫 The process that we followed was tremendous but still far from being perfect: