Open Raven Research Web Design
Challenge
The university's website, a vital touchpoint for prospective students, faced several challenges such as navigational complexity, outdated content, and limited technical flexibility, that hindered its effectiveness in attracting and engaging prospective students.
Solution
Website that provides access, context, and resources regarding Open Raven’s Research tools, housed under an Open Raven sub-brand which has a strong conceptual and visual tie to the main Open Raven brand.
Result
The new website contributed to increased access & awareness to Open Raven Research tools, serving as a platform for open sources tool launch, which went from 0 to 80 stars on GitHub within 3 months since site launch.
My Responsibilities
Research
As a Junior Designer, I conducted a comparative analysis of existing documentation and open-source websites for engineers in the data security space to identify common design patterns and interviewed data security engineers to gather insights into their priorities and preferences for open-source tool documentation websites.
Design
Sketching layouts and prototyping wireframes to visualize the website's structure and content organization, and gather feedback from engineers and stakeholders.
Development
Developing the website using Webflow, a no-code platform that allows for rapid prototyping and iteration.
Problem Statement
Cyber security engineers interested in Open Raven’s open-source technology cannot access their research tools and do not have context on the tools.
Context
Users & Audience
The primary target audience is data security engineers who are interested in open-source tools to improve their workflow.
Scope & Constraints
Tight Timeline
The project had a tight deadline of 8 weeks, requiring efficient planning and execution to meet the desired launch date.
Limited Experience
As a Junior Designer, I had limited experience with Webflow, the chosen platform for website development. This necessitated a steep learning curve to become proficient in the platform's capabilities.
Process
Research
User Interviews
I interviewed the CTO & Head of Research, as well as software engineers to gather insights into their priorities for documentation websites.
Sitemap
Based on information collected during the research phase, I built out an initial information architecture site map.
After getting feedback from the relevant stakeholders, I adjusted the site map to reflect a realistic structure at the time of launch. A major consideration was the fact that a lot of the originally planned content would not be developed in time for launch.
Web Design Process
Based on the research findings, I created a series of sketches and low-fidelity wireframes to visualize the website's structure and layout. These early iterations were crucial for gathering feedback from engineers and stakeholders to ensure the website aligned with their expectations.
Brand Design
Open Raven Brand Audit
To ensure consistency between the main Open Raven brand and the brand of the research arm, I conducted a brand audit, which revealed that Open Raven’s main brand is centered around a vibrant color palette, solid landscapes, and birds.
Open Raven Research
The main idea behind the Open Raven Research visual brand is the inversion of the main brand. Providing open-source technologies to the public is a metaphor for showing the skeleton of the company, symbolized by the use of line art. Furthermore, the utilitarian nature of the organization further inspires a minimalist feel.
Outcomes
Increased Visibility
The new website contributed to increased access & awareness to Open Raven Research tools, serving as a platform for open sources tool launch, which went from 0 to 80 stars on GitHub within 3 months since site launch.
Design Influence on Main Brand
The design decisions I made in terms of typography influenced the design of the main corporate site & the product.
Web Development System Overhaul
Based on the development process inefficiencies I noticed during this project, I proactively took on the implementation of a new Webflow web development system which became the basis for a complete redesign of the main corporate site.
What I Learned
I was able to strengthen my web design skills and had to learn how to communicate with multiple stakeholders (CTO, research engineers, Head of Customer Experience) and incorporate their feedback. Furthermore, this was a valuable lesson in time management as I was responsible for the end-to-end execution of this website. The Webflow skills I took away from this project were crucial for my further contributions at Open Raven.
