Graybug Vision
Graybug Vision came to Copeland Design to help redesign their brand and website. They were preparing to launch their IPO and needed to establish a stronger presence in the pharmaceutical industry. Together with another designer and UX designer, I helped create and hand over a UI system to development. The site & IPO launch was a success, with the networth of their company increasing by $59 million between December 2019 and September 2020.
Project
Responsive Website
Client
Graybug Vision
Duration
4 months | 2019-2020
My Role
UI Design & Development Hand-off
BACKGROUND
Saving sight through transformative science.
Graybug Vision is a clinical-stage pharmaceutical company focused on developing the next generation of products for patients suffering from chronic vision-threatening diseases of the retina and optic nerve. They came to Copeland Design to help elevate their overall brand and messaging and to create a website that would encourage investor interest as they were preparing to launch their IPO.
GETTING STARTED
Collaborating with the UX designer
Teaming up with another designer we sorted through competitive research, discovery from a workshop and stakeholder interviews, and we developed a branding system that helped humanize the company and communicate their expertise. Simultaneously, a UX designer created wireframes which we then took and translated the brand into a UI system. We worked closely with the UX designer throughout this process. Going back and forth until we found the best experience for our users.
PROBLEM SOLVING
Designing live with the client to simplify the complex
The biggest challenge we faced was condensing the content. The copy was getting too long and the website was reading more like a PDF rather than how we planned for it to read in the wireframes. We met in person with our client, who was writing the copy for the site, and we worked together to resolve this issue.
I adjusted my designs live as we collaborated on copy with our client. I made visual decisions quickly and offered solutions such as adding sub-navigation to some content-heavy sections so that users could easily navigate within the same area depending on their interest.
BEFORE:
AFTER:
DEVELOPER HAND-OFF
Creating a UI style guide & animation storyboards for developer hand-off
Finally we were ready for hand-off, my co-designer and I had walked the developers through our designs and shared a UI style guide as well as links and directions for complex animations and interactions. As they developed, we continued to provide feedback until it was complete.
Final Product:
“Hi team, The launch was well received. The associates love the brand and all the assets you created. A heartfelt thank you for your creativity and hard work to get this over the finishing line! … A big thank you from the whole Graybug team.”
- Chief People Officer | Graybug Vision
Results:
Graybug Vision’s site was successfully launched as well as their IPO, which more than doubled their overall cash and investments. Going from $36.0 million as of December 31, 2019 to $95.0 million by September 30, 2020.
Learnings:
I learned how to be proactive when it comes to client relations and how important it is to guide them throughout the website building process. It’s so easy to lose sight of the goals that were set early on and it’s important to ensure that we continue to be on the same page. I also learned the value of understanding constraints and how to better communicate with developers early on in the process.
