Awesome azd Template Gallery Site - MVP Design Work

[savannahostrowski]

Related Links

• Awesome AZD Templates Site
• Experience Audit Figjam

Task List

• [x] Conduct experience audit of the initial release of the Awesome AZD template site
• [x] Capture pain points and summarize into themes
• [x] Capture ideas for improvement and prioritize
• [x] Create roadmap to complete design work for MVP

Week 1

Oct 17 - 21

• [x] Prioritization + Ideation
• [x] Design Roadmap
• [x] Site Map Proposals
• [x] Content Mapping (Filters, Content on Pages)

Week 2

Oct 24 - 28

• [x] Navigation Pattern
• [x] Filter Categories & Groupings
• [x] Filter & Search Patterns
• [x] Card Patterns

Week 3

Oct 31 - Nov 4

• [x] Tie up card patterns
• [x] Tie up filter patterns
• [x] Template page layout
• [x] Template page Hero Copy
• [x] Template page CTA to submit a template

Week 4

Nov 10 - Nov 14

• [x] Visual Design
• [ ] Accessibility
• [ ] Mobile
• [ ] Getting Started Page (Time Permitting)
• [ ] About/Landing Page (Time Permitting)
• [ ] Resources Page (Time Permitting)
• [x] Review with Savannah & Team

Prioritized ideas

• [ ] We'd like to have something nicer looking for when the template author hasn't included an architecture diagram

[savannahostrowski]

[Austinauth]

@savannahostrowski I like converting this issue to an audit of the overall site 🎉 We'll have to discuss scoping and timelines during our sync later this afternoon.

A few quick notes on the placeholder image for the architecture diagram

• I have no issue making something quick for the interim that we can use immediately
• Long term I think we should look at whether the preview image is even useful at all in its current state. For most of the templates the architecture diagrams are too big and detailed to really be distinguishable on the tile view. Some of them are even cropped. Will investigate this further as part of the overall audit 👍🏼

[Austinauth]

Update 10/17/2022 This update covers the work completed last week.

• Completed initial audit of the Awesome AZD site experience (observations, questions, pain points,)
• Summarized core pain points into 5 themes
• Completed initial ideation for each pain point (below the themes)
• Reviewed inspiration sites & started rough sketching
• This week: Savannah and I to meet to vote on the list of ideas and prioritize together.
• This week: Begin creating design concepts and artifacts based on the ideas we prioritize

[Austinauth]

Update 11/07/2022

This update covers work completed last week. Project remains on schedule. Primary focus going into week 4 will be around completing the visual design.

• Completed initial prototype
• Received critique from both design and PM stakeholders
• Additional focus to be placed on detail page design exploration
• This week: Tweaking UX based on feedback
• This week: Syncing with Nitya to discuss implementation plans and scope
• This week: Exploring detail page designs + interactions for each template
• This week: Exploring contribution CTA placement
• This week: Begin visual design explorations (Fluent 2)

[Austinauth]

Update 12/05/2022

• Completed initial pass at the visual design
• Needs review with PM & Development team to determine next steps/timelines
• Outstanding: Requested template experience
• Outstanding: Mobile experience

[Austinauth]

01/17/2023 Implementation Plan Mtg

Particpants: @Austinauth , @hemarina

High-level notes

• For now we'll use this issue. @hemarina to make new dev issue in the future.
• Used the Fluent design system for components.
• Design prototype can be found here on the > MVP Template Page Prototype page.
• Need to follow up with @savannahostrowski and @rajeshkamal5050 on timeline and scoping.
• @Austinauth to update this issue with detailed redlines and component behavior.
• Most important components to build out first: Card > Detail Panel > Filters > Sort & Filter bar > Hero/Search > CTA cards > Global Navigation

Default page layout (light mode)

Page components

The awesome azd template page can be broken into chunks/components we deliver one by one.

‼️ All chunks feature a light/dark mode (viewable in the Figma file). ‼️ Many of the elements on the page are using Fluent components or built on top of them. ‼️ Fluent components should work for mobile, I'll create mobile mockups ASAP.

1. Global Navigation

Figure 1. A: Global Nav - Default

Figure 1. B: Global Nav - w/Search & Filter

Details

• Global navigation is sticky when you scroll.
• An additional sticky bar featuring search & filter tags is added below the global navigation bar once the user has scrolled past the hero section (see Figure 1.B).

---

2. Hero/Search

Figure 2.A: Hero Search - Default

Figure 2.B: Hero Search - No Results

Figure 2.C: Hero Search - Results

Details

• Must hit enter or return to search.
• Copy the user has input in the search field is lavander
• "X" appears in the search bar when user has input copy. Clicking the "x" clears the search field and cancels the search if they have already hit enter or return.
• "Learn more" link TBD.
• When the user scrolls past the hero section and search bar (out of frame) a second bar is added to the sticky global nav with the search field and applied filters (see Figure 1.B above).

---

3. Filters (Vertical)

Figure 3.A: Filters - Default

Figure 3.A: Filters - Filters Applied

Details

• Filter bar is on the left side of the page.
• Filters should work in tandem with search.
• If possible filters should be "and" and not "or"; eliminating results from the list if none meet the criteria. I understand this is likely out of scope. When the time comes and restraints are more clear, we should have an in-depth discussion around filter behavior that is in scope.
• Filter sections can be collapsed using the V carrot.
• No more than 6 filters should appear in a filter section by default. To expand the filters in a given section the user must hit "view all". This should load 3 more filters and make the entire section vertically scrollable.
• Individual filters can be cleared by clicking the corresponding check box or the "x" on the tag added in the "Filters applied" section above the cards.

---

4. Sort & filter bar (Horizontal)

Figure 4.A: Sort & Filter bar - Default

Figure 4.B: Sort & Filter bar - Search results

Figure 4.C: Sorting & Filter bar - Search results & Filters Applied

Details

• The Sort & Filter bar runs horizontally across the page above the template cards.
• It is impacted by the Search/Hero section. If someone searches the search query and # results are shown here.
• It is impacted by the Filters on the left side. If someone applies filters they are shown as tags here (see Figure 4.C).
• By default the section that displays filter tags is not shown on the search & filter bar.
• Default "sort by" options include: Alpha - A to Z, Alpha - Z to A, Date Added - New to Old, Date Added - Old to New. Additional sort by options will be explored in the future.
• The toggle on the right changes the cards from card view (default) to list view. Designs for list view still need to be made.

---

5. Template Cards

Figure 5.A: Card - Default

Details

• Template cards display horizontally in rows of 3. We will explore showing more or less cards per row depending on the viewport size.

• Cards feature the following metadata:

  • Author type: Microsoft Authored or Community Authored
  • New: Template added in the last 30 days
  • Popular: Template with X amount of GitHub stars (better metric for this?)
  • Template Name
  • Template Author
  • Short description (limited to 3 lines)
  • Filter tags: Minimum 1 Language, 1 Service, 1 IaC tag required for each template. Max 3 rows of tags; an ellipsis with hover functionality will be used in scenarios where tags cannot fit on 3 rows.
  • Quick use link: features the azd up command for said template

  6. Contribute CTA Cards

  Figure 6.A: CTA Card - Default

  Details

• Still finalizing design, but shape and functionality are complete
• Still determining final CTA links
• By default a CTA card should appear as the 6th item in the template list.
• When searching or filtering it will appear as the last item in the list. If there are no results then the CTA card is not shown (in favor of empty state messaging with similar content).

---

7. Slide-out Panel

Figure 7.A: Slide-out Panel - Default

Figure 7.B: Slide-out Pannel - Legal

Details

• Slides horizontally from the right when a user selects a template.
• Populated by template metadata.
• Slides in below the global nav.

• Content within the slide-out (beneath the tabs) is vertically scrollable.

  ---

  Remaining action items for @Austinauth

• [ ] Mobile design mockups
• [ ] Finalize CTA cards
• [ ] Add line to download azd in Search/Header
• [ ] Provide design for Filter expand/collapse functionality
• [ ] Provide design for ... tag on cards when 3 tag rows is not enough
• [ ] Provide designs for list view
• [ ] Run accessibility check on the design

[savannahostrowski]

I think this breakdown makes sense at the epic level - we can break each one of these chunks down as engineering work requires.

@hemarina I may help out a little here and there (I used to be a React dev!) but will give you a heads up.

@Austinauth Let's copy these chunks into separate tickets and turn this into an epic so that folks can assign (also good to let open-source contributors help!)