Comments (31)
Based on UX meeting feedback, @jenchuu and I worked on an Ideation for search page to show the top portion of large card is sticky when user scrolling. Below is our design iteration
Search Page V10
- Full view for the large card
- 1024px height view, when user scrolling:
from civictechjobs.
Based on the discussion that we had in the team meeting on Tuesday 8/24, I've assigned Jen (UX Designer), Ingrid (UX Designer), and Patty (UX Researcher) under the search page task.
from civictechjobs.
@jenchuu , please refer to issue #52 . We should either modify this issue to be more detailed on the specifics, or use the issue #52
from civictechjobs.
@sharadgaurav7 edited this further.
from civictechjobs.
V2 Search page designs (Figma)
@graceerya and I created limited and full view search results page:
- Subcategories by CoP for Roles filter
- Disclaimer copy on Limited view TBD
- Meeting Time filter TBD (dependent upon requirements from PMs and Bonnie)
- 4 project card options
Open to feedback at our next meeting.
from civictechjobs.
@jenchuu , we left the following comments on the figma file for the Search Page design:
Product Team’s comments 1/16
- Change “Start Onboarding..” to “Attend Onboarding”
- We would sugegst we have one page design for the limited page and the Full View page. In the limited page, the project details, and “join us on Slack” will be masked/redacted. Once someone logs back in with their credentials, the same masked/redacted info will be visible. This way we just design one page!
Project card design Must Haves:
- Role Name
- Role Overview
- Responsibilities & requirements
- Meeting Times
- and other tags from the filter options, such as Technology area
- REDACTED if Not logged in a. Project Name b. Project Overview c. “Join us on Slack”
We can have a quick chat on slack if you need any clarifications. Please let us know if there's anything else that is blocking you on the Search Page Design
Thanks
from civictechjobs.
@graceerya and I have made the changes per your comments above and designs are ready for feedback:
V3 Search page designs (Figma)
from civictechjobs.
We iterated upon our design based on feedback we received in a previous team meeting as well as preliminary user testing conducted with @janzenmolina.
In order to clarify that
a) Listed technologies/languages are not required, but will be practiced
b) All roles (besides developers) do not necessarily utilize technologies and skills
we combined technologies and languages into a more general "skills" headline, and added a tooltip informing prospective volunteers that skills aren't required, but can be beneficial to know beforehand
from civictechjobs.
We made changes to the mobile version mirroring those of desktop, including:
- combining languages and technologies into a more general "skills" section
- adding a tooltip to indicate that skills are not required but preferred
from civictechjobs.
@jenchuu can we get an update for this
FYI. @salimays
from civictechjobs.
@jenchuu and I working on search page designs. Here's Filter on top version:
- Different variations for filters on the top
- Unfolded look when Roles filter opened
- Body layouts for the page
from civictechjobs.
Based on team feedback, will working on the followings:
- Simplify the information on search cards
- Make filter one line on the top
Open to feedback at our next meeting
from civictechjobs.
@fenglugithub i like the design here with the filters up top and quick view cards on the side.
Questions:
- is the right side view locked to the page when a user scrolls on the left side to view other roles?
- is there any value in having role descriptions in every smaller card if we will be showing it in the larger card? most roles would have the same description (front end dev on one project will be the same description as a front end dev on another project) although the exact responsibilities would differ. for a potential volunteer the experience level and meeting times should be the most relevant information in a quick glance as if they don't line up, the role description will not have much impact. they would find more value in having instead the "skills you will learn" section in the quick view instead. can we see this left side card view without the role overview to better condense the information and one view with the "skills you will develop" instead?
- for the filters on the top, if i click the availability filter will there be a modal that pops up as an overlay on the screen or is it a drop down into the full calendar view? if it is the former should there be a "+" sign rather than a downwards arrow?
Thanks!
from civictechjobs.
@fenglugithub and I worked on search page designs.
Below are my ideations for filters on side version:
Option 1 shows selected filters as chips on top left side.
Option 2 shows selected filters as number badges in each filter section.
Below are my ideations for filter "badges":
Option 1 shows white number in blue circle badge.
Option 2 shows blue number in parentheses.
Below are my ideations for Roles filter when opened:
Option 1 shows list of checkboxes for all roles.
Option 2 shows modal window with role chips (same UI from Qualifier page).
from civictechjobs.
The designers met on Sunday and had a great discussion.
We decided to combine Lu and my designs somewhat: we will have filters on TOP with MODAL (pop up) window when user clicks on a filter.
We are working on combining the design.
Next step for us:
split up designing what the other open filters will look like.
@sdimran Can you confirm the filters for the LIMITED search results page? is it:
- Roles
- Availability
- Experience Level
- Technologies
- Program Area (***Is this one necessary? What does this even entail?)
from civictechjobs.
Per team leads monthly discussion, cut info shown in open role card... Definitely show:
- Skills you'll develop
- Mandatory meeting times
from civictechjobs.
@fenglugithub i like the design here with the filters up top and quick view cards on the side.
Questions:
- is the right side view locked to the page when a user scrolls on the left side to view other roles?
- is there any value in having role descriptions in every smaller card if we will be showing it in the larger card? most roles would have the same description (front end dev on one project will be the same description as a front end dev on another project) although the exact responsibilities would differ. for a potential volunteer the experience level and meeting times should be the most relevant information in a quick glance as if they don't line up, the role description will not have much impact. they would find more value in having instead the "skills you will learn" section in the quick view instead. can we see this left side card view without the role overview to better condense the information and one view with the "skills you will develop" instead?
- for the filters on the top, if i click the availability filter will there be a modal that pops up as an overlay on the screen or is it a drop down into the full calendar view? if it is the former should there be a "+" sign rather than a downwards arrow?
Thanks!
Thanks @sdimran
Here are the answers:
- Yes. The right side view locked to the page when a user scrolls on the left side. If the user click the other role card on the left side. then the right side page changed accordingly.
- That’s a good point! @jenchuu and I are working on simplified version for the smaller card. I agree the description show on both cards unnecessary and not efficiency for a quick glance. Will condense the information here and have “skills you will develop” instead.
- Thanks for bring that up. We are working on the availability and the other filters on Top with pop up window.
Thanks!
from civictechjobs.
Updated Roles filter when open:
- Changed view of multi-select chips to differentiate it from the single-select chips: added checkmark icon in front
Roles open filter
from civictechjobs.
Ideations for Experience Level filter when open:
Based on our UXD meeting yesterday, we are leaning towards one of the last 2 options.
Experience Level open filter
from civictechjobs.
Ideations for the Small role card options (small cards on left side):
We're trying to condense the info down even further than this. Will explore more ideas.
Small role card options
from civictechjobs.
Ideations for the full card on the right side.
We are trying to add icons and organize the hierarchy of content.
Will place with the content hierarchy more and have the text/color styles and icon library consistent.
from civictechjobs.
Ideations for Availability filter when open.
Referred to Qualifier page, we are working on the calendar in popup window.
Based on the meeting discussion, will condense the vertical space of the calendar and explore how that looks.
from civictechjobs.
Ideations for full card designs.
Based on our UX meeting, we may explore more for version B (the one in the middle).
from civictechjobs.
Updated Availability filter based on our pervious discussion.
Condense the vertical space of the calendar and make it less scroll.
from civictechjobs.
Updated Availability filter based on our pervious discussion. Condense the vertical space of the calendar and make it less scroll.
i like this view @fenglugithub great work! @jenchuu @Aveline-art were there any result from your discussions from this past week around the sticky day row at the top of the calendar?
from civictechjobs.
@fenglugithub @jenchuu hoping to get your thoughts on this perspective but we should be displaying the most important information at the beginning of the full card view which i think in this case would be the responsibilities (since we already show the mandatory meeting times in the preview on the left we can move this down in the list). can we order the information displayed in the following order of priority :
- overview
- responsibilities
- skills you'll develop
- mandatory meeting times
- experience level
if you have suggestions otherwise please let me know!
from civictechjobs.
Ideations for full card designs. Based on our UX meeting, we may explore more for version B (the one in the middle).
@fenglugithub @jenchuu for view C i do like the icons we are using for each of the categories. Also hoping to get your thoughts on this perspective but we should be displaying the most important information at the beginning of the full card view which I think in this case would be the responsibilities (since we already show the mandatory meeting times in the preview on the left we can move this down in the list). can we order the information displayed in the following order of priority :
- overview
- responsibilities
- skills you'll develop
- mandatory meeting times
- experience level
if you have suggestions otherwise please let me know!
from civictechjobs.
@jenchuu and I worked on the search page designs. We made iterations for both cards (smaller cards on the left side and full cards on the right ) and adjusted spacing for the layouts.
Below is our design iteration A
- We edited full card designs and played with icons, header with important info.
- We edited smaller cards with less info, filter chips with selected/unselected state
Below is our design iteration B
- We edited full card designs, played with less info in the header and moved button to the bottom.
- We edited smaller cards with more info.
from civictechjobs.
@jenchuu and I worked on Search Page filters. We made 2 iterations for the filter menu and the detailed subpages.
Below is our design iteration A
- We edited All Filters to More Filters in the menu.
- When user click more filters, it will take to Program Areas and Languages/Technologies popup window for details.
Below is our design iteration B
- We edited the filter menu and keep all the filters showing separately. Users could scroll right and left to explore.
-
We made two variations for the detailed subpages for the filter.
- Chips to show the options
- Check-box to show the options
Based on our UX meeting feedbacks, we will work on the following:
- Organize the chips in detailed page, try alphabetical order,or any better grouping/categories for the chips.
- Add Apply/Confirm button at the bottom of each filter.
- Add shadow or blur to the Filter menu to make the scroll transition looks smoothers.
from civictechjobs.
from civictechjobs.
**May need to reopen and change due to changing requirements for Skills which may affect Languages/technologies.
from civictechjobs.
Related Issues (20)
- Create foundational structure for CTJ Backend HOT 1
- Create database schema for Post Database. HOT 1
- CTJ Onboarding Questions and Comments [Xiaotian Vivian Li- UI/UX Research Lead] HOT 2
- Create a Requirement doc highlighting MVP 1 vs MVP 2
- Create New Post Endpoint for Post's Table HOT 1
- Create Seed file for Local Development on Post Database HOT 2
- Project Board Design HOT 2
- Usability testing for CTJ skills page design HOT 5
- Review PM Wiki for PM Skills Matrix Input
- CTJ Onboarding Questions and Comments [Sheny Lin - UI/UX Researcher] HOT 1
- Prep Project Boards for Migration HOT 6
- hello HOT 1
- Recruit volunteers for team open roles HOT 8
- CTJ: Open Role for: Project Manager HOT 1
- Civic Tech Jobs: Open Role for: User Researcher
- Civic Tech Jobs: Open Role for: Front End Developer
- CTJ Onboarding Questions and Comments [Nooria Ali - Project Manager] HOT 2
- CTJ Onboarding Questions and Comments [Peter - UI/UX Designer]
- Look through closed issues for CTJ highlights for Hack for LA website
- TEST
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from civictechjobs.