A New Version of the Concept has been posted. View New Version
ZoomConcept Reviews
Positive Feature Love the icons New Idea on introductory_page_example_insomnia.jpg 1 Maybe you could put your logo there, on the top ? Summary:
There may be a bit too many different colors. But the simplicity of the hol thing make it easy to read and it works.
-
-
Patrick Roux commented:About the PDF, I was wondering weither it was finished? While reading the first page, we can see §3 with it's description/recommandations on the right, but not for the others §s, and while reading it I expected to find detailed infos about them.
By the way, this is great. I mean, we still have the whole context but still can reads the details about just one point.
And the table on the second page is quite descriptive.
Sorry if I dont express myself right, but I'm trying :)
-
Stefanie Kelly commented:
Thanks everyone for your reviews! I just realized that the links that I had tried to include for the other two examples of guides besides insomnia were not working properly, so you would have only seen the insomnia 5MMS guide. I've updated the screen shots in a way that gives a better view of the big picture of the concept, with various examples of the pdf guides. If you happen to have a chance to check out the new screen shots so you can see both the introductory page for each guide on http://www.hdlab.ca/ (the first screenshot I've provided is an example of that), and the different variations of the guides themselves (represented by the remaining 3 screenshots of the various pdf guides, it would be great - but in any case, I appreciate all of the input so far!
-
Summary:
In the first example, the copy here breaks away from the column to the left of the image and spills across the page under the central image but for only one line. The last two sentences in this paragraph could be written less elaborately, just concise... 'patients expect to be able to access self-diagnostic resources on-demand.'
Everything else is lovely, well-balanced. On small, very high resolution screens such as the one I'm using the fonts are each appropriately sized.
The footer could be down-sized, use less negative space and employ the gains to include a slight increase in content. There is an embedded media link, almost tiny because of the small font size, at the upper right 'Trending' links. If this entire page is meant to act as a hub, embedded media are their own information hub within the page. It could be useful to emphasize this functionality on the first page, and there is potentially enough unused space to which may be allocated visual elements appropriate to easy identification of this multimedia functionality. 'embedded media' links to a mention of the CBC radio production with 300,000 listeners, this warrants some forward-operating design element which draws attention to this but especially if this specific usability requirement is made explicit in the first block of copy.
In the second example there is copy at the far right which appears entirely in colour, which doesn't have as favourable a contrast ratio as darker text such as that of the main copy at left. If employed at smaller sizes, coloured copy appears like an ink embossing printed onto glass which has come into contact with solvent, the contrast just goes I imagine because indigo blue and pure white are less unlike each other than pure white and black are, so there's this distortion of clarity that occurs which may be irritating for someone reading on a small, high resolution screen. To be absolutely certain you would have to test at least one version with an alternative copy-colour selection.
Every element that is present is otherwise pleasant to read and navigate.
In the third example the 'Resource' column contains very small headings in each partition. If you intend to keep the uniformity in the font size throughout the entire grid, consider capitalizing each of the headers in the left-most column. If you created it in Illustrator you can center-format the icons with the headers, though it is lovely as it is and doesn't really need any alterations. There is one very muddy turquoise colour selected in the left-most column. This could also work with a blue-tinged pale grey. The reason would also be because of the contrast ratio of pale-grey and black versus muddy turquoise and black, more of an aesthetic preference than necessity.
On the '5 Minute Med School Insulin' example there's a layout element using a blue stroke outline to divide into halves the page, you could consider subdividing the page using a single monochrome block and nest it in the lower right corner, or employ a uniform grid stroke weight to maintain graphical continuity throughout the two pages and as well this portion of the guide. The image may even be too large for what it brings to the guide,so you might be able to rely on sparsity and conciseness to get across the truth vs. myth intention of the page content, eliminate the photo and instead create or retrieve a very low-fi diagrammatic medical illustration of the same type of kit, and identify its contents and therefore benign intent by identifying matter-of-factly what goes into the kit and therefore into a diabetes treatment regimen as well. I do appreciate a few of the globe and mail's information graphics and art for that reason, they're at first distracting but by the time you've read about the systems or situations they're designed to articulate you have a better idea of the content of the article because the graphics often draw the subject matter together cohesively, and so I'm a proponent of this visual style.
In the 'Sound too Good to be True' example there are scaling issues, fonts that are capitalized are jarring when viewed in close proximity to the same font, also capitalized but appearing at a smaller size. The content of this page could as well be condensed into fewer fonts and sizes. The headers could also be uniform across the two pages and/or throughout this guide. The pill bottle illustration could benefit from a different subject, or remove the photo altogether and re-order the far right column, in terms of subject matter each of the points look like something that might be scrawled haphazardly onto someone's to-do list found on a refrigerator. I can see that the pill bottle is there but then there's white capsules of text floating on top, and the metaphor doesn't affect me with the immediacy with which it might if it were stripped down to fewer, some simplified elements like a faux-3D image of a post-it note. This is also more of an aesthetic preference, but if you do employ photos I like to think that they're featured centrally so as to build within the page some depiction of a situation out of which the decision to employ a photo or picture emerges as a necessary discretionary inclusion.
-
Stefanie Kelly commented:
Thanks everyone for your reviews! I just realized that the links that I had tried to include for the other two examples of guides besides insomnia were not working properly, so you would have only seen the insomnia 5MMS guide. I've updated the screen shots in a way that gives a better view of the big picture of the concept, with various examples of the pdf guides. If you happen to have a chance to check out the new screen shots so you can see both the introductory page for each guide on http://www.hdlab.ca/ (the first screenshot I've provided is an example of that), and the different variations of the guides themselves (represented by the remaining 3 screenshots of the various pdf guides, it would be great - but in any case, I appreciate all of the input so far!
-
Stefanie Kelly commented:
Whoops, Mark I just realized I mentioned the update to deal with the missing examples to you without noticing you'd already noted that and found the examples on the site on your own. Sorry about that, I had just done a quick initial skim of all the reviews so far with the intention of reading them in detail today. Rest assured all of the details of your review have since been read and appreciated! Particularly the point on the value of employing an infographic visual style to enhance and simplify the content. That is something I would like to make a consistent element throughout the redesigned guides.
-
Summary:
Hi Stefanie,
I had a quick peer around the current site and downloaded some of the pdf guides.
First in terms of usability, it would be good to design these guides to work directly within the browser rather than having to download the pdf where the information is not designed at all for viewing on screen. Really in their current format, you'd have to print them out and even then the information could be simplified and designed to be so much clearer and quick to understand. If these guides are to be printed then do one version for print and another version where the information is designed for viewing on the internet. You can always have an extra link to download the pdf for people if they want a version to print out too.
I was looking at the Health Design Lab's How to Control Your Blood Sugar. The problem on there is that too much of the copy is given the same treatment. The typography doesn't help distinguish the hierarchy of importance of information within the page. It's all given similar importance.
The copy is overlong so an entire paragraph could easily be cut down into two sentences and they would say the same thing - no extra information is given with the extra words, the words are just burying the message and hiding it.
For instance - Why should YOU control your blood
That doesn't need to be in a big blue background - it could be pulled out in larger nicer type and something not condensed but more open and friendly. Then it needs a question mark and the YOU in caps feels shouty and unfriendly.
Better still would be a simple sentence pulled out in display copy saying clearly: Controlling your own blood sugar is important to help you avoid kidney failure, blindness and having to have your limbs amputated.
This is over 100 words and three different coloured boxes cut down to a single pull quote and 21 words. If this is done throughout the pdf's, it would make the entire thing so much clearer.
The rather old skool boxes and tables obviously need updating in design. It may be possible to look at all the information and dilute it all down into a really lovely visually interesting info-graphic - this could work well on screen and also in print lessening the need for the two versions. The info graphics could be consistent in style across all the five minute guides.
Currently there is no consistency across them. The typography needs a huge amount of improvement and the design needs opening up and simplifying.
However, this is a lovely job to do - the information is all relevant and you've got all you need. It's the kind of thing I love doing - it's like taking a big ball of tangled wool and unraveling it, simplifying it down to the core information and finding a way of making that information look amazing. It should be very satisfying to do if a bit of a headache to start off with.
In many ways it's like any rebranding where basically you need to start from scratch just pulling the existing information out and completely redesigning the entire lot. Start with colours, fonts, Headline style etc - I'd find some kind of visual icon for the 5 minute idea to brand each of the guides with this single icon and pull them all together.
Hope this helps a bit - I haven't put notes on the individual guides since it's a total redesign from scratch job and I don't think there is much other than the information to take from the existing format. Obviously there are some individual elements like little icons dotted around which work but I think these are fairly obvious.
One thing I'd definitely lose is things like the insomnia image - maybe look at magazines like Stylist mag online and see how they treat things like insomnia - don't go down the depressing stock image route but think up of a good infographic/icon way of describing the problem visually.
-
Stefanie Kelly commented:
Hi Emma,
Thanks so much for taking the time to provide such thoroughly considered feedback! There definitely is a ton of work to be done here to take the existing content and rethink a consistent structure and style that will work across all of the guides - particularly as another component of the project is that they require these to be delivered in a format that clinicians can create and/or update the guides themselves. This means I need to stick to common tools, and have been exploring options such as Word templates (ugh) and interactive pdf forms. I like the idea of providing two versions - one for print and one more suited to on screen, but the need for them to be able to update and create new guides themselves adds a new level of consideration for this. But like you , this is definitely my favourite type of work to do! A true design challenge. As both you and Mark suggested I think a library of icons/infographics for them to use would go a long way
-
Emma Simpson commented:Hi Stephanie - glad you found some parts helpful. So hard if this kind of information needs to be in a way in which new information can be added by clinicians.
I would suggest a possible idea is to have the basic ideas which are unchanging to be presented in a fairly graphical easily understood more designed way and then to have links to a wikipedia type area which the clinicians can update themselves.
You could do the pages so they're v simple in terms of design and so easily updatable by anyone but then a lot of the information needing to be shown benefits greatly from more thought being given to it's presentation purely because there is a lot of fairly complex information. It needs tables, icons and graphics to bring it all to life. Good luck.
-
Summary:
Hi Stefanie,
As you think about developing a design template for these guides, I would suggest that you draw upon WordPress themes for some inspiration. I say this because by its nature, a blog template must be able to accommodate different lengths of articles that may be written by different authors. If you can find some ideas from WordPress themes, it may help you to develop a template that can withstand the rigors of updates by multiple contributors.
Probably, this would translate into something like a header with common styling across the guides, a main content area, and a sidebar. The space for a sidebar should probably be reserved on all pages whether it gets used or not to develop consistency.
Since there will be multiple contributors and editors, simplicity in layout will help the design hold up as it passes through multiple hands. . . a terrifying thought for any designer!
Developing a set of consistent icons is certainly one of the big tasks in a project like this, and I'm sure you're already thinking along these lines.
One thing I noticed as I downloaded the PDF's is that they all have different naming conventions. Establishing a common naming convention will be important for this project.
Writing branding guidelines to establish common practices among the contributors will also be important. You would just need to cover the aspects that would be under the contributor's direct control. For example, guidelines describing photo choices so that there is consistent styles. Right now, the photos for the insomnia and Walking May PDF's are radically different. Also included in the branding guidelines should be some criteria for authoring the content with regard to average paragraph length and use of subheads. This will help further the brand you are creating.
I hope this helps. I'll look forward to seeing your design.
Serious Problem I found this text particularly difficult to read. I would try a different font or increase the font size. Positive Feature on introductory_page_example_insomnia.jpg 1 I do like the layout, easy clear. New Idea on introductory_page_example_insomnia.jpg 1 On the bottom of the live site, the footer, the link and the bottom of the image of the right are all different shades of blues. I find that different shades are okay, but I try to make sure there are enough elements to justify that many colors. If everything is a different shade and there is not enough repetition of those colors then there is no sense of balance. What you haven't isn't that bad, I think it's just something you can play with. Start with matching the nav and footer colors. Summary:
-
Stefanie Kelly commented:
Thanks everyone for your reviews! I just realized that the links that I had tried to include for the other two examples of guides besides insomnia were not working properly, so you would have only seen the insomnia 5MMS guide. I've updated the screen shots in a way that gives a better view of the big picture of the concept, with various examples of the pdf guides. If you happen to have a chance to check out the new screen shots so you can see both the introductory page for each guide on http://www.hdlab.ca/ (the first screenshot I've provided is an example of that), and the different variations of the guides themselves (represented by the remaining 3 screenshots of the various pdf guides, it would be great - but in any case, I appreciate all of the input so far!
-
Thank you for your input Patrick. Did you happen to have a chance to check out the other links in my description at http://www.hdlab.ca/insulin5minmedschool.php and http://www.hdlab.ca/5minutemedschool.php ? My objective here is to improve consistency across the guides so some input on that bigger picture of the concept would be very helpful!