Saving lives by doubling web traffic
CSafe is a global leader in temperature-controlled shipping solutions. Within three weeks of launch, we doubled monthly web traffic and reached almost 5,000 users.
Site name:
CSafe Global Shipping
Role:
UX Researcher, UX Designer
Years:
2024 - 2025
Background
CSafe Global is a leading provider of temperature-controlled shipping solutions for the pharmaceutical and life science industries. With a patient-first approach, the company offers a range of innovative products and services, including air cargo, parcel shipping, cell and gene solutions, and advanced digital solutions. CSafe Global plays a crucial role in the global healthcare supply chain, ensuring life-enhancing products reach patients worldwide while maintaining a strong commitment to sustainability.
The Challenge
Over 12 weeks, I worked alongside a graphic designer and art director. We were tasked with improving the digital experience and visual design to achieve a sleek and modern look that would increase web traffic and better reflect their purpose.
We built 62 screens for both mobile and desktop in three months. Weekly formal review sessions with the client informed our subsequent iterations, but the client often provided intermittent feedback between meetings. As we built, we maintained a master prototype to contextualize interactions for the engineering team and also help with stakeholder buy-in when presenting.
Process
To ensure a thorough and holistic approach, our three person team utilized an agile framework.
Empathize: We put ourselves in the user's shoes to understand their current journey, thoughts, actions, motivations, and any points of contention.
Define: We clarify problems that need to be solved and the goals / KPIs that need to be achieved.
Ideate: We outline potential solutions to the problems defined in the previous step using clever visual design, proper UX strategy, and data-informed decision-making.
Prototype: We bring solutions to life through thoughtful interaction design. To remove any ambiguity during development, it's important to remain as detailed as possible when prototyping.
Test: We collected real data on the effectiveness of our decisions, which is paramount to continuously improving your strategy and refining the product.
Empathize & Define
Tools used:
Competitive Analyses
Site Map
We began by performing competitive analyses to understand how similar companies approach their visual design. The client provided us with 3 examples of company web presences that they admired.
Competitor 1: Envirotainer
We were really fond of the negative space on the website; it created a sense of balance and helped the main elements stand out. The minimalist approach not only enhanced visual clarity but also contributed to an overall clean and sophisticated aesthetic.
Competitor 2: Airbus
We loved their clever layout and use of color, which blended sections seamlessly. Coupled with bold imagery, it created an engaging visual flow that enhanced the overall user experience.
Competitor 3: GE Aerospace
We appreciated their use of bold imagery to convey the story, which leans into the more modern "less is more" mantra. We also noticed that forcing a scroll with large imagery worked well in crafting an engaging narrative. It made us feel as if there was more to we've still yet to explore.
Site Mapping
With inspiration gathered, we developed a revised site map from here that consolidated the existing architecture into a more narrative-driven experience. We hoped to reflect the hospitality associated with the healthcare industry and the life-saving capabilities of CSafe's technology in how users navigated through the site.
Ideation, prototyping, and feedback
Tools used:
Initial direction
Ideation
Prototyping
Final product
In the interest of budget, we were given their updated design language, and then our Art Director began ideating in different design directions to first achieve stakeholder buy-in. Over two weeks, a general direction was agreed upon via medium-fidelity homepage wireframes.
Initial direction
CSafe had just completed a brand refresh and provided us with the updated colors and typography for their project.
Dark Blue
HEX: #0A2240
CMYK: (84%, 47%, 0%, 75%)
RGBA: (10, 34, 64, 1)
Blue
HEX: #002D74
CMYK: (100%, 61%, 0%, 55%)
RGBA: (0, 45, 115, 1)
Light Gray
HEX: #EEEEEE
CMYK: (0%, 0%, 0%, 7%)
RGBA: (237, 237, 237, 1)
Gray
HEX: #D3D3D3
CMYK: (0%, 0%, 0%, 17%)
RGBA: (212, 212, 212, 1)
Mid-Gray
HEX: #999999
CMYK:(0%, 0%, 0%, 40%)
RGBA: (152, 153, 153, 1)
Dark Gray
HEX: #707070
CMYK:(0%, 0%, 0%, 56%)
RGBA: (112, 112, 112, 1)
Off-Black
HEX: #232323
CMYK:(0%, 0%, 0%, 86%)
RGBA: (36, 36, 36, 1)
Slate Blue
HEX: #335790
CMYK:(65%, 40%, 0%, 44%)
RGBA: (50, 86, 143, 1)
Black
HEX: #000000
CMYK:(0%, 0%, 0%, 100%)
RGBA: (0, 0, 0, 1)
Ideation
Over the next ten weeks, we held weekly design reviews with our CSafe points of contact to succinctly gather their feedback and establish action items for the week ahead. They frequently left comments during the week, as well. We worked together to quickly ship each page to development after client approval. Once a page design was finalized, it was sent to development while we continued refining other pages for an agile workflow. Below are various page and section iterations as the weeks went by.
Prototyping
As we designed, we'd update a "master prototype" with approved page designs to eliminate any ambiguity among the engineering team as we iterated. This also made stakeholder feedback meetings much smoother, as they always provided feedback on a product that functioned similarly to the final product rather than static images. Below is a demo of the final prototype.
The Final Product
The development of CSafe’s website has been a collaborative effort that genuinely reflects our commitment to user-centered design. Three weeks after launch, we doubled monthly web traffic, reaching almost 5,000 users. I am grateful to have been a part of this journey and excited to see how we will impact our users moving forward. The images below showcase the final product, which stands as a testament to the hard work and dedication of everyone involved.
If you think it looks good now, it looks better on the website.
Final thoughts
With the project complete, I am grateful for working with a talented team and learning from skilled colleagues. While agency work often involves diverse industries and teams, my experience with CSafe taught me two important lessons that will shape my future work:
Make communications as specific as possible.
In the product lifecycle, managing feedback from stakeholders and colleagues can be overwhelming, particularly when balancing past and current feedback across projects. It's important for the team to be very specific about what design elements, screens, icons, etc., they are referencing and provide clear directions on locating them. For example, attaching direct hyperlinks or tags as a reference in Slack to the corresponding Figma file makes a huge difference by greatly enhancing clarity and team efficiency.
A new, more agile workflow.
I learned that incorporating development into the design phase creates a scalable, hyper-agile framework. This approach allows teams to work faster and minimizes downtime between design and development. By collaborating early, we can quickly address issues, streamline workflows, and maintain client satisfaction with the progress of the project.