Based in Sunny San Diego
03
Medical Data Networks
Developing a modern & comprehensive hub for individuals with diabetes.
In Short
Services
• Asset Illustration
• Project Management
• WordPress Conversion
Client
Project Overview
Problem Space
The Medical Data Networks team, led by CEO, Ben West, sought to revamp their website to better serve their diverse user base including patients, caregivers, and healthcare professionals. The central objectives for this redesign were to improve navigation, accessibility, and overall aesthetics while ensuring the website provided valuable information and support for individuals managing diabetes. Together we established an accelerated deliverable timeline of 6-8 weeks, where I was responsible for creating wireframes, digital illustrations, and the final implementation of the site (originally via Webflow and later converting to WordPress).
Process
For this project my design process comprised of the following stages:
- Research & Analysis
Conducted competitive analysis to gather insights and identify pain points. Through my assessment of comparable websites, I acquired valuable insights into best practices and pinpointed opportunities for differentiation. I synthesized my research findings as a reference to drive my design decisions and strategy for the project.
- Design
I began by developing low-fidelity wireframes as an initial step to brainstorm and conceptualize the basic layout of the website. As I progressed, I transitioned to higher-fidelity wireframes, gradually integrating visual design elements to refine the interface.Additionally, this design phase included the creation of several digital illustrations. Initially, I sketched ideas on my iPad to capture the essence of the illustrations. Subsequently, I refined these sketches using design software such as Figma and Adobe, ensuring that the final illustrations were polished and aligned with the overall aesthetic of the project.
- Validation
Throughout the project I maintained a continuous feedback loop with the clients to ensure our alignment on the design direction for the site.
- Implementation
Initially, I utilized Webflow to develop the site, allowing me to establish the basic layout and organize copy/content. Once I was satisfied with the foundation I was able to incorporate interactions and add in more visual details. However, the clients expressed hesitance about fully transitioning to Webflow as they were more accustomed to making updates and content changes via their existing platform, Wordpress. Fortunately, there was a relatively straightforward method to transition the Webflow site back into Wordpress, requiring only a minimal amount of HTML code.
Challenges
One of the principal challenges when designing for this project was balancing the need for comprehensive information with the desire for a clean and intuitive interface. The website had to be able to integrate complex technical information, ensuring compliance with regulatory requirements and industry standards, in a user-friendly manner. The first step to tackling this issue was establishing a clear information architecture for the site, to allow users to locate target information quickly and easily. Additionally, I elected to use various visual elements to break up particularly dense sections into more digestible chunks.
Another prominent difficulty this project presented was the challenge of addressing the diverse needs of different user groups, including newly diagnosed patients, long-term caregivers, and healthcare professionals. To accomplish this, I again utilized the visual design of the site, creating graphics that were friendly but clean. The goal of these illustrations was to be inviting to new and young patients while not detracting caretakers or healthcare workers from finding critical information about the company’s services. Moreover, I examined the site’s copy for opportunities to simplify language and eliminate unnecessary technical jargon, to make the website more approachable to inexperienced users.
Mobile Optimization
Interactions
Though deprioritized, designs for mobile screen resolutions were created as well to ensure seamless interaction for users on all devices. I wanted to ensure that the navigation and other tools felt comfortable and user-friendly when accessed on smaller screens. To achieve this, I made revisions to the illustrations, simplifying them to reduce visual clutter and improve readability on mobile devices. Additionally, I took steps to ensure that other visual decisions translated well to the mobile interface, maintaining consistency and usability across different screen sizes.
Final Design
The final design is both clean and impactful. I wanted to maintain a familiar information architecture as well as convey essential information about the services offered. I was able to deliver a handful of personalized and unique digital illustrations in addition to a fully fledged style guide, detailing the design system and color palette. This documentation will be beneficial for the client as it makes suggestions for maintaining consistency in the appearance of any future additions to the site.
Check out the final site here.
* Note: Since the final handoff to the client, they have opted to make some additional updates that may not 100% reflect my efforts.
Conclusion
I am grateful for this opportunity to experience managing a project and fully owning my own process, including creating and adhering to timelines. Developing a personalized process that suited my workflow was an important part of my growth as a designer and freelancer as well. Additionally, this project marked my first experience writing website copy independently. I learned how to craft engaging content, that communicated the brand’s tone and value, while maintaining readability. As the sole project manager, I learned how to correspond with stakeholders directly as well as present and defend my design decisions to them.
During the final handoff phase, I gained vital knowledge on how to successfully convert sites from Webflow to Wordpress. As a part of this conversion process, I delved into the intricate HMTL and CSS coding environment, to ensure seamless functionality of the website. I collaborated closely with the client to ensure their satisfaction with the final product. This hands-on approach allowed for direct feedback and adjustments, ensuring that the end result met their expectations.
For me, this project underscores the importance of thoughtful design in the healthcare industry, where usability and accessibility can have a profound impact on patient outcomes and overall satisfaction.
