Alexa BlueprintsWebsite Redesign and Deep Dive

• Visually fragmented nav area.

• Lack of engaging visuals or C2A in header.

• Lack of unified category UI throughout all screen resolutions.

• Too much empty space in prime C2A location

• Blueprints are visual cluttered with no breathing room on each card.

Perceived Design Issues

Unify Categories UIExecution:This is a frugal V1 of the Blueprints site with a consolidated navigation area.

Categories have now been placed under an ever-present drop down menu at the top of the screen.

“Skills You’ve Created” out of the header and into its own row. This is a popular solution to get users to engage on other listing platforms.

Pros: • Frugal implementation. More subtractive than additive.• Uses pre-existing design language.• Resizes well based on the resolution.

Cons: • Clean, but not visually engaging.• C2A in header is clean but not impactful.• Blueprints are a little unreadable.

v1 Pros/Cons

Header C2AExecution: A V2 of the Blueprints site boasts a large format header with a custom illustration and C2A for to use a specific skill.

Large scale headers have been used effectively on other large platforms for years. It gives the opportunity to present a unique visual voice based on the skill and studio.

Header C2ANotes:Versions of the V2 site design for both tablet and phone.

Pros: • Visual intrigue in header that doesn’t overpower.• Continues to use Categories menu in the navigation.

menu over fragmented nav organization.

Cons: • Full version violates Alexa Brand Standards.• Blueprints cards are in distended version of

themselves in the tablet resolution.• Inline video is not engaging and forces user to

navigate away from the page.

V2 Pros/Cons

Header C2AExecution:Removed Alexa branding from the C2A banner to avoid branding violation while simultaneously creating freedom for custom illustration.

Skills You’ve Made has been altered to display a row of uniquely color coded Blueprints which images uploaded by the user.

Inline video far more prominent and eye catching. Breaks design convention in daring, but not aggressive way.

Header C2AExecution:V3 on tablet and phone resolution.

Pros: • Header illustration is more unique and joyful. Catches the eye and draws

attention.• Video section far more recognizable.• Card row redesigned to preserve their original dimensions.

Cons: • C2A Banner navigation too disconnected. No alignment elsewhere in the

design.• Complex backgrounds interfere with C2A text.• Inclusion of ‘too creative’ illustration makes inclusion moot as asset has to be

remove or made diminutive in other resolutions.• Removing Blueprint card text makes icons too disconnected from the rest of

the design. No visual anchor.• Featured skill is overpowering.• Chance that user generated imagery is offensive.

V3 Pros/Cons

FinalExecution:C2A navigation now consistent with video navigation. Header image also increased to maximize C2A real estate.

Featured Skill has had border removed. Design is more accent based instead of over-powering.

Card design now influenced by Material Design. Icon, head text, and body text now separate to live in their own space but read as a cohesive whole.

FinalNotes:Final redesign of the Blueprints website.

Phone resolution updated to accommodate the iPhone X notch.

Dragon Slayer

Pros: • C2A Illustration reverted to stationary illustration style. Better sense of shape

and depth.• C2A header navigation seamlessly matches with video navigation.• Design leverages Material Design on cards for increased readability.• Phone version has dropped categories menu to accommodate iPhone X

notch.

Cons: • C2A banner continues to be too complex and continues to disregard

illustration on the smaller resolutions.• iPhone notch creates strange component location on non-phone X phones.• Text size on cards becomes almost unreadable on phones. Increased text size

would mean taller card size, thus breaking Material Design standards.

v4 Pros/Cons

1. Fragmented navigation area leads to visual confusion and disassociation.

Recommendation: Adopt new category drop down as standard. Fast implementation and works across all devices and consolidates previously disconnected information. Easy to revert if need be.

Conclusions 1/3

2. The need to include a complex C2A header illustration with accompanying characters and/or landmarks creates visual tension previously not found in the Blueprints website.

Recommendation: Align the header navigation only and continue with Blueprints current illustrations until a more comprehensive design campaign can be undertaken.

Conclusions 2/3

3. Blueprints cards are hard to read and distend on tablet resolutions in a browser.

Recommendation: Adopt Material Design standard and allow cards more height to create better reading space on all resolutions. Additionally, cards should preserve their dimensions without risk of distention.

Conclusions 3/3

1. Categories: Relocate into the header as a persistent member of the UI family. “Skills you’ve made” becomes its own unique row.

2. C2A Header: Blueprints designers created a highly flexible header area leveraging SVG illustrations and a clean design aesthetic. Ultimately, it may not be the most complex style, but it is framed well and is never removed by viewing the site on other resolutions.

3. Video: Can be made larger and more prominent. Video showcase row which slightly defies convention could potentially be added.

4. Blueprints Cards: Individual Blueprint card designs can increase in height to allow for a better reading environment across devices. A Material Design style type works well.

5. Final: I would recommend V1. Easy to implement solution, more realignment than redesign. Could easy hold the branding effort until a more comprehensive redesign campaign be made.

Learnings

Thank you.