Data Protocol Website
Over the course of many months, I collaborated with various developers and stakeholders to build a new website for Data Protocol from the ground up. This involved managing a team of internal developers, outlining goals and content, and designing the entire user experience and interface of the website.
User Interviews, Personas, Information Architecture, User Flows, Visual Design, Usability Testing, Motion Design, Branding, Wireframing, Content Strategy, Graphic Design
Skills
2022-2023
Role
Sole UI/UX Designer
Year
The new face of Data Protocol
In order to appeal to the developer audience, Data Protocol needed a website that would look and feel different. While making this branding shift, executives at Data Protocol decided they would also have to take a radically different approach to the way they spoke about their services.
Discovery Phase
Building this product involved considering multiple factors. It started with understanding the expectations and needs of our users and clients along with Data Protocols business goals.I dedicated several weeks to comprehensive research, encompassing the creation of user personas, exploration of market competition, and identification of problem themes, including an audit of the old website. Through ongoing discussions with executives, I formulated a framework for design, content, and the user experience.
Wire framing, site maps, and user flows
Next steps included wire framing pages, creating site maps, and user flows. I enjoy starting with a simple pen and paper when designing low fidelity prototypes. This gives me the opportunity to make quick changes and to also present functionality ideas to our developer team.
prototyping
Utilizing Figma, I crafted a fully functional prototype of the website to provide every team member with a clear representation of the final product. The design process involved transitioning from bare-bone wireframes to high-fidelity pages, incorporating functional elements such as buttons, navigation bars, drop-down menus, overlays, and hover effects.
Branding
I wanted to establish a distinctive, colorful, and modern style for Data Protocol, all while maintaining a tasteful aesthetic. The process involved numerous iterations of colors, gradient usage, illustration styles, and fonts before arriving at the final design. I created each graphic element by hand, using Adobe Illustrator and Photoshop.
Motion and interaction
Adding motion and interactive features truly elevated this website to the next level. Collaborating closely with the developer team, we fine-tuned numerous iterations of text and graphic movements across the site. This involved refining speeds, implementing unique movement effects, perfecting hover effects, and precisely timing every element.
