Creative Lead | Branding | Digital Design | QA
Creating a holistic brand experience for radiologie³ by analyzing patients' fears and concerns, which served as the foundation for the conception, design, and implementation of the marketing website.
radiologie³
Xuan Vinh Nguyen
2021 – 2022
Project Duration | 1 year
Story Brand
Moodboards
Logo | Word
Typography
Color
Brand Patterns
Image Style
Style Guide
Animations
Illustrations
Graphics
Sitemap
Wireframes
Visual Design
UI Library
Prototype
Landing Website
Final Website
Business Paper
Social Media
Creative Lead, Brand, UX, UI
Brand, Graphic,
Animation
Development
Illustration
Data Analytics
Photography
What was the biggest challenge in this project?
Designing a website that functions seamlessly across a network of twenty practices, maintaining consistency while also allowing space for individual identity.
.jpg)
radiologie³ was founded by Xuan Vinh Nguyen in Dortmund at the beginning of 2021. He shares his modern vision of state of the art medicine with a rapidly growing and highly motivated team.
In their medical practices, Vinh works amicably and closely with colleagues in self-selected teams, mostly on a part-time basis.
Comprehensive quality and continuous training are central pillars of their work. Communication at eye level with patients, with each other and with referring doctors is a matter of course for them.
Vinh and his team want to be visible as radiologists and want to make an important contribution to a good therapy, but also accommodate highly qualified and motivated radiologists.
Before a project is even commissioned, the client often wants to know how much a branding and website will cost in the end. The resulting estimate is based on experience and depends on the scope and style of the project. To determine both, I create an initial rough concept.
Once the estimate is approved by the client, I fully immerse myself in new areas of expertise, carefully analyzing every detail to develop a strong concept.
I especially enjoy working on projects that require independent execution with high quality and attention to detail.
-2-min.jpg)
The rough concept also helps me to identify which additional skills (to mine) might be needed. So depending on the style and size of the project, I work alone or, as in this project, with five colleagues.
To add those skills I love to partner up with friends who I admire for their specialized talents. That way I can deliver full projects including content like copywriting, photos, films, illustrations, 3D graphics, AR, and VR experiences.
Team members contribute to a project with their special skills – at the right time – so we reach a high-quality project together and keep the costs low.
-2-min.jpg)
At the start of the project, I create a timeline that is used to efficiently and transparently plan the project, including milestones, handovers, and other key deliverables.
A Kanban board is then utilized to visualize these milestones and to communicate the project's status clearly to all stakeholders.
Both the timeline and the Kanban board are accessible for the client to view transparently at any time, ensuring that they are kept informed throughout the project's progression and can provide feedback as needed.
This collaborative approach fosters open communication and helps align expectations among everyone involved in the project.
And then we get started on the design. For radiologie³, we began with the logo. The name was already established, and the focus was primarily on interpretation and design.
The logo for radiologie³ is flexible. It exists as a word mark in full form and as a figurative mark - in abbreviated form consisting of r³. The font underlines the modern approach of radiology. This tonality is reinforced by lowercase letters. The superscript three in the name stands for the slogan “human. modern. more". It is underlined in the logo by the practice's corporate colors.
The Logo is made up of the font “ABC Whyte Inktrap” from the type foundry “Dinamo”. The corporate typeface of radiologie³ consists of the typeface “ABC Whyte” in the styles regular and medium.
With great attention to detail and through multiple iterations, we brought the logo to life.
To facilitate its integration into the future Webflow site, the logo was exported as a .JSON file and embedded as a Lottie animation.
A pattern was created for radiologie³ that extends the brand experience for customers / patients and offers the corporate design additional recognition. The visual is a gradient circle that has been subjected to a color rasterization.
The idea relates to the round shape of the MRT. The cozy lighting mood of the MRT machine has been translated into a smooth shape.
Each radiologie³ practice has its own color. In this way, the different practices with different locations can stand out from each other. Because of the corporate design, the various practices still remain one unit. The selected colors of radiologie³ should always result in a combination of a stronger, bright color and the pleasant beige tones.
This reflects the design concept of radiologie³. It consists of the Interplay of something human-pleasant and something technical-modern.
With the completed logo, we were able to design business cards and stationery that can be used across the practices, each featuring the specific color associated with each individual practice.
With the completed logo, we were able to design business cards and stationery that can be used across the practices, each featuring the specific color associated with each individual practice.
Dr. med. Laura Hake-Bobka
We treat you as we would like to be treated ourselves – at eye level and with empathy.
Before beginning to conceptualize a website, it is essential to familiarize myself with the project's subject matter. Therefore, my first step involves reviewing comparable websites to draw insights from them. This process includes analyzing both positive and negative strategic, structural, and design aspects. For my client, radiologie³, I examined doctor websites from around the world.
Often, my clients are uncertain about what they want to communicate on their website at the beginning. Consequently, I frequently take on the of content consultant. I share my ideas for essential content with my clients, and after a collaborative brainstorming session, we integrate the key elements that are important to them into my list. This collaborative approach often simplifies the website creation process significantly.
Building on this groundwork, I develop a sitemap that outlines content for the website.
A sitemap serves as a comprehensive, hierarchically structured representation of all the individual pages within the site.
To precisely define what content will be presented on each individual page, I utilize wireframes.
Wireframes represent an early conceptual design of the website, focusing primarily on the arrangement and positioning of individual elements. At this stage, the emphasis is not on the specific visual design or functionality, but rather on how the content will be organized and laid out.
Based on the sitemap and wireframes, I can compile a module catalog. Modules are self-contained components that collectively form the final webpage.
By determining the number of required modules, I can review my cost estimate and identify what falls within the project scope and what may fall outside of it.
This is because the cost estimate at the beginning was calculated based on the number of modules. This method of calculation simplifies the creation of a cost estimate for me, as I have determined average values for the conception, design, and development of individual modules over the years.
I then create user flows, which outline the user experience—specifically, the series of steps a user must navigate in order to complete a specific task on the website. Analyzing the user flow helps to identify potential problems and understand the needs of the customer.
The primary goal of this website is to facilitate appointment bookings.
.jpg)
.jpg)
.jpg)
In software development, the purpose of a module is articulated through user stories, which are written from the end customer's perspective. These user stories are intentionally concise, typically consisting of no more than two sentences.
In the next step, I seek design inspiration from completely unrelated sectors. I draw from various sources in our everyday lives as well as specific platforms tailored to design, such as Pinterest, Dribbble, and Awwwards.
These platforms not only offer valuable ideas but also provide insights into current design trends. However, I generally aim to avoid following trends. The products I create for my clients should be unique and timeless, rather than simply reflecting the latest fashions.
And then we finally start with the detailed conceptualization and design, which I often carry out in parallel.
The design of each module is crucial not only for the clarity of the content but also for the overall page length across all devices. That's why I experiment with different designs during the conception phase.
In this particular design, my goal was to:
- clearly indicate which radiologist is associated with each location
- reduce the visual repetition of the map and
- ultimately shorten the overall page length
In addition to our weekly meetings, I provide my clients with the opportunity to give feedback during the concept and design phases using Figma, a graphic design software specifically for website designs. This approach allows for a more collaborative and efficient workflow, as clients can share their thoughts and suggestions directly on the design files, making it easier for me to implement changes and refine the project.
.jpg)
Many of my clients seek to have a website completed "quickly" and often reach out to me just two weeks to a month before their intended launch date. In these situations, it is usually advisable to first conceptualize, design, and develop a landing page. This is precisely the approach we took in this project.
So, before we begin work on the full website (comprising 20 modules), we start with a smaller version known as a landing page, which consists of 7 modules. This approach allows the client to go live with their website early on, while we gradually add the remaining planned modules (13 modules) in subsequent stages.
Once all modules have been conceptualized and designed, we compile a module catalog. This provides the client with an overview, enabling them to assemble new pages on their own moving forward.
To ensure a user-friendly experience, we review and provide feedback on each page that the client creates before moving forward with implementation.
Designing the basic structure of a website presents numerous challenges, primarily of a communicative nature, such as effectively coordinating content. I personally prefer to begin the design process for medium-sized screens (desktops) first, as smaller screen sizes introduce their own unique challenges due to limited space for content. After establishing the desktop design, I responsively adapt it for other screen sizes. If necessary, I will create a design specifically for mobile that is not replicated on the desktop version. By combining these strategies, we ensure a cohesive and user-friendly experience throughout the entire website development process.
Consistency in design involves ensuring that elements are uniform in appearance and behavior. A usable and user-friendly design delivers a consistent experience, enhancing usability and reinforcing the overall brand identity. This consistency is achieved through the use of a stylesheet.
A stylesheet is a document that defines the visual presentation of a website's elements, including colors, fonts, spacing, and layout. By specifying these design parameters in a stylesheet, designers can ensure that all components of a website maintain a cohesive look and feel. This not only streamlines the design process but also allows for easier updates and maintenance, as changes can be applied globally rather than needing to be made for each individual element.
Jakob Nielsen
Consistency is one of the most powerful usability principles: when things always behave the same, users don't have to worry about what will happen.
My client utilized the landing page for nearly three quarters of a year. During this period, I was able to carefully conceptualize and design the larger site.
One key takeaway from the landing page was that patients primarily access the website via mobile devices. Additionally, we received a great deal of positive feedback regarding the brand design.
Here’s a sneak peek at the landing page.
Xuan Vinh Nguyen
Those who do not strive to improve stop being good. We continuously and joyfully pursue further education.
Even for the landing page, we carefully considered what should be displayed in the first viewport of the website. It should be clear to the visitor where they are and what they can expect from the site.
Many companies make the mistake of introducing themselves and sharing their history. However, from the user's perspective, a different approach should be taken. The user wants to know how the services provided can enrich their life and what problems they can solve for them. That’s why we developed a headline using the Story Brand method that addresses exactly this.
"We detect diseases early through imaging methods and can clarify medical histories."
This message now serves as the core phrase throughout the website, aiming to quickly convey to users the essence of what the site offers.
The following images showcase the complete website.
Stylistically the main page differs from the independent practice page – regarding color and content.
.jpg)
It was important to us to appreciate each team member and provide them with a visible presentation space even on the general non-practice-related page. Therefore, each time radiologiehoch3.de is loaded, a random doctor is displayed, including their name and location.
We took the photos of the doctors during a one-day photoshoot and then removed the backgrounds, so they would work well on the flat background of the website. It was important that, regardless of the height of the person, the heads started at the same level and ended around the same chest height. This allowed us to create a cohesive image.
Love is also in the details here. The "Book Appointment" buttons are animated, and the pins are adapted to the design of the logo and the font
In the practice tour, customers can move around and orient themselves in the practice even before their visit. The tour was embedded by us but not created. It is based on 360° photos that were merged on a computer and then interconnected interactively.
.jpg)
In the footer, just like in the first viewport, quotes from the individual doctors are displayed randomly.
We analyzed search queries on Google to see what potential patients of a radiology practice are looking for. From this, we created an FAQ catalog in which radiologie³ answers the most important questions in simple language. Users can rate the answers, allowing us to reorganize the most relevant questions and answers on the page. Just like on all other pages, user behaviors are evaluated here as well, whenever permitted.
One of our hypotheses was that patients are afraid of an appointment with the radiologist. On one hand, this is because they cannot properly envision what to expect, and on the other hand, there is a lot of fear surrounding the idea of lying in an MRI machine. With our subpage, the Patient Guide, we aimed to provide information about a radiology appointment to support patients during their examination.
The network of radiologists offers a variety of examinations in their practices. This needed to be presented in a clear and user-friendly manner. We decided to use an abstract representation of the human body, allowing users to select the area they want to have examined. Once an area is selected, the price for the respective examination is also displayed.
For each possible examination in the radiology practice, there is a subpage with detailed information. This is particularly distinguished by the large illustration that was previously shown in a smaller size on the overview of examinations.
We placed great importance on ensuring that the branding of radiologie³ is consistently applied across all platforms. Even when sharing the domain with interested parties, the faces of the doctors and the practice logo are prominently displayed.
It was an honor to work on such a significant project with a client as appreciative as Vinh.
To continue being there for him and to make the best use of his investments, we connected all the pages to Google Analytics. Individual hypotheses are tested based on data, revealing where the website should be further optimized or expanded in the future.
This were the two main moods for our illustration concept. Illustrations should look clean and informative but at the same time modern and interesting. We used these two moods to communicate to the client what we had in mind before we started illustrating.
The goal was to illustrate all different organs that could be examined in the MRT. The illustrations would have to work as single spot illustrations of each organ but also as an informative body illustration in which all organs could be shown at the same time.
To match the corporate font we gave the illustrations sharp edges while also trying to keep some smooth curves. With this in mind we wanted to create the look-and-feel of woodcut illustrations while still keeping it clean and anatomically accurate.
We tried to integrate the pattern in our illustrations. But in the end we decided against it, since it made them feel too uneasy and turbulent. The illustrations were supposed to look calm and informative and we didn’t want risking making the patients anxious while looking at them.
On the “examinations” page the single organs should have a highlight color when a user hovers over them or clicks on them. For that purpose we tried to combine different colors. The challenge was that the illustrations were always supposed to have the color scheme of the different practice sites. In the long run this would mean 20 different colors. Choosing a highlight color that would match with all of them seemed impossible. So we went with a monochrome color palette, that would change for each practice. And the highlight color would be the brightest color in that palette.
All final spot illustrations in the default color can be adapted to the color by each praxis.
At the end of each project, I ask my clients to fill out an evaluation form for the overall project. This is created with Typeform and adapted to the client's design. The questions asked there follow the Story Brand method for creating references that authentically review the project history.
You can read Vinh's full review and the shorter version right here.
"The reactions to our website can essentially be summed up in one word: "Wow!" Whether internally, externally, or even from the competition, everyone must admit that not only the web presence but also the entire corporate design, created by the talented team, meets the highest standards and has far exceeded our expectations. The challenge was significant, as none of the team members had previously worked in the medical sector. What was inspiring was the speed and dedication with which the team immersed themselves in the topics to execute the project flawlessly. A big thank you to the wonderful concept and perfect project management by Nadine, the outstanding design contributions from Alica, the impeccable technical implementation of the website by Nico, and the highly professional support regarding SEO and data analysis from Sven. We were deeply impressed by the high level of commitment from all team members to achieve the best possible results, as well as their flexibility and creativity in working under time pressure. We can only recommend collaborating with such a professional team. Thank you once again for your fantastic work! The radiologie³ team."
How did you acquired this project?
A friend of mine (back from university) referred me to Vinh. During a van trip we agreed to work together. I am still very happy about this decision and really proud of the result of the team.
