Incorporate illustration and photography into the DS website

[Spark450]

Background

The design system will enhance the visual design of our website by incorporating illustration and/or photography, so that we can improve visual appeal, convey expertise in visual design, and create a more engaging user experience.

Acceptance Criteria:

1. Kickoff Meeting:

   • A kickoff meeting is scheduled with the designer to align on objectives and expectations.
   • Key topics for discussion:
     • The rationale behind incorporating imagery into the DS website.
     • Areas of the website that would benefit most from illustrations/photography.
     • Direction on the visual style for the illustrations, based on meeting notes and inspirations.

2. Visual Design Exploration:

   • Identify specific areas/pages of the DS website to pilot the use of illustrations.
   • Collaborate with the designer to propose initial concepts for illustration/photography.
     • Investigate the viability of AI illustrations
   • Ensure proposed visuals align with the DS and GoA brand identity.

3. Incremental Implementation:

   • Identify one or two key areas (e.g., landing page, all components page) for initial visual enhancements.
   • Create a plan for iterative rollout across other DS pages.

4. Guidelines Development:

   • Begin documenting guidelines for incorporating illustrations, including:
     • Visual style principles (e.g., balance of simplicity and detail).
     • Usage examples and placement recommendations.
     • Technical specifications (e.g., SVG standardization).

5. Scalability and Feedback:

   • Gather feedback from stakeholders on initial implementation and adjust as needed.

Additional Information:

References and Inspirations:

• Heroku, Fluid 2, Undraw, Gestalt (positive examples)
• Avoid styles similar to eBay’s DS landing page and overly simplistic imagery like Apple’s HIG.

Challenges to Address:

• Current DS website is text-heavy and lacks engaging visuals.
• Maintain a balance between trendiness and brand integrity.

Stakeholders:

• Sheldon (Design Director)
• Olu (External Designer)
• DS team (developers, designers, product owners)
• CPE?

Next Steps:

• Schedule and conduct the kickoff meeting.
• Collaborate with Olu to draft initial illustration concepts.
• Define areas for initial implementation and develop guidelines.