Pen cap with recap logo, links to home.
Pen cap with recap logo, links to home.
Pen cap with recap logo, links to home.
Case Study

Medtrics Lab

'Medtrics is a software platform built by a team of healthcare professionals and technology experts on a mission to simplify clinical education.'

The project brief was to design & develop a new website, built using Webflow so that it's more flexible with future iterations and content changes by anyone in the team.

Discovery

So, knowing it's a new website design, and one aspect for the project to be successful is the ease of access for the Medtrics team to update the site post launch, next I mapped out other requirements & goals over discussions with the Medtrics team, getting an idea of the tone and vision in mind.

Other requirements:

  • Main Action: Getting potential new customers to sign up for a demo of the app, and consultation which takes place via zoom or in person.
  • To show the many use cases that Medtrics App provides the end user.
  • To show the many features of the software. 
  • Resources section on the site providing downloadable content.
  • Blog section.
  • Site to work great across all browser sizes & devices.
  • Mega Menu showing key section child pages, accessible from all pages.

Exploration

Next it's time to dream up and visualise possible designs for the key sections of the site.

Sketches

I started by blocking out a simple vertical storyboard of their previous homepage content, as a foundation to build from and improve upon.

Also thinking about the mega menu layout from early on, and sketching up home hero & content module options, detailing any ideas on motion and visual attributes that come to mind.

The image below shows how the story board of the product page, which then leads onto trying out varying layout options for the sections.

This process is a good one for free-ing up any initial ideas that may come to mind, and opens room for other alternative routes. All before putting any pixels to screen.

User Flow

Knowing that out main action is to get the user to sign up for a demo / consultation, whilst guiding them through information about the software, the user flow chart helped early on to define an visualise the connections between the sections of the site, and how someone could navigate it.

In the final outcome, the user flow map is a little more complicated than shown above, with connections between 'About', 'Blog', 'Team Members', and the other sections shown. But the diagram shows the main veins of the site.

Design & Development

Using Webflow to design, means also developing the visual at the same time, and thus requires prior knowledge to the philosophies, attributes, and structures in web development.

I love this approach as it gave me full roam from the start of the project to address other aspects of design that are sometimes missed in static designs such as; hover states, interactions & motion design, responsive breakpoints, and how content is structured behind the scenes on static & dynamic pages.

Hi Fidelity Prototypes

Making a pass on the grey static wireframe stage, I jumped straight into developing the sketches further into high fidelity working prototypes.

This meant I could try out different typography, imagery styles, light/dark mode & motion design.

This proved to be a positive step and the Medtrics team were able to test them out and see what felt best for them.

We decided to go with something similar to the screen above as a starting point. I then developed it further and as the project went on, making adjustments, refining the layout and slider design.

I then moved on to the building out the rest of the page modules.

Content Architecture

Having a dropdown menu which could show the child pages of 'Uses Cases' and 'Features', was a key requirement so that the users could get an overview of the content without having the leave the page.

With both the menu, and the page designs, clear content architecture is paramount to the user's comfort when navigating the site. So these aspects are the primary starting points for how the page and modules will look, and how the user will interact with them.

Below shows using colour and icons to create a sense of continuity when navigating between the different features that Medtrics software provides.

These pages have dynamic content which is pulling in the content from a CMS collection/database. So the page template can be tweaked, or new items can be added, without having to edit all of the other sibling pages.

Sticky Navigation Bars

In various sections on the site, where needed, I created section-specific navigation bars which scroll with the page and then stick below main nav while in the relative section. Then once the sections is over, the nav scrolls out of sight with it.

Below shows one nav with switchable tabs, and the other has anchor links to blocks within section. The orange highlighted state also changes between the links while the user scrolls, this adds to a sense of progress and clarity.

These two nav's are using dynamic content, which pulls the content from the relating CMS collection item or from other linked CMS collections
(for example showing select 'Features' on one of the 'Use Cases' page).

The screen recording below shows how one nav un-sticks, and another sticks.

Here's how the sticky nav's work in the Resources section, displaying key info of the resource and a relevant action button.

Single Source

A single-source-of-truth approach to building the site means that content can be changed in one place, i.e an icon or text change, and the change reflects elsewhere on the site. It also means that items like Testimonials can be added to the site once, and then used in multiple areas on the site.

The same goes with styling parameters such as colour and typography; using CSS classes, iterations on these are easy to try out & make global changes.

  • Use Cases
  • Features
  • Testimonials
  • Team Members
  • Resources
  • Blog
  • Brand Logo
  • Brand Colours
  • Typography Styling

Forms

Capturing data from interested customers, and more importantly getting connected with them to set up a video call consultation, is the primary action on the site. So creating easy to use forms ranging from a single field, to a full page overlay, gives multiple points on the site for the interested visitor to engage.

Each of the forms contain a snippet of code which includes the page location of the user on the site. This may seem obvious but when using forms on CMS pages, Webflow by default doesn't show this. It means the customer support who receives the form submission already knows a bit of context of the user's interest, which may help.

Small, Medium, or Large? Here are a couple of examples from the site.

There is also a Calendly embed which shows after the form is submitted, prompting the user to book in a time for a video call if they wish. Keeping this as an optional second step in the form process was a conscious decision as to limit the barrier of entry for engagement.

Refining the design as a whole

With the design, development & content architecture building rapidly and simultaneously. It allowed for continuing refinement of the design, taking a step back here and there to see how the whole experience was starting to feel.

Weekly progress & feedback calls with the client added to the fluidity and success of this aspect of the project, manifesting a site that we all felt great about.

Here is how the homepage looks on the live site.

Accessibility

Building a website which is accessible to everyone is important, and there is a checklist of things to go through and keep in mind during the development of the site. Here are a few:

  • Descriptive alt text for images so that people who use page text readers dont miss out on the content and context.
  • Easily readable font sizes & weights.
  • Make sure colour isn't the only way information is conveyed.
  • Footer with navigation to multiple sections on the site, easy to use and reliably there, at the bottom of every page.
  • Inclusive content which creates an encouraging and welcome space for people across age groups, race, ethnicity, gender, beliefs, & location.

Below are some vision preview tests to aid when designing the site, or preparing content to be published. They help to ensure visibility for partial sighted or colour impaired:

Full spectrum colour blindness - Monochromacy

Full spectrum colour blindness - Blue Cone Monochromacy

Focus imparement

Device & Browser Testing

While building the website, I was flicking between browser widths and using CSS responsive breakpoints to define differences between 4 main browser sizes: Desktop, Tablet, Mobile Landscape & Mobile Portrait.

However, the final testing stage is still very important and by installing a piece of feedback software called Bugherd onto the site, I could go away from the computer and test the site on different devices and browsers, marking out any bugs that may happen, or notes to change aspects to improve the experience.

The Medtrics team was also able to do the same, and this process also proved to be useful for the client to note content changes for me to update, before they had full access to make changes themselves.

Keeping all the feedback in one place also meant that we could all keep track of new fixes and other progress.

Onboarding Client

Getting the client clued up on how the admin side of the site looks, feels & works, was an important step to the success of this project, so that they can add and edit content when they wish.

I made PDF guides with screenshots and notes to walk through processes step-by-step. I also made screen recordings talking through some of the aspects to the editor and CMS functionality.

Finally, we continued regular contact via messages or video call, to ensure that everything is clear to use and any questions answered.

Results

I think the whole project went really well, from initial discovery and planning stages, to go-live and its success out in the wild.

The key to this positive outcome was and will continue to be, keeping the user's experience at the forefront during design & development.

Client testimonial

"It has been an incredible experience working with Louie. We hired Louie to redesign our B2B marketing website in Webflow. He worked with our team to outline requirements, plan out the project, and met with us weekly to work through the website. It turned out to be far better than what we had initially planned for. Louie is excellent with communication, meeting goals, and pays attention to the small details.

We recommend Louie for projects of any size! Also, he is a pro at Webflow. This was new technology for us so we were glad that Louie was able to do both the design and the development in Webflow."


- Santhosh Cherian, Founder, Medtrics

Recap to discuss data

About 10 months after launching the site, we've met back to discuss the performance of the site. I was happy to hear that the site has excelled in its goals by gaining new leads and interest in the software platform.

Over this time, Medtrics has had 20+ new leads, from organic searches alone. This is 3x to 4x the performance of the previous year of their old website. On top of this, with the new website, they are able to foster direct leads and clearly explain the various features and use cases.

A lot of new leads had come from the main navigation action button, which opens the form overlay and explains to the visitor what they can expect after engaging, and provides multiple points of contact. This was a positive result reinforcing the intentions of the design.

Iterations on design

We are currently working iterations to the site, to prepare Medtrics for the next sales cycle. Here are a few examples:

Just because the form overlay has been working well, doesn't mean there is no room for improvement! We are also currently refining the content and phases of the form to prepare the user and Medtrics for a more efficient first meet.

An area which could be improved upon & simplified, is the Use Cases section where there are tabs of 'User Types' showing alternate content for the specific use case. Visitors are expected to intake a lot of content, especially if they don't fall in to a specific user type. This is in progress.

Other iterations include; adding video header functionality to the blog section, adding an integrations page, and beyond.

Live Website

Check out the live website by clicking the button below. If you've found this content interesting and/or have a project in mind, get in touch here.

Launch Site