ClinicOS – Marketing Web, Tablet, and Mobile Site
Company
ClinicOS
Role
UI/UX Design, Website Design, Tablet Design, Mobile Design
Team
1 Designer (Me), 2 Founders
Timeline
Challenge
ClinicOS is a startup in its early stages. They needed a website to market their AI plastic surgery visualization tool to plastic surgeons. The absence of an online presence hindered effective product promotion. The challenge was to design a responsive B2B marketing website for their consultation application on Webflow.
Solution
The solution involved creating a user-centric B2B marketing website using Figma. The design emphasized a seamless experience across web, tablet, and mobile devices, showcasing the AI tool's features and benefits through the home and product pages. The result positioned ClinicOS on setting the stage for successful marketing of their innovative new product.
Logo Design
ClinicOS' Logo Design Process
Brainstorming Logo
ClinicOS' Association with Trust, Inspiration, and Innovation
To help me deliver the logo the Founders envisioned, I asked them to describe ClinicOS in three words. They replied with "trust," "inspirational," and "innovative."
I did some online research on imagery associated with those three words, in addition to "clinic/healthcare," and sketched them out for reference.
Referencing Imagery Association to Ideate Logos
I began by examining the imagery symbolizing trust, inspiration, innovation, and clinic to generate concepts for the logo. To generate ideas more easily, I let my thoughts flow freely — sketching out any images that came to mind, constantly refining the concept as more ideas occurred to me.
Selected Logo Direction
After some discussion, we decided to move forward with this logo concept since it fulfills most of the associations that the founders were looking for.
The shapes used in the logo make up a medical cross and resemble someone reaching out for a hug, or scanning their body for ClinicOS's AI visualization. The left side of the body is made up of a heart, which associates the company with the care they provide to patients. Lastly, the heart is pointing upwards, indicating the success that surgeons will achieve using the product.
One critique was that the logo concept sort of resembled a frowny face.
Final Logos
To ground the logo and help stray the similarity of a "frowny face," I extended the length of the right arm behind the heart. Additionally, I made the head and right arm the same almost-neutral color to have the heart pop in the logo.
For the text logo version, I paired the logo with a font that accentuated the logo's round but rectangular shape. I made sure to have versions of the logo be readable in four different sizes and light and dark backgrounds.
Secondary Research
Competitive Analysis
I conducted a competitive analysis of 7 competitor sites and apps for guidance — taking notes of what type of information they include, site features, UI layouts, site/app navigation, etc.
Information Architecture
Brainstorming Site's Layout Based on Organization of Information
Brainstorming Page Contents
At first, we were considering making a page for the home screen, product, case studies, team, and signup form but since the startup is at its early stages, the two main pages they would need are the home and product page.
Based on the notes that I captured through my competitive analysis, I noted down content we could include for each page.
Through conversations with the founders, we
-
narrowed down the contents for what is needed at this stage
-
organized the content to how we would distribute it throughout the page
-
outlined the information in more detail using a site map
Low-Fi Wireframes
Low-Fidelity Wireframes Based on Site Maps
I referenced the site maps when sketching out the low-fidelity wireframes as it informed me about information to design for and the hierarchy of the elements.
Home Page Low-Fi Wireframe Iterations
For the home screen, through each wireframe iteration, I
-
removed unnecessary sections for this page, such as the list of procedures and the user's journey
-
replaced the "Provider Before & After" with a more "scientific" way of explaining the benefits of ClinicOS through a Venn Diagram
-
made copy edits for the content to appeal more to doctors and their businesses
Product Page Low-Fi Wireframe Iterations
There were only a few edits to the product page, such as the
-
swapping of the "Integration" and "Why ClinicOS?" sections
-
copy edits and including more information about what information will go on each section
Hi-Fi Wireframes
Translating Low-Fidelity Wireframes to High-Fidelity
Exploring the Site's Design Style
As I was converting low-fidelity wireframes to high-fidelity, I wanted to explore a visual design that would best represent ClinicOS as a brand and target its audience. I created five versions of the home page before finalizing the design style.
What set version five apart from the rest was that the images instantly communicated what ClinicOS was about and the information that they accompanied. Additionally, the color story aligned with the B2B medical audience with its sterile white background and pops of teal. While keeping some warmth through the warmer hues used on the blues and images.
One challenge that I encountered was that I was being too strict in the way I was designing. I was using the same font styles used in the ClinicOS AI experience and not straying away from the low-fidelity wireframe sketches layout.
Final High-Fidelity Wireframes
After getting out of that design block, I was able to refine the website's layout to be more fluid and harmonious.
This was done by giving the content more breathing room through spacing, reworking the information to different layouts, and removing the capsule container from each section and instead, dividing them through interchanging white and off-white backgrounds.
Another thing that helped create a more lovely experience was reforming the site's typography to use different fonts, styles, sizes, and color hierarchies. Finally, having images and text match the tone of the B2B marketing website.
After finalizing the site's style, I applied it when designing the high-fidelity Product page
Desktop, Tablet, and Mobile Platforms
After finalizing the home and product page's design style and layouts, I translated the desktop site to accommodate tablet and mobile touchpoints. Adjustments included converting horizontal column layouts to vertical to fit in a more narrow frame, in addition to making fonts and spacings smaller so as not to have an awkward distribution of contents.
Home Page
Product Page
Design System
Creating a Design System for Future Additions to the Website
I created a design system that included typography, color palette, icons, and components that would allow for ClinicOS to build on the website as they grow.
Conclusion
My Take-Away
It was amazing to create ClinicOS' branding and marketing website from 0 to 1. This created a foundation for their future success when building up their clients and landing their first investors.
One challenge I encountered was entering a designer's block which prevented me from thinking outside the box in terms of visual design. However, once I got out of it, I delivered a bright, clean, and lovely experience for desktop, web, and mobile platforms.
Impact
Founded ClinicOS' branding, establishing their precense in the growing AI industry
Built ClinicOS' marketing website allowing them to promote their new product to clients and investors
Created a design system allowing ClinicOS to build on their marketing site as they grow