Based in Sunny San Diego
02
Medical Breakthroughs By Design
Creating a website to foster connections within the medical device space.
In Short
Services
• Website Design
• Rapid Prototyping
• Webflow Development
Client
Project Overview
Problem Space
For this project, I was responsible for the design and development of a multi-page website, comprised of Home, Agenda, Vision and FAQ pages. With a tight 4-week deadline, the primary objective was to launch a basic version of the site promptly, enabling us to secure registered attendees and attract speakers. Following this initial release, I had the opportunity to refine the site, incorporating additional interactions and details, before the immovable deadline of the event date.
The overarching goal for this project was twofold: to convert website visitors into registered attendees and to establish the Xcenter as a respected event host and influencer within the medical device innovation sphere.
Process
This is a bit of what my process looked like for this project:
- Sketching
Sketching allows for rapid ideation and iteration without the constraints of digital tools. For me, it helps to visualize layout options, content arrangements, and navigational structures before moving into more detailed design stages. I made it a point to express my thoughts and ideas as sketches prior to viewing at any comparable websites, which may have influenced my designs.
- Research
Next, I researched and evaluated a handful of similar websites as a part of competitive analysis. By studying competitors I was able to gain insights into best practices, gaps in the market, and areas for differentiation, which in turn, informed my design decisions and strategies.
- Storytelling
As I continued my research process and learned more about the users I wanted to reach, I began to craft a narrative for the site, or a story for how users would flow through the pages. Compelling storytelling requires an acute understanding the target audience, their needs, motivations and pain points. Equipped with this holistic knowledge of the user, I could begin to structure the website content and design elements in a way that aligned to user expectations and created a persuasive and engaging story. Through effective storytelling I hoped to establish emotional connections with users and enhance their overall experience with the site.
- Wireframing
Once I was happy with my outline and the story I was telling, I moved on to low fidelity wireframing. For this step I focused on organizing basic elements such as navigation menus, content blocks, and interface components without detailing visual design elements like colors or graphics.
- Validation & Iteration
As my wireframes began to take shape, I worked in multiple rounds of review and validation. With meaningful feedback from my fellow designers as well as the marketing team, I was able to revise the designs based on their insights and observations. Through these iterations I was able to ensure that the final product met both user needs and business goals effectively.
- Implementation
For the final implementation of the site I turned to Webflow, a development platform that allowed me to build out the designs visually, eliminating the need for coding. This process involves translating the wireframes and visual designs from Figma into Webflow, typically section by section. Amidst this transition, I prioritized responsiveness, ensuring the designs would be optimized for various devices and screen sizes.
Challenges
The most challenging aspect of this design project was the rigorous timeline, of just over 4 weeks. For a multi-page site with several intensive interactions, this was a tall order. Some of the interactive features proved difficult to execute, but I found valuable assistance through “Webflow University” videos, which provided step-by-step guidance, especially for more complex animations.
Another struggle I encountered was the users without direct access or prior experience. Crafting a story that resonated with them required a deep understanding of their needs, preferences, and pain points.
Without direct access to users, it was challenging to gather insights and empathize with their experiences. Despite these obstacles, I worked diligently to research and analyze similar sites, leveraging available data and existing user personas to inform my design decisions.
Mobile Optimization
Interactions
To differentiate this workshop from its competitors, it was important to incorporate several interactions and unique page states into the site. Competitive analysis revealed that the medical device industry is oversaturated with cookie-cutter conference websites. Because converting site visitors to registrants was our key priority, it was critical to find small moments throughout the site to make an impact on users. Additionally, including interactions elevated the site and built the credibility of the event host, the XCenter.
Final Design
The final design incorporates creative visual illustrations along with a familiar blue color palette commonly associated with the professional medical space. Smooth and delightful interactions were implemented to maintain user engagement throughout the site. Engaging and compelling copy was carefully laid out in a digestible manner for users to easily understand and navigate.
Following the final launch of the website, “Medical Breakthroughs By Design” was able to successfully register over 30 attendees and 2 additional speakers for the workshop.
Explore the full site here.
Conclusion
From this experience, I gained valuable insights into storytelling, which added another dimension to consider when designing what I once viewed as a basic website. Additionally, I learned about managing tight timelines and how to effectively plan the duration of each design phase. It was also my first opportunity to witness how my designs directly impact conversions and successful interactions on the site, as evidenced by the increase in registrations and speaker sign-ups that I was able to track.
This project proved to be a valuable learning opportunity as I interacted with other team members from diverse fields, such as marketing, visual design, and leadership. This was in stark contrast to my previous experiences, where I operated more independently, handling all aspects of the project and process on my own.
