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.

Screen Shot 2020-10-30 at 6.47.38 PM.png

"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.

Screen Shot 2020-10-30 at 6.44.03 PM.png
Screen Shot 2020-10-30 at 6.44.42 PM.png

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

Screen Shot 2020-10-30 at 6.46.59 PM.png

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.

MacBook Pro - 4.png

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

MacBook Pro - 6.png
Group 1.png
MacBook Pro - 3.png

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

MacBook Pro - 3.png
MacBook Pro - 2.png

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.