Wireframe v1 of the Website

[AdesinaBernard]

Overview

We need to design a simple landing page for the Open Community Survey website so that developers know what to build

Action Items

• [x] Meet with Kevin to discuss ideas for wireframe design
• [x] Design wireframe
• [x] Get team to review wireframe
• [x] Update content on landing page
• [x] Change to grey background
• [x] Review wireframe with team

Resources/Instructions

Website Figma Website Draft EmpowerLA archive NC logos spreadsheet Footer Example - 100 Automations Preference Testing Questions Preference Testing Design Thinking Workshop Presentation Video Comparative Analysis Visualization Miro Board

[ebele-oputa]

@ebele-oputa Add Kevin to this issue

[ebele-oputa]

@AdesinaBernard might be helpful (logo conversation) - https://github.com/hackforla/community-survey-nc-websites/issues/10

[ebele-oputa]

@AdesinaBernard @kvnw2020 Please update content with landing page draft

[ebele-oputa]

Ideas for web pictures: https://empowerla.org/city-map/

[ebele-oputa]

@ExperimentsInHonesty will reach out to John Ritchey for recording of pitch at Westland

[kvnw2020]

@AdesinaBernard and @kvnw2020 produce two mockups of comparative analysis with different hero images. Perform A/B test via usability hub. Place link in admin channel.

[ebele-oputa]

@ebele-oputa assist Bernard with timestamp content

[kvnw2020]

@kvnw2020 watch

[ebele-oputa]

@ExperimentsInHonesty will reach out to John Ritchey for recording of pitch at Westland

Recordings provided in this issue #32

[ebele-oputa]

@ebele-oputa assist Bernard with timestamp content

@AdesinaBernard @kvnw2020 timestamp content should be something like this -

If you want a brief description on what design thinking means, check out [insert timestamp] If you want to see a live example of how to use Miro to coordinate an interactive workshop with live audience, check out [insert timestamp] If you would rather spend [insert total duration of video. e.g. 51 mins] watching the entire workshop, watch the full clip here

[kvnw2020]

A script of hero image preference testing:

"Hi everyone, our team from the Open Community Survey project needs your help. We need to decide which picture should be the hero image and best represents our comparative analysis work. Our team conducted a comparative analysis with 99 neighborhood council websites. Our work can inform the LA Department of Neighborhood Empowerment and Neighborhood Councils of all websites and provide feature examples for platform development and reduce the research burden of each council during individual website redesigns"

[ebele-oputa]

Edited version: A script of hero image preference testing:

"Hi everyone, the Open Community Survey project needs your help [insert emoji]. Our team conducted a comparative analysis of 99 neighborhood council websites in order to find out what features they contain/should contain. Our intention is to provide the LA Department of Neighborhood Empowerment and the 99 Neighborhood Councils with examples of best features for their individual website redesigns.

We are building a website to house this data and we need to decide which picture should be the hero image (best visual representation of what we're trying to do). Here is the link to the quick 1 min survey."

https://app.usabilityhub.com/do/8e3f1c13820b/cead

@experimentsinhonesty could you review this today? Thank you!

[ebele-oputa]

Additions to website figma:

1. Landing page: Julien's image - https://media-exp1.licdn.com/dms/image/C5603AQFYMooDHQm2vQ/profile-displayphoto-shrink_800_800/0/1543454952576?e=1634169600&v=beta&t=iq_C-Z-WQx8rzXL4S22GQrxRgumm3TTZ7ltzhk4Y2vA
2. @kvnw2020 to watch videos for website redesign hero image inspiration

[kvnw2020]

@kvnw2020 Clean up Figma file

[kvnw2020]

@kvnw2020 Clean up Figma file

Done

[kvnw2020]

Hero image of Redesign page in progress in Figma file.

[kvnw2020]

Julien profile picture uploaded.

[ebele-oputa]

@ExperimentsInHonesty shared poll on slack

[kvnw2020]

69% of 29 participants voted for map of LA as a hero banner for the comparative analysis page.

[kvnw2020]

In progress of watching Zoom videos.

[kvnw2020]

Created 3 potential hero banners for Re-design page.

[kvnw2020]

@kvnw2020 need to edit design systems.

[kvnw2020]

@kvnw2020 need to edit design systems.

Looking into Design System resources. How to construct a design system

[kvnw2020]

@kvnw2020 need to edit design systems.

Looking into Design System resources. How to construct a design system

Text Styles from the previous Figma file did not transfer over. Need to manually place Text Styles onto new Figma file.

[ebele-oputa]

@kvnw2020 to work on the image for EmpowerLA redesign page

[kvnw2020]

Come up with four images for review.

[ebele-oputa]

@ebele-oputa get some ideas for design team for EmpowerLA hero image

[kvnw2020]

@kvnw2020 Get stock images that represent the Re-design website.

[ebele-oputa]

@ebele-oputa get some ideas for design team for EmpowerLA hero image

Done!

[kvnw2020]

Come up with 2 more images for Re-design page.

[kvnw2020]

@kvnw2020 updated Redesign page image according to Bonnie's recommendation.

[kvnw2020]

@kvnw2020 reorganize Figma file according to date.

[ebele-oputa]

@kvnw2020 reorganize Figma file according to date.

@kvnw2020 please create another issue for this task

[ebele-oputa]

@AdesinaBernard please create another issue for wireframing the mobile version

[ebele-oputa]

Task items:

• [ ] Create another figma page for only v1 website design
• [ ] Design Credits page
• [ ] Design Privacy Policy page
• [ ] Redesign Get Involved page
• [ ] Align wireframe content with website copy
• [ ] Check for page alignment, borders, content errors, etc

[ebele-oputa]

@jonarcisse Let's make issues and add milestones.

[ExperimentsInHonesty]

This issue was replaced by the following issues

• 56

  • 57

  • 55

  • 72