Duration: 4 months
Responsibilities: Rebranding, UX, Graphic Design
Team: Marketing
Bugcrowd
Tools: Figma, Adobe Photoshop, Adobe Illustrator
Major Issues
1.
Pages are too loud and striking, harsh on the eye
2.
Lack of colour, the colour palette is very limited, making it difficult to see content hierarchy
3.
Pages lack personality and resemble one another too much
Solution
The website needed to undergo redesigning. In order to maximize my time at Bugcrowd, the marketing team and I collectively decided to redesign a few web pages entirely on the current website that were the most high trafficked. While redesigning these pages were vital, so were ensuring that there is unity amongst the entire website, therefore, I proposed the following plan to follow so overall feel can be uplifted
Solution Plan
1.
Target small sections of many pages on the website to redesign to create a sense of unity throughout the website.
2.
Expand color palette so the website can appear more striking
3.
Include more visuals and company photographs to support content on webpage and enforces differentiation amongst webpages
RESEARCH
Identifying Major Issues with Surveys
5 participants were asked to partake in discussions and surveys in order to gain insight on the major issues. These participants were given background information on the company and told to go through the current website while sharing their experiences so far.
"the only way I can tell these pages apart is by reading their Titles"
100% of the participants noticed that many of the pages followed the same layout making it difficult for them to understand the purpose of certain webpages
"The limited colour palette takes away from the page having its own personality"
100% of the participants noticed the consistent use of the same 4 colours throughout the website that made their user experience unpleasant and boring.
66% of the participants couldn't get through the entire website as they were too bored of the provided experience.
"This site is so long and seeing the same colours gets boring eventually"
"I can tell that they have alot of company images, if they enlarge them, it can really make"
Current About page
IDEATION
Establishing Goals
1. Identifying high-trafficked pages for entire redesigning
- Bugcrowd vs Hackerone page
- How Bugcrowd works page
- FAQ page
- Registration confirmation page
- LEARN, HACK, EARN page
3. Using the colour palette in a strategic manner
Use the same colour palette creatively, such as using shades of current colour palette colours, gradients of the colours, adding variation by introducing strokes around basic shapes.
2. Selecting smaller sections of important pages to redesign
- Rearranging images on Leadership Page
- Bugcrowd Commitment on Employee Page
- FAQ page
- Include map infographic on About Page
4. Identify relevant images to support content on pages
Using the companies large gallery of images, I will appropriately select images to be used on certain webpages to support their content and also add more appeal to page.
Low-Fidelity Wireframes
All the wireframes are interactive!
Feel free to drag down with your cursor to catch a glimpse of the entire wireframe.
Bugcrowd vs. Hackerone Page
How Bugcrowd Works Page
FAQ Page
Registration Confirmation Page
LEARN, HACK, EARN Page
SOLUTION
Visual Design
Tone
Personality should reflect the companies true nature
-
Serious, Positive, Respectful
-
Clever
-
Humble but confident
-
Reassuring
Look and Feel
-
Simple, Not too busy
-
Photography and iconography
-
Closely aligns to core colours
-
Bugcrowd Hex
Colour Palette
#EB5F2B
#333333
#A8B0BD
#EDEDED
#FFFFFF
Font and Sizes
H1 - Proxima Nova Regular 22pt
H2 - Proxima Nova Medium 14pt
H3 - Proxima Nova Bold 10pt
H4 - Proxima Nova Light 8pt
Smaller Sections
As identified in Establishing goals, these were the smaller sections chosen to redesign, I jumped right into high-fidelity mockups for these sections however, designed variations for each section from which the marketing team and I chose to go forth with.
The leadership page highlights all the employees that are part of the leadership team in the company
The chosen mockup follows a simplistic design that uses images, variety of font sizes, asymmetrical and symmetrical components to enhance the page
Leadership Section
The Bugcrowd commitment page highlights Bugcrowd's commitment towards its employees and the companies initiatives
The chosen design uses opacity to illustrate a contrast displaying the content differentiation while maintaining their connection.
Bugcrowd Commitment Section
This infographic illustrates where all Bugcrowd Hackers are located worldwide displaying company diversity and inclusivity
Map Infographic
High-Fidelity Wireframes
All the wireframes are interactive!
Feel free to drag down with your cursor to catch a glimpse of the entire wireframe.
Bugcrowd vs. Hackerone Page
How Bugcrowd Works Page
FAQ Page
LEARN, HACK, EARN Page
LEARN, HACK, EARN Page
CONCLUSION
Key Takeaways
A key lesson I learnt during my internship is the importance of creating designs that are design friendly. In other words, Figma, the primary tool I use to construct wireframes appear clean and appealing however, when coded, the design is not always ratio friendly for a specific device. Going forward, I will ensure that device adaptability will be sought through during my design process.
OVERVIEW
Background
Bugcrowd is a crowdsourced security platform. It was founded in 2011 and in 2019 it was one of the largest bug bounty and vulnerability disclosure companies on the internet.
I had the opportunity to intern at Bugcrowd in the beginning of Summer 2019 as a web designer/developer to assist the sole marketing manager in the company with creatively refreshing the companies website for increased usability and attraction.
Problem
The Bugcrowd website is informative with many pages, however many of these pages use similar layouts that have made it difficult to differ one from the other resulting in failure to convey the messages intended to understand from pages on the website.