Case Study -
Designing Frog Design

Frog uses this website to showcase their work and offerings to potential clients and potential hires, as well as to demonstrate thought leadership to the design community at large.

The challenge was to refresh the look and feel of Frog’s website and improve digital storytelling to increase engagement. They were also opportunities for improving SEO optimization and moving toward more human-centered messaging.

My team delivered responsive designs for Frog’s new website, which is launching soon. My impact on this project includes:

I kicked off my work on this project through leveraging substitute user research methods to empathize with Frog’s users.

I created user flows and use cases to imagine steps in users’ journeys and to identify system requirements. A competitive analysis of websites in this space helped me discover user needs by proxy while also identifying industry design trends. Looking into the Google Analytics data, I identified which pages users were currently viewing the most and also discovered that 66% of users in the last year were browsing the website through desktop devices.

I designed pages for the new website by starting with pen and paper sketches, then moving into wireframing in Figma. My work here involved putting together layouts with clear visual and content hierarchy, applying the visual language set by the Art Director, ensuring effective interaction models, and generating motion animation ideas to make pages more lively.

Though this project was not formally scoped out to include user research, I initiated and led usability testing of our designs with 9 users. My work included recruiting participants, writing testing plans, creating an interactive prototype for testing, moderating user tests, and delivering insights to my team.

Through this research, I was able to identify parts of the site that were confusing and required more context as well as gauge user reactions to a nontraditional homepage design. These insights led to improved usability of the design.

My role involved generating innovative ideas for interactions and demonstrating, through animations, how these innovative parts of our design should function in motion. I tested most of the interactive elements of the new design through creating animations in Principle. It was helpful for the team to see these ideas in action, and it was also useful to show animations to stakeholders for alignment.

I collaborated with team members to create pixel-perfect, responsive, high-fidelity designs to hand off.

My impact here involved setting an 8-point soft grid system, documenting a responsive typography system, and creating reusable components in our Figma library. Later, I expanded our design documentation in a Zeroheight design system for internal use.

Throughout this project, I designed with accessibility best practices in mind. I ensured sufficient color contrast between text and backgrounds, designed state changes, used visual cues in addition to color to highlight information, designed accessible forms, and ensured correct usage of HTML tags.

My team delivered a bold, clean website design to allow Frog’s work to shine through and speak for itself. I also handed off motion designs for implementation.