ePortfolio design options

September 12th, 2006

Here are my ePortfolio designs. Please comment on them using their reference number.

You are not commenting on the wording, just the overall look and feel!



A plain and simple design using a few brand colours, official fonts and big “web 2.0” type.



Building on 001, this adds a little more design but still keeps it minimal. The icons each side of the box would get more design work for the final version. The top bar remains slight but gains a background colour.



Radically different from the previous two designs. This follows the orangy designs I’ve worked with thus far. I modelled this on those touch screens you get when buying stuff in Argos. Also, mobile phone web apps where screen space is sparse. Top bar gets a mere three items – link home, new stuff, view stuff. The secondary global nav – help, prefs and search are moved away from the main two options.



More subtle than 003. Uses elements of the previous two styles but the top bar gets more items of equal weighting.



Again, this uses bits of previous designs.



Marrying with Moodle. I took David Winter’s current Moodle design style, added some of my stuff whilst changing the colours to suit the more pastel pallette of Moodle.



This one uses Moodle as the main influence, removing the bog text and images of all my previous designs. Possible less ‘web 2.0’ in design feel but strongly aligned with the current OU design direction for Moodle.

Tags: , ,

19 Responses to “ePortfolio design options”

  1. Anthony Forth

    Like 006. It seems more engaging than many other parts of Moodle, but a lot of Moodle design seems quite basic and I think there is a general feeling to improve this. It is also engaging without being completely informal, as per the designs that are heavier on oranges and reds.

    I think ‘new upload’ should read ‘upload file’ so that the word ‘file’ is used consistently in both ‘new’ and ‘view’ areas (the distinction between files, pages and compilations is relatively subtle and the lack of consistency confuses things further).

  2. Guy Carberry

    I think you’re right Anthony. I had toyed with this in my wireframe where it became very apparent that ‘new upload’ didnt fit with the consistency of everything else. I lef tit that way for the time being but you have confirmed my thoughts. I think I will change it. Unless anybody else has an objection?

  3. Guy Carberry

    I asked another designer for his input and he responded thussly..

    001 – perhaps too much white space, the icons are very good, like the emphasis on ‘new’ and ‘view’ in the middle

    002 – not keen on the main graphics. the eye to illustrate view doesn’t really do it. Bringing in the ‘new’ and ‘view’ links is a good idea, I’d like to see them listed with their own icons, that’d be cool!

    003 – I like the yellow but again not keen on the view illustration. The eye is a bit glaring, some people don’t like eyes (even though it’s not a real one)! Also kind of dig the idea of moving the lesser navigation links away from the main one’s

    004 – By far the best in my opinion. The yellow is in there but not too much, it brings the global nav out nicely. I like the simple ‘new stuff’ and ‘view stuff’ links, nice big text and simple graphics. There’s something about the links at the bottom that doesn’t quite fit with the rest of the design though.

    005 – Now I think about it I do prefer the help, prefs, search nav items in the global bar

    006 – Quite nice looking but feels a bit too technical. It doesn’t look as simple as the other designs which I think is key with these sorts of interactive sites

    007 – Same as above but no images to attract the eye!

    Hope this helps.


  4. Thanh

    Here’s my order of preferece from favourite to least preferred: 2, 5, 4, 6, 1, 3, 7.

    Design 2 and 5 are attractive, but I query whether these imagery persists throughout the sub-pages, or are they simply on the front page.

    Design 4 and 6 are more functional and more akin to current designs used within Moodle. I would say design 6 is a safe option that doesnt generate any dispaute. Design 4 is more cleaner and less Moodle-ish; I like the more whiter-tones which matches our current branding direction.

    Design 3 works as a front splash page; but I dont think it has any more potential. Design 1 and 7 are simply uninviting.

  5. Guy Carberry

    Thanh, this is simply the homepage. It’s a good starting point for the design direction but the content pages will be much more subtle, using the style we go for to influence them. Sub pages will not have big design images, they will instead focus the user on a task or enable the user to see their stuff without too much design clutter around them! From that respect, after the homepages, the design will become increasingly minimal, functional but relevant to the context.

  6. Thanh

    I agree with Anthony on the terminology point.

    But I might also extend it to page and structured page. I think Structured page should be changed to Forms.

    Page is find for creating generic blank documents to be compiled into any portfolio (e.g. a website); but Forms are very specific structured content that does not and may not fit on one page. So it may be slightly misleading to equate structured page with a form in terms of terminology.

  7. Thanh

    With ref: to Guy: Sep 12th, 2006 at 11:28 am comment:

    Thanks for the clarifiaction. My order of preference stands.

  8. Guy Carberry

    I agree to not call it a page. Still not entirely sure about creating a new form..

    This is the current wireframe structure. Do you think ‘New Form’ would be meaningful? Maybe there is a better label… Discuss.

  9. Thanh

    I think Forms says what it is; so may be we should use it for now until we come up with something better.

    I’m aslo pondering on the word records as in “Records Management”. What does this word say to you?

    Other ideas:
    Structured Content;
    Structured Information;

  10. Guy Carberry

    I like ‘records’. New ‘record’ could be interesting. Its more descriptive of an action. I am recording something.

    Forms doesnt really say what im doing. It’s the means rather than the end.

    You could argue that new page and new compilation are odd from the same angle but ‘compilation’ does feel like ‘im creating a compilation’ and ‘page’ – im creating a page. ‘Record’ fots well with this but ‘form’ does not. I cant work out why.

    ‘Forms’ may feel a little administrative which seems to go against the fun aspect of the tool.

  11. Thanh

    I can go with records. Yes record is the action verb and the means and the act of recording can be through a form; so they are complimentary in a way.

  12. Guy Carberry

    If nobody else has any objections then im gonna lock down on “Records” as the term.

  13. Rachel


    Haven’t read everyones replies – and am picking this up between meetings. HOwever, I really don’t like the lasst 2 – they feel very formal and grey. 3 the icons etc are perhaps too big, but I like the idea of more colour.

    Four – feels friendly and quite brand.

    Once you have decided on one (presumably at the end of today) – then the next iteration – it might be worth getting comments from David Winters.

    Great to be seeing some screen shots!

  14. Guy Carberry

    I’m gonna go with 4. It’s my fave too. It was third in Thanh’s selection. Anthony liked 006 which has a similar layout but more formal colours. The friendly and informal yellow topbar is still appealing to me. I’ll work around this version for user testing.

    I guess we could always offer ‘themes’ along with accessibility options so people can skin the thing however they like?

  15. Thanh

    I will go with four as well.

    Yes, do structure with “themes” in mind and making sure when designing that you note which components are themable.

  16. Guy Carberry

    sounds like fun 🙂

  17. David Winter

    006 is the least deviation from the moodle look. At this stage I would advise sticking close to this as this maintains consistency. The end user is familiar with the style and can concentrate on the content, the presentation of the content is great, right to the point. The layout is the same as 004 your own favourite.

    I agree that the yellow background is more informal but from an accessibility point this colour scheme could be a problem in terms of adequate contrast. You could look at 006 with more colour variation.

    I really like the web 2.0 influence – the increased font size and the more simplistic but more intuitive interaction, this is definitely the right move.

    My input would be too maintain as much consistency as possible, at this time that requires following what may seem as restrictive design practice. Further work is needed too define what we can and can’t do and as you know this is on going work in the styles and standards project.

    I hope this helps.

  18. John N.T. Martin

    Much friendlier than ther the August version – I love the very ‘laid back’ box. Perfect for a store of miscellaneous ‘career’ stuff! I liked the 004 version best, but not a big deal either way.

    But if you read the long comment I’ve just added to your ‘Geography trip’ blog, you will realise that course specific portfolios are a bit different. E.g. a series of pre-set course-related reports.

    Perhaps one might be able to switch to something like a card-file box with labelled tabs, or a well-thumbed box file? I.e. keep the basic ‘box’ metaphor, but have the capacity to vary its ‘box qualities’ for different contexts? Posh boxes for some things, laid-back boxes for others!

    Something I’ve also suggested elsewhere is that take-up of the e-portfolio is likely to be very much higher if it can serve multiple roles. For instance, if it can also be used as a general ‘e-assignment preparation, storage and submission’ facility, it would be much more likely to be used. After all, TMAs are likely to make up a useful chunk of any portfolio. But that sort of use might not quite match up to the ‘laid-back’ box!

  19. Guy Carberry

    All useful and valid points. We have a ‘formal’ and ‘informal’ setting which largely refers to the language and the way the thing talks to you. But we can also identify the specific design styles for various functions within the system. Course-specific cutomisiation is a key feature of the spec. I guess Thanh will be able to explain exactly the scope this though.