search

codefordurham / school-navigator

Navigate the Durham, NC public school system
https://durhamschoolnavigator.org
26 stars 16 forks source link

Improve design (UX and visual) for school profile page #316

Open basiacoulter opened 8 years ago

basiacoulter commented 8 years ago

The school profile page needs better information hierarchy and visual design to support it.

basiacoulter commented 8 years ago

I have created medium fidelity mockups for two alternative designs. Next steps:

Design 1 school-profile-page-design-1

Design 2 school-profile-page-design-2

vrocha commented 8 years ago

@basiacoulter I love the changes that you are proposing for the profile page. It's difficult to decide between option 1 and 2. Due to the amount of information on this page, I want to side with option 2. Do you think you would be able to come to our meeting on Tuesday?

basiacoulter commented 8 years ago

@victor-rocha Ideally, if we have time, I would really like to test the two with users and see which one they like better. Also @bendte has found a resource showing other layout/UI options and I want to take a look at that and perhaps generate yet another version. If we can get HTML prototype pages built (happy to try to build), we can send links to different groups of parents to get feedback. @bendte and I have been brainstorming about a survey, and we should be able to gain access to parents' groups.

My husband had a knee replacement surgery last week, and he is not independent enough yet for me to be able to do evening activities this week. So I will have to skip this week Tuesday meeting. I will try to do some more work from home, and if I have another mockup, I'll post here, although that is more likely to happen toward the end of the week.

crpike commented 8 years ago

hi @basiacoulter I'm pitching in as well (I'm new to code for durham) - is there anything I can do to help on this particular ticket? I'd be happy to give some feedback on those designs, and even potentially pitch in some UI options. Just let me know!

Btw – we've actually met before at SUDDS many months back, introduced by Jere C. Hope you're well!

basiacoulter commented 8 years ago

Hey Ross, yes, I remember! Great to "see" you again. Small world :-) Please offer feedback on these, and any ideas for better UI options are very welcome! Can you add yourself to this ticket?

crpike commented 8 years ago

@basiacoulter eww... I'm not sure how to add myself to this ticket. I wonder if since you opened it, you'd need to 'assign' me... not sure.

basiacoulter commented 8 years ago

@sarahsba How can we assign @crpike to this ticket? He does not seem be on the list of people that unfolds when I click on the assignees gear icon. Is he not added to this repo?

sarahsba commented 8 years ago

@alexlemann can you get @crpike onto this ticket? He's not showing up in the list of assignees, not sure why.

alexlemann commented 8 years ago

@crpike I sent you an invite to join the CfD GitHub team. Once you accept that anyone on the team can add you as an Assignee on the right of this issue.

basiacoulter commented 8 years ago

Thanks @alexlemann for your help with this! Also I have separated user testing from this ticket. It is now a separate ticket.

basiacoulter commented 8 years ago

I have reviewed briefly (will spend more time on it later on) the materials that @sarahsba and @bendte shared, and here is another design suggestion (quick sketch for now) that attempts to leverage the following:

  1. Have a callout section at the top (in this version it features points of pride, a small map showing school's location, address, hours, and contact info; the selection of info for this section of the page still subject to discussion)
  2. Divide the content into 4 major categories (right now it suggests: "About School," "Enrollment," "Academics," and "Services," but there may be a better way to categorize the content)
  3. Within each category, build a layout the combines cars and accordion UI patterns: The page is laid out as 2 columns of "cards", each card acting like an accordion element, partially open to start with, with a link to open it more to read the remaining content

Feedback welcome.

sn-v3-wireframes

basiacoulter commented 8 years ago

A quick note about having that small map on the page. We should not be assuming that the user will always land on the school profile page from the map of the navigator. If a profile page is shared directly among parents, it may helpful to have the map embedded right for the parent to be able to understand the school location quickly.

basiacoulter commented 8 years ago

@victor-rocha I'd like to build an HTML/CSS prototype of this page as shown in the mockups and sketches above. I want to have an actual live page (or two, if we decide to test alternative designs) to test with users. I am not proficient enough with Angular to be able to do it in Angular, but I can build a responsive page with Bootstrap, and leverage a lot of their pre-built components (such as accordion or tabs).

I have cloned the repo and pulled a branch for this issue, I got a local server running, so I am ready to go. I want to check with you, though, in terms of file structure. Should I create an independent folder for the page prototype inside frontend folder, where I will include Bootstrap dependencies (I am not seeing Bootstrap in this project, but maybe I am not looking in the right places), and my custom css for now? The prototype page does not have to integrated with the rest of the app to start with, it can be a stand alone page, just for testing purposes. At the same time if you see any advantages in building it in a way that will make it easy to integrate it with the rest of the app later on, I'd like to do it in a way that makes sense to you.

LASHirsh commented 8 years ago

Hi @basiacoulter! Can you share the picture you took on your phone at the meeting 2 wks ago that had the final result of the card sorting exercise we did with @bendte? I have the other images but not that one. :-) Thanks!

LASHirsh commented 8 years ago

Thanks for your quick reply, @basiacoulter! Unfortunately, I'm not seeing it on github or as an email attachment. :-( Can others see it here?

basiacoulter commented 8 years ago

How about now @LASHirsh? img_4254

vrocha commented 8 years ago

I wasn't see it either. Last comment has it now though.

basiacoulter commented 8 years ago

Great!

LASHirsh commented 8 years ago

It worked the second time, thank you!

basiacoulter commented 8 years ago

This is how far I have been able to get on my own, building the prototype school profile page. Will need @victor-rocha 's help figuring out how build tabs that will work with Angular (he and I have already had a conversation about that and will work on it at the next meetup), and implementing Sass, so we can build color palettes specific to school levels (elementary, middle, and high). So still work in progress, but definitely progress.

screen shot 2016-08-03 at 3 14 48 pm
sarahsba commented 8 years ago

@basiacoulter, this looks great! I love the tab approach, and I think the way you've broken it down seems logical and intuitive. Let me know if I can help with identifying or reaching out to contacts for the usability testing.

One small point of feedback, I spent quite a bit of time floating different titles for the testimonials section, and the one that ended up resonating the most was "community feedback." People thought testimonials sounded like it would be skewed to the positive, and "reviews" sounded too cold and treated a school like a product on Amazon. Given this feedback, I'd suggest using "community feedback" as your starting point for the last tab, and you can adjust further as needed based on the user feedback you get.

LASHirsh commented 8 years ago

Well done, @basiacoulter! @sarahsba, I think your suggestion is excellent and well-reasoned. I'd also be happy to help with usability testing. :-) See y'all this evening.

bendte commented 8 years ago

Looks great, @basiacoulter! @sarahsba, thanks for your offer to help with identifying contacts for usability testing. That would be great.

I had a thought this morning about usability testing at one of the public libraries although that would take some planning and work with staff at the library. Just a brainstorm I had this morning. Looking forward to seeing everyone this evening.

basiacoulter commented 8 years ago

@sarahsba Yes, please, we could use your help identifying contacts for usability testing. If we can create a list of people to whom we could send an opt-in form that would be great. I still want to get an intro to the SoDu Parents Posse but my connection is out of town till next week, so I cannot get this done before tonight.

I love "Community Feedback" for the testimonials section.

sarahsba commented 8 years ago

Great! I'm still at work, but I will send over some ideas later this evening of contacts for usability testing.

On Tue, Aug 9, 2016 at 9:44 AM, basiacoulter notifications@github.com wrote:

@sarahsba https://github.com/sarahsba Yes, please, we could use your help identifying contacts for usability testing. If we can create a list of people to whom we could send an opt-in form that would be great. I still want to get an intro to the SoDu Parents Posse but my connection is out of town till next week, so I cannot get this done before tonight.

I love "Community Feedback" for the testimonials section.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/codefordurham/school-navigator/issues/316#issuecomment-238557160, or mute the thread https://github.com/notifications/unsubscribe-auth/ALfAvq6re0nU8cbPiYPOvM7iZxTozbzgks5qeIRYgaJpZM4Iz3Y4 .

basiacoulter commented 8 years ago

Hi all,

I cannot make it next Tuesday.

Bendte and Lauren, if you are there on Tue, unless you have other tasks, how about getting started with the survey questions and tasks for remote usability testing?

Basia

— Basia Coulter

(603) 714 8535 | www.basiacoulterdesign.com http://www.basiacoulterdesign.com/ @BasiaCoulter | in/basiacoulter

bendte commented 8 years ago

I too will not be able to make it this Tuesday. But, I'll do some work this weekend on survey questions/tasks.

See you all next time!

LASHirsh commented 8 years ago

​I RSVP'd some ​months ago to attend the UX panel at Bronto Software this evening​ so unfortunately won't be in attendance at the Code for Durham meeting tonight. I will plan to put some time into working on the survey in the latter half of this week though.

basiacoulter commented 8 years ago

Thanks to @victor-rocha I got the tabs to work in the HTML prototype of the page. I will need some front-end help next time to replace the current profile page with the new prototype page, so we can link to it from user survey. @victor-rocha @JonathanFrederick Can one of you help me with that on Sept 20?

basiacoulter commented 8 years ago

Actually I just realized we cannot yet replace the profile page because the survey is not yet completed, but we need the new prototype to be accessible over the Internet, not just on local server, so we have to figure out how to do it.

vrocha commented 8 years ago

I will be there on the 20th

basiacoulter commented 8 years ago

Yay!

Sent from my iPhone

On Sep 10, 2016, at 1:32 PM, Victor Rocha notifications@github.com wrote:

I will be there on the 20th

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

basiacoulter commented 8 years ago

Woohoo! The new profile page prototype page is live now! Thank u @victor-rocha! Now we need a test and survey plan, and we're in usability testing business. Here is a link to sample prototype: https://durhamschoolnavigator.org/#/school-new/183/

sarahsba commented 8 years ago

Love it!

On Tue, Sep 20, 2016 at 6:44 PM, basiacoulter notifications@github.com wrote:

Woohoo! The new profile page prototype page is live now! Thank u @victor-rocha https://github.com/victor-rocha! Now we need a test and survey plan, and we're in usability testing business. Here is a link to sample prototype: https://durhamschoolnavigator. org/#/school-new/183/

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/codefordurham/school-navigator/issues/316#issuecomment-248457922, or mute the thread https://github.com/notifications/unsubscribe-auth/ALfAvvuFrlB35AN_aja7x094f5eg6YPTks5qsGHMgaJpZM4Iz3Y4 .

basiacoulter commented 7 years ago

@LASHirsh Do you mind uploading your mockup here, with a comment this is a redesign after usability test. Might be nice to have the history of the page redesign in one thread. Thanks.

LASHirsh commented 7 years ago

Sure @basiacoulter. Here is a mockup with the next iteration of the profile design. The changes were guided by the results of the usability testing.

Feedback welcome.

For now, @basiacoulter and I propose working with the generic gray across all schools until we finalize the color coding scheme for the different school levels for the entire site.

Note: Styling of Admissions & Services tab represents hover state and mimics existing tab styling on the site.

large device desktops - overview generic school

large device desktops - overview elementary

A planned future iteration I have begun mocking up includes improved views for mobile users as well as large devices. On large devices, the overview tab content will be displayed in a side panel.