BCcampus / eypd

Early Years Professional Development
https://earlyyearsbc.ca
1 stars 4 forks source link

EYPD Design Elements #30

Closed kathreenriel closed 7 years ago

kathreenriel commented 7 years ago

Create wireframes that illustrate recommended design and calls to action in terms of fonts, styles, colours, buttons, links and placement/format to maximize the user experience for each of the following roles and processes. See attached file for outline of user stories. user stories.pdf

Magitron commented 7 years ago

@kathreenriel a rough home mock to get us started. (I will upload a mock of the different nav states as well) (Also, please ignore the logo on the mock)

I put the actionable items like registering in the top nav, where you will see "post an event" as well.

My main concern was communicating the main point of the project:

  1. I think it would benefit greatly to add a value proposition at the top that states what problem this project is solving for users (the main purpose of the project, something like the elevator pitch) Adding titles to the map (or steps like "Get started, search for events") will help clarify the user flow of the website.
    1. Putting the map or the search first. This depends on what the main focus is. I definitely think the map isn't enough on its own, and that it needs a description of the events you can find on the map, or events in a chronological order. Then you can use the map to see exactly where those events are being held (like the functionality of google maps). (On a side note, its really important to remove the scrolling from the map, so that the user is able to scroll down the site. The user should still be able to use the plus and minus buttons to zoom in and out of the map.
    2. I removed some of the fields from the search form to make it more clear.

Footer: I moved "Terms and Conditions" and "Privacy" to the footer and added "Contact" there as well. This is a common pattern. Other links such as social media links or other contact information can be added here to.

screen shot 2016-11-22 at 10 33 13 am
Magitron commented 7 years ago

Nav States. The only thing that changes based on if you are logged in as Learner or Organization is the top nav.

A learner can see their saved events under "My events"

An organization can post an event under "Post an event", they can see and edit their events under "My events", and they can see and edit their profile and account information under "Profile"

screen shot 2016-11-22 at 10 46 11 am
bdolor commented 7 years ago

👍

Magitron commented 7 years ago

@bdolor I also have a suggested type hierarchy to help format text. I usually also use spacing units of multiples of 4px to help create an even layout.

font size/line height

H1 = 32/36 H2 = 24/28 H3 = 20/24 UPPERCASE H4 = 20/24 Title Case H5 = 16/20 Bold P = 16/20 P = 14/20

Magitron commented 7 years ago

Events List (you can ignore the top nav here)

A list of events. This may be the same for Learners and Organizers. The difference will the meaning of the edit button. Depending on the backend functionality, Organizers viewing their own events can edit their event details (name, time, location) and can remove events. Learners will be able to use edit to remove events from their list.

Search results will also look like this, except with the title "Search Results" instead of "My events", and there will be no edit button. I think it would be nice to display the search criteria used on this page as well, I think those details will be valuable if someone shared their search results.

screen shot 2016-11-22 at 11 45 57 am

Event

This will be relatively the same for Organization and Learner, except that the edit button will only be available if an organizer is viewing their own event. The edit button will not be visible for Learners or Guests.

screen shot 2016-11-22 at 11 46 47 am
bdolor commented 7 years ago

Thanks for this @Magitron — I don't know if the following elements are still subject to change, but if/when they're locked down, would you post here the colour palette and fonts used?

kathreenriel commented 7 years ago

Super start to the home page @Magitron! Here is my feedback with revised pics of the homepage below

Header

Map Section

Search section

_

Learning Showcase section

Footer

learningshowcase

homepage
kathreenriel commented 7 years ago

@Magitron Nav States Here are my revisions for this based on our conversation this morning and other look at it this afternoon.

user-page
kathreenriel commented 7 years ago

My Events Page

kathreenriel commented 7 years ago

@Magitron View Events Page looks good

event page
bdolor commented 7 years ago

re: moving the grey nav bar to the top creates an awkward bump up against the admin bar when a user is logged in. Grey nav bar will bump right up against the admin bar. Kathreen has asked for the admin bar at the top to be removed https://github.com/BCcampus/eypd/issues/33 though getting rid of it entirely means replacing a fairly robust navigation system.

image

Though the needs of the user at this iteration are fairly minimal, view profile, edit profile, logout, they will grow. Setting up an expectation of where to go for these functional elements will avoid potential confusion down the road. The current design needs to consider either incorporating the admin bar or be able to eventually replace a complex navigation system with some or all of the above elements.

kathreenriel commented 7 years ago

Right @bdolor the grey and black nav bar together at the top collide. My understanding is we are leaving the black nav bar in place and taking out the words, "how's it going" and the Wordpress icon in the top left hand corner, magnifying glass in the top right hand corner then waiting for feedback from the community before considering to omit the black bar - will duplicate this comment in #33 @Magitron I'll leave the placement/inclusion of the grey nav bar with you to consider further and propose suggestions.

Magitron commented 7 years ago

@bdolor @kathreenriel Just to make sure I'm understanding this correctly. The admin is only for administrators of the site, not for the users? In that case, /wp-admin just be used to login as an administrator? Is that where you say we are losing the nav system?

EDIT The sign up looks like its for the user, but the log in looks like its for wordpress admin...

Either way I think if the login is for the user, it should be part of the main nav, and having that login bar at the top can be confusing to the user because it doesn't seem like its part of the same site. Can I restyle the back wordpress bar entirely?

@bdolor I don't think I have your email address, could I email you with some questions on the development?

kathreenriel commented 7 years ago

@Magitron Brad's email is bpayne@bccampus.ca he is not working on Fridays for the next few weeks.

The black admin bar provides all levels of login (Admin, Organizer and Learner) and administration describes the options all user can change in a submenu within the black nav bar. See pics below for Olivia (organizer) and Larry (learner) olivia- organizer

larrylearneradmin

kathreenriel commented 7 years ago

@Magitron yes redesign the black nav bar

kathreenriel commented 7 years ago

@Magitron just remembered that the Ministry logo needs to be on the homepage. Here's the logo provincial office for the early years_cmyk_pos 1

kathreenriel commented 7 years ago

Hi @Magitron here's a summary of 'to do's for homepage

Magitron commented 7 years ago

Homepage

screen shot 2016-11-30 at 7 35 27 pm

My Events

screen shot 2016-11-30 at 7 38 46 pm

Event

screen shot 2016-11-30 at 7 38 34 pm
kathreenriel commented 7 years ago

Hi Maggie,

The homepage is looking good!

feedback-homepage-dec-1
kathreenriel commented 7 years ago

@Magitron Answer to your question, In one of our calls you had mentioned a list of pages that need to be ready for the first development phase (for Dec 8) Could you send me that list? Then I can make sure I have all the styles covered.

  1. Homepage
  2. Post An Event Page
  3. View An Event Page
  4. Edit My Events (is this your proposed "My Events" page?)
  5. Sign Up Page
  6. Profile Page
  7. About Us Page
  8. Terms and Conditions Page
  9. Privacy Page
  10. Help Page

@bdolor am I missing any page(s)?

Magitron commented 7 years ago

@kathreenriel, this is what I was thinking for the nav bar. (except with My events being Edit my events)

screen shot 2016-12-02 at 1 50 57 pm

I think I also still need two links and graphics for the showcase :)

kathreenriel commented 7 years ago

@Magitron Here are links, text, graphics for the Learning Showcase

Science of Early Child Development link - http://www.scienceofecd.com/

The Science of Early Child Development (link -http://www.scienceofecd.com/) (SECD) makes current research accessible to anyone interested in learning more about the impact of early experience on lifelong health and well-being. SECD offers many online resources to bring research and concepts to life with hundreds of readings, videos, links, reflect questions and interactive activities.

Kindergarten Transitions (link : http://www2.gov.bc.ca/assets/gov/family-and-social-supports/child-care/supporting_seamless_transitions.pdf)

Maureen Dockendorf, Superintendent of the Early Years, has distributed Supporting Seamless Transitions for B.C.'s Youngest Learners (link: http://www2.gov.bc.ca/assets/gov/family-and-social-supports/child-care/supporting_seamless_transitions.pdf) , a summary that highlights practices used in schools and communities to support our youngest learners as they transition into Kindergarten. Regional professional development sessions will occur in the spring in each of the Fraser Valley, Kootenay Boundary, Metro, Vancouver Island, Northern, and Thompson-Okanagan regions.

science-of-early-child-development kindergarten-transitions

bdolor commented 7 years ago

Is the current plan to put the SECD content statically into the homepage template, or can I suggest an alternate arrangement?

kathreenriel commented 7 years ago

@Magitron no need to build/design the Learning Showcase - @bdolor has come up with a different way to automate/post the content for this section. let me know if I can clarify

bdolor commented 7 years ago

Resolved via https://github.com/BCcampus/eypd/commit/d9fcefe39ce19c0e6f7e32c0d2e3b36b2103ee5a will now take the top 2 posts that are 'sticky' and with a category of 'Homepage'

kathreenriel commented 7 years ago

@Magitron the site is looking really good! Are you going to format the map section to appear as proposed earlier designs? middlesection

Magitron commented 7 years ago

@kathreenriel I would like to, but I think there would be some more development needed from @bdolor. I can style the information once its there, but I'm not sure where to pull that information from. My thought was to have details of the events in the current map section on the side, sort of like google maps. If that isn't possible, I think would be okay to just have any upcoming events in chronological order on the side, just to give the user an idea of current event listings.

bdolor commented 7 years ago

It is pretty straight forward with events manager plugin to list upcoming events. I'll see what I can do.

bdolor commented 7 years ago

@Magitron - created an area on the homepage for the events in this commit https://github.com/BCcampus/eypd/commit/38c69fdb2c7f3904261cc6d21f189d2957016b11

a couple different options for how events are displayed, I commented out one of the options. https://github.com/BCcampus/eypd/blob/dev/templates/homepage-template.php#L36

further documentation is here http://wp-events-plugin.com/documentation/shortcodes/ - feel free to play around, modify as needed.

kathreenriel commented 7 years ago

earlyyears

kathreenriel commented 7 years ago

http://apps.gov.bc.ca/pub/dmf-viewer/?siteid=6783861877466927876

bdolor commented 7 years ago

closing