Medpace Redesign
Overview
Medpace is a scientifically-driven, global, full-service clinical research organization (CRO) conducting Phase I-IV clinical development services to the biotechnology, pharmaceutical, and medical device industries.
The goal of the website redesign project are the following:
- Modernize design
- Increase customization and flexibility
- Improve UX, UI, and navigation
- Performance and accessibility
Categories
Discovery
Before kicking off a web project it is important to learn more about the client. We call this initial phase of the project discovery. I start by sending out the creative Questionnaire. Here we ask important question like;
-
Who is your primary audience(s) for the website?
- What are the primary objectives of this website, in order of importance?
-
What is it that your users are looking to do when they come to the site?
- What is your major differentiator among your competitors?
- Who are your top 2-3 competitors?
- What are 2-3 of your favorite websites? Brief explanation of why you like them.
- Do you have a specific look/feel in mind? Are there any specific design aesthetic preferences or website examples that your group feels represents the website you aspire to have for this project? (Answering this question provides some insight into the more subjective preferences..)
- Please provide 3 must haves of your homepage in terms of design elements / content.
Site Architecture
Once the creative questionnaire is filled out, the UX Strategist and Designer meet and begin to create a new site architecture for the new website. Here we take into consideration who the primary audience is and why they would be visiting the site. In the clients case the target audience would be biotechnology, pharmaceutical, and medical device companies. And the main goal of the new website is to have prospective companies learn more about Medpace’s service offerings, such as the therapeutic and specialty areas,the global laboratories, and the full range of integrated services for executing clinical research.
Mood Board 1
Mood Board 2
Mood Board
In tandem with the site architecture, I create two mood boards for the client to react to and ultimately choose an initial style direction for the web design project. In some cases the client already has solidified brand so this exercise was a matter of the client deciding whether or not they preferred abstract imagery or light lab based imagery.
Style Tile
The next evolution of the mood board is the style tile. Once the client chooses a direction, we take that and format in a more organized manner where the client can see flushed out image treatments and the full color pallet.
As an added step, I had work with an ADA compliance company to edit the brand colors so they could properly meet the AA approved contrast ratios.
Homepage Wireframe
Along with the style tile, another deliverable I present to the client is the homepage wireframe.
By utilizing the site architecture and creative questionnaire, I am able to pull out the key sections that would best guide the user through the clients who, what, where, and how of their brand story and ultimately engage further through the persona journey map.
Homepage Design
Once the homepage wireframe and style tile are approved, it was time to begin flushing out 3 creative concepts. Typically the first concept is a matter of combining the wireframe with the style tile. The second I tend draw inspiration from some sites the client pointed out they liked in the creative questionnaire. Finally the third being total unique design where the layout where I can push my creativity to its limits.
After choosing a direction, the client had requested we develop out the homepage so they could show some stakeholders that were higher up in the company. Because our dev team was already backed up at the time, I had taken the initiative to utilize a tool I have had minimal experience in being Webflow to create a fully functional prototype for the client.
Combining my knowledge of After Effects for the video portion of the hero area and my drive to learn Webflow, I was successfully able to create a working prototype of homepage in time for the clients internal meeting. Not only was the pleased with desktop functionality, I was really able to wow them with the fact that it was responsive as well.
Stylesheet & Components
With the homepage being approved the next step in the process was to create a stylesheet and components templates for masteads, media content blocks, and call to actions.
Normally if the client has completed their sample content for select key pages, I would jump right into interior designs but for such a large site I felt it made more sense to start at the pattern level. While still using the sample content, I am able to flush out blocks that can be customized to meet any and all content types.
Once approved, I created mobile templates for each of these templates so the developer knows how each block should function on mobile.
In addition to client approval, I have to make sure every component designed out is AA compliant prior to submission to the compliance vender.
Page Layout & QA
In addition to the components templates, I make sure to design out any special templates that may not fit the base patterns found in our base blocks for example a blog, resource library, leadership, and or overview pages.
Once developmenet is complete, I layout key pages in the CMS for our Content Implementation Specialist to follow. While doing this, I am actively QAing each block, making sure everything matches the approved designs and the functionality is meets what was scoped out in the SOW.
