This concept is a new version of an older concept. View Old Version
ZoomConcept Description
- Objective:
- Improve consistency across the guides
- Target Market:
- patients
- Categories:
- redesign, usability, print, ux, user friendliness, user experience, education, medical, identity, branding, web presence
Based on feedback sought earlier on this site during my initial review of the existing 5MMS Patient Guides, I have developed this redesign with the Health Design Lab.
The focus of this redesign, based on feedback as well as my own review, was to create a consistent layout, consistent content structure and a consistent look and feel to be followed for all guides, existing and to be created.
All content from existing guides was edited down to fit the new content structure. I also designed a set of icons that can be used across all different guides as clinicians build out more guides in the future. These are editable Microsoft Word templates (to allow physicians to edit and create guides themselves).
The screenshots of two examples I have uploaded here are a little small so it would be best if you were to view the link under Website Url to evaluate size, spacing and readability. People will be able to click to either view these in browser or download them once they are up on the hdlab.ca website.
The first two screenshots represent the front and back (when printed; the first and second page when viewed in browser) of the Prediabetes 5 Minute Med School. The last two screenshots represent the front and back of the Mental Health 5 Minute Med School.
Previous Versions
Version 1
Concept has received the needed feedback and has been closed by the user.
Concept Reviews
Minor Problem on 5MMS_prediabetes_nd_Page_1.jpg 1 clock looks unbalanced. Needs to be vertically central to 5 minute next to it or align to baseline and cap height . The leading/line-height is too large here - you could drive a train through it. - Med School could align width wise to 5 minute above. It may be worth looking at this in caps or a heavier weight font so it starts to hold together better. 2 Cap height of this copy doesn't align to either the cap height of 5 minute or to the height of the box. It's floating somewhere in the middle. Would be worth changing the size of this type and aligning this better. 3 Top of key actions box not aligning to cap height of Prediabetes 4 huge gap at bottom 5 very tight spacing here compared to on the left 6 Eat Right, Move More and Weigh Less need to stand out more. Maybe put them in caps on a line of their own. -
Stefanie Kelly commented:I agree, but unfortunately then it wouldn't fit - I can't reduce the font size on anything (for accessibility) and the content has been reviewed and re-reviewed already by clinicians, so I can't cut it down any further at this point either.
-
Stefanie Kelly commented:
Actually, scratch that - on this prediabetes one, I guess I do have space, but not on many others (including the Mental Health one). I think I'll have to consider this on a case by case basis on each guide - to better utilize the space available on each one.
-
Emma Simpson commented:But then you need consistency across all the leaflets so if it doesn't work on all of them then maybe another approach is needed. Would caps alone work even without them being on their own line?
7 Cross head too far away from copy and icons floating and not aligned on left - the way you have it on the one you linked to is much better -
Stefanie Kelly commented:
Agree - in general alignment is something I know I need to tighten up now that the content is finalized.
New Idea on 5MMS_prediabetes_nd_Page_1.jpg 1 Maybe make more of a frame for the rest of the content out of the logo, the box out copy and the quote. This could help bring a stronger structure to the page and pull the design together better -
Stefanie Kelly commented:
Hmm, yes I was thinking of that and the director at Health Design Lab and I talked about this as something we wanted to tighten up - everything I've tried so far just ends up making the page look really top heavy though...I can keep playing with it.
-
Emma Simpson commented:
If I get chance I will have a play with this and see if I can work it out - I need to head off now. Am flat out at work. I can see how it could end up looking top heavy - maybe it's more that a stronger horizontal header needs to be made with the Key Actions box less prominent. But then it's nice to have the contrast of some white out copy on the page so that takes that option out... I promise to have a play with this soon - you've done so much good work with this already, would be nice to resolve that bit too.
-
Stefanie Kelly commented:
I was playing around with something like this https://docs.google.com/open?id=0B68ngS8LbqedYmYxNTNhODUtYTBkNC00NDc3LTk1MjItMmUzZGIxYmFmMmEw
-
Emma Simpson commented:
Hi Stefanie - see my comment to the right and the image I've uploaded - hope it helps :)
Summary:
Hi Stefanie,
You've made a real improvement from the original. It's
-
Emma Simpson commented:
only gone and lost my hour long review - hahahaha. CF really needs some back end work the poor old site.
-
Emma Simpson commented:
Basically I said you've really broken the back of the hard work. You've resolved the consistency issues and you just need to tweak it now to help it get the visual strength it needs
-
Emma Simpson commented:
Luckily I did a copy a while back and have some of what I wrote here:
This is much improved from what you had to work with in many ways.
First consistency through the online/offline formats is resolved and they've been simplified well. I think now it's just a case of tightening them up and resolving the hierarchies through the design to help faster comprehension of the information presented and help them look tighter.
The linked file on conceptfarm.ca works much better than the image here in the way that the cross headings work purely because they make single blocks of each question so visually it's less cluttered.
Where you have the cross heads in separate lines with an icon to the left and the cap height and baseline are not aligning to the icons, everything is starting to float a bit visually and not tie together enough. This has the result of the eye seeing each element separately instead of as a whole and so it takes a little longer to see each block of information as you have to visually resolve them as relating to each other. 'What is it?' ends up looking quite separate to 'If you have prediabetes...' below it even though they are relating to each other. The end of the copy is the same distance to the cross head below as the start of the copy is to the cross head above. Luckily you've sorted this out in the version you linked to on conceptfarm.ca
As a whole I think if things are tightened up in terms of alignment, then it will start to look visually stronger.
So the Key Actions Box could align with the Cap Height of Prediabetes.
Alternatively what may be nice is to form a stronger visual frame with the 5 min med school box, the copy to the right of it and the Key Actions box.
Currently because the copy to the right of the 5 Minute Med school is so light and again not aligning to anything, you end up with a slightly unbalanced space there and it means you lack that visual weight which you need for the page. As it is, there are too many things all with equal visual weight such as the 5 Minute Med School logo, the Key Actions Box and the Prediabetes head.
-
Emma Simpson commented:
I then finished off with a 'I hope this makes sense and it's late and really I hope it doesn't sound too daunting but it's just tweaks really to pull it all together now
-
Stefanie Kelly commented:
Thanks Emma, this type of feedback is actually perfect at this stage. I haven't gone through and cleaned up all of the alignment and such after focusing on finalizing content with the clinicians - your notes will be very helpful in giving me a checklist of what to pay attention to.
-
Emma Simpson commented:
Hi Stefanie - had a look at your doc you uploaded and yes I do prefer the quote like that. Maybe though what is needed is to open up that left area so you don't have the heavy block of blue. I found this little vector illustration on vectorstock - they're only a dollar each - there's a whole series of these little doctors which could add some extra personality and character. There's these: http://www.vectorstock.com/royalty-free-vector/set-of-funny-cartoon-doctor-vector-496256 and these: http://www.vectorstock.com/royalty-free-vector/set-of-funny-cartoon-doctor-vector-496266 - also put the 5 min med into caps to add some contrast to your typography which adds visual interest and also it means the whole bit of type acts as a block which anchors that top left corner without being as heavy as having that big blue block behind??? See what you think - it may be not 'serious' enough for what they're after - if not, there are some other really good 5 minute stop watch vectors you could get from vector stock which could lift that top left area and keep it serious too. Hope this helps :)
Attached Files:
-
Minor Problem on 5MMS_prediabetes_nd_Page_1.jpg 1 To me this is a bit too strong of an image, I look at this and feel like this is life and death issue. -
Stefanie Kelly commented:
Hmm - diabetes kind of is though? We want them to have a sense of urgency as to preventing themselves from developing it.
-
Jamal Jackson commented:I know, but you never really know to what extreme somebody might take it. Somebody might see that and immediately think like, "OMG I'M GOING TO DIE TOMORROW" Just taking into account that type of person is all.
2 A heart kinda relates to caring, but to me it more so relates to love and compassion. Which is like a stronger form of caring yes, but maybe a too intense image for this. 3 This refresh symbol is more so geared to redoing what you have already done, over and over. I do feel that you would benefit from choosing an icon that more so symbolizes change. -
Stefanie Kelly commented:
Good point, maybe two arrows signifying an alternative direction or something like that.
4 Too long of a paragraph. Always remember to match your paragraphs length with the amount of space given in its section. Minor Problem on 5MMS_prediabetes_nd_Page_2.jpg 1 Remove the big blue border, put a light grey solid line in between each section, and just use good spacing to separate the links. 2 This really doesn't go with resources to me. i think like a treasure chest or an open backpack with stuff in it would really work here. The treasure chest relates to this, because to the person this really helps, this is like a treasure to them. The backpack may be self explanatory -
Stefanie Kelly commented:
Hmm, I get your point but they both seem a little bit kiddy to me - I was thinking of this like a list I guess.
-
Jamal Jackson commented:
Yeah, but sometimes with serious stuff its nice to throw some more playful stuff to bring the tension down a bit. Maybe that's just apart of my personality.. :)
Minor Problem on 5MMS_mental_health_nd_Page_1.jpg 1 Get more creative here. This looks to much like the heading above it, and the body text looks too much like these even though they are not at a bold font weight. 2 Some people might view this image as a memory of getting lip service from a doctor in the past, just being told stuff that really isn't the case at all. Positive Feature on 5MMS_prediabetes_nd_Page_1.jpg 1 This one is okay because this is what I envision of a doctor having in their hand when they are telling me what is wrong with me when I visit them. Positive Feature on 5MMS_mental_health_nd_Page_1.jpg 1 I like this because the leaf represents alternative energy that is eco friendly in many circles, and it goes nicely here New Idea on 5MMS_prediabetes_nd_Page_1.jpg 1 Would make more sense to be a stop watch instead of a clock. The clock doesn't work as well as a stop watch would. 2 How about instead of quotes around the text, a quotation watermark in the middle of the text. Might look cool, and a little something here. -
Stefanie Kelly commented:
That's a nice idea, I wanted to do something more with this section in particular, I will try that out.
3 I would prefer to see like a confused face, or head here. This stage seems geared more to confusion about where to go then it is actually going to do something. -
Stefanie Kelly commented:
Good point - I was thinking more of the simple steps of what we want them to go and do - eat right and move more - but yes they themselves might not see that so clearly.
New Idea on 5MMS_mental_health_nd_Page_1.jpg 1 The key to me illustrates a straightforward plan to finding a successful route, or finish. It really doesn't fit with what the text here is saying. -
Stefanie Kelly commented:
It is in reference to the Key Actions referred to in the text - that's what they are meant to be, a straightforward plan to success.
-
Jamal Jackson commented:
I got that, but to me there are soo many ways about achieving this goal. You laid out good points there, but they may not work for everyone. Like the mingling one for example, I know people that really can't go out and just do that for some reason. Its just not them. i guess that's where I'm looking at from my perspective.
2 How about a person here, with the four arrows pointing in different directions around them here? Might work better -
Stefanie Kelly commented:
Because I can't make them any bigger (hooray for finite space on printouts ;) I didn't want to make these too intricate or complicated as details would be difficult to see at this scale.
Summary:
Hi Stefanie,
Content wise you are there, and that is something that you really shouldn't change. I've read your sections, they are short and sweet with a very straight to the point approach. Now there are somethings I would consider working on here.
Negatives
-Your color scheme. A white background is always a double edged sword in my opinion. On one end, it can perfectly give your design clarity and automatically brings the focus to the content or graphical elements within the design. It also does wonders for the user's engagement into the site right off the back, because it brings more focus to the site's content. However, on the other end if done wrong with a not so ideal color scheme, font choices, and structure, it could look very amateurish. Your site is leaning more to the latter.
-Some of the paragraph lengths. The size of a paragraph in a design is the deciding factor of a looker being delighted to read it, versus them being immediately intimidated and walking away with eye strains because of the thought of reading it.
-The blue sidebar. To me that is something that somebody new would do, and the rounded corners seem like an attempt to be modern that went bad. Remove the blue background, :)
-Some of the your icons don't really match with their heading text. They feel somewhat related, but at the same time it feels like there really could be something better there. I'll explain more individually in my annotations.
-Fonts. The fonts used in a site is meant to bring a clear representation of the level of importance they have in a design. More emphasis on header fonts, and more focus on readability on the body fonts. You really don't seem to have a good font breakdown for your hierarchy on your design.
-The big blue border going around the content on what I presume is the doctor's bio page(screenshot 2 and 4), don't look too appealing. I say remove, and just keep a straight line to separate the different sections.
-Consistent footer. If in any design you have a footer, it should be consistent throughout. I would just go ahead and keep the bottom line of text you have on the Doctor bio pages I mentioned earlier.
Overall, good starting point and with some work will look really nice.
-
Jamal Jackson commented:
Forgot my signature line at the bottom of all my reviews. Hope my input has helped you :)!
-
Stefanie Kelly commented:
Hi Jamal, thank you for taking the time to review. I think you missed in the description though, where its says these are PDFs that people will be able to click to either view in browser or download to print once they are up on the hdlab.ca website. Printouts may also be accessible in doctor's offices/waiting rooms - things like that. It's not a design for a web page or site, it's mainly for print.The design decisions - white background, minimum font size at 13 point (Ministry of Ontario accessibility guidelines for print), to work with were made with that context in mind, with limited space (two 8.5 by 11 inch sides of paper ;) to work with. I know having a relatively large body font can mean that the headers don't stand out quite so much, but I can't make it any smaller as I need to take into account people with impaired vision and/or older patients - in print they don't have the opportunity to enlarge font, as they may online. Similarly, I didn't want to use anything other than a white background, as otherwise for people printing these out to show their grandmother or for themselves (my parents still print emails to read, for example ;) it would eat up way too much of their printer ink. At this stage I also can't edit down paragraphs any further as they have been reviewed a few times by the clinicians I was working with and their words are very carefully chosen in terms of accuracy for patients. I approached a lot of this differently then I would had I even designed this for print but in Illustrator, for example - these are actually editable word documents so that physicians can edit, or create new guides themselves. So they had to be flexible in the sense that someone other than me, who is not a designer, will need to be able to create these and still have them look good. If you have any further thoughts based on that context, it would be great - I don't mean to be dismissive at all of what you've already written, I just can see how this would look a lot different from the perspective of "website".
-
Jamal Jackson commented:
Awww I see. This is one of those great moments on CF where one of us forget to read the description fully, and have made a review that may or may not have been completely relative. Don't you just love these times :)? I'll add some stuff to my review in the comments later.
-
Emma Simpson commented:
I think it's also one of those designs which is really hard as it has to work both in print and online without any change in the design for either since they're PDF's. In print, you need that blue box to have the contrast in type - it's always helpful to have some white out copy or some serif/sans combinations. On the web where reading on screen is much harder, white out text for long paragraphs is not always the best approach.
It does have the feel of a real old skool medical leaflet - it's very serious and not so modern but I'm not sure that's a bad thing. It could be given a much more modern treatment but would that have the same gravitas as the more old fashioned approach?
I don't know the answers - you could argue it either way I think.
-
Summary:
-
Stefanie Kelly commented:
Please don't post empty reviews. It isn't helpful - you would like actual feedback on your own concepts, wouldn't you?
-
Summary:
I would pretty much give the same advice as the other review already given so that's not really useful.
One thing I would consider altering is to increase the saturation of the blue (background + headings) to make it more easily scannable. It's a bit too flat imo.
Otherwise good job! (and much improved since the previous version)
-
Geert-Jan Brits commented:... more saturated and a bit darker
-
Stefanie Kelly commented:
Thanks Geert. I'm in the tweaking stage now so may play around with a few darker shades - I at one point had utilized two different shades of blue - this and a darker one - for contrast, but the client didn't love that iteration.
-
Minor Problem I know it is difficult designing websites that look sleek which consist a lot of content. However, I would really try and use bold, italic, font size and colour to bring out the key bits of information. -
Stefanie Kelly commented:
Thanks but this isn't a website - as the description says these are PDFs that people will be able to click to either view in browser or download them once they are up on the hdlab.ca website. Printouts may also be accessible in doctor's offices/waiting rooms - things like that.
-
Positive Feature Size
Utilize more size-
Stefanie Kelly commented:
Not really detailed enough to be helpful in any way - is it? How valuable would you find a review like this on your own concept?
-
Yes this is something I know I need to play around with a bit more.