A scaffolded Webdesign Project

Photo by http://flickr.com/photos/oliphant/96932140/One of the toughest issues I find facilitating a web design course is when to introduce ideas and experiences as the course progresses. It’s such an individual thing… inevitably some learners feel overwhelmed and others get bored… I mean there’s so many factors such as prior learning, motivation, how much effort we apply out-of-class, how deep we look into a topic when we learn etc.

Our class is at the stage now where some of us have already completed our 2nd project – a small (3 page) website (including css layout, uploading, validating and running simple performance tests) – and are keen to get stuck into the next project – a real client project. In the past, running a client project so early in the course has introduced some struggles for Genie, Jude and I facilitating the course… if you’ve got any ideas, please share them!

The facilitator’s main struggle

Getting people interested (and therefore learning) in the critical non-coding aspects of web-design is one of my main struggles. I facilitate workshops in Information Architecture – trying to motivate leaners to see how important this area is – but no matter what I do, IA just doesn’t cut it next to photoshop’ing an image or cutting a new CSS design.

Because of this, when we then begin our first client project, we begin by coding up a prototype of what we think will work – without even waiting to look at the results of client and user surveys. In the past, the result has been that we don’t get to experience a realistic web design process because we all inevitably skip essential tasks that we don’t think are so important.

This then makes it pretty difficult for the facilitators to assess these skills or even encourage them in the next project… with the result that we have to assess these skills in a less-than-realistic scenario.

Scaffold by http://flickr.com/photos/ax-ro/74933457/So in the past, the option of starting a client project early on has not helped most learners to learn the other essential aspects of Web Design. But at the same time, working on a real project early on does provides an incredible amount of motivation for applying our coding skills. So the question I’ve been asking myself is: how can we use a client project early on in the process to build our coding skills as well as introduce and build on other essential aspects of web design?

A scaffolded Client Project

One thought I’ve been mulling over the past few days is to start a client project with those learners who are ready, but with a lot more “scaffolding” to guide learners step-by-step through the complete process (we have been scaffolding projects to some degree after reflecting on our web design course last year, but I guess I’m thinking about a step-by-step process through the first client project). This would allow those learners who are keen to develop a real client project to do exactly that, while ensuring that a whole web design process is experienced. At the same time, it will require a commitment from learners to completing all the details (such as client surveys, user testing etc) and not just doing the coding!

Photo by http://flickr.com/photos/duchamp/6937772/Ideally learners would work in groups of 2 or 3, perhaps using the more experienced people in class as consultants on their projects. If there are a number of learners who, after completing their small (3 page) website don’t feel confident to take on a real client, I’m confident we can work out a scenario project and simulate the communication aspects. After all, we’ll still be learning from each others projects throughout the whole process.

The project “scaffolding” would be provided through the facilitators, but using the excellent resources created by current professionals, such as the excellent book Web ReDesign 2.0 – Workflow that works and others. In our class we might follow the workflow outlined in the book begininning with Phase 1: Define the Project, and I’d have an expectation that we’d be committed to completing each Phase as we go and not just jumping straight into the “fun” bits :)

If you’ve got an ideas or criticisms, or have tried something similar, please let me know.

If you’re a learner in our class who’s ready to start your third-project and you think this is a great idea, feel free to get started right away! Pair up with someone in class (even if you both choose to do a project each, it will still be worth pairing up and commit to work together). On Thursday we can talk about some options for client projects. I’ll be working on a handout/post to provide some scaffolding for Phase 1 of our projects, but until then, if you’ve already got a client project in mind, you can certainly get started putting together your own Client Survey (based on resources above from Web ReDesign 2.0 – Workflow that works or from the WebStyleGuide that Kevin linked to, or any other source that you’ve found).

6 comments to A scaffolded Webdesign Project

  • Genie

    Michael’s intro to building a client website- starting with 1. Define the Project, reminds me of the problem solving model that I learned a while ago, which helps me through most problem related events. [Not that websites are a problem, but designing them is].
    Here’s how it goes:
    1. Define the Problem / Project
    2. Gather information from all interested parties- by interview, surveys etc.
    3. Assess your resources [what do you have and what do you need? what do you already know, what do you need to know? etc etc]
    4. Collate your information [group bits of info that are alike together]
    5. Analyse your information
    6. Propose solutions
    7. Test out the solutions.

    A brief model like this was discussed in classes a couple of weeks ago when we were working out how to “eat an elephant.” It might just work for a website as well….give it a go!

  • Finally get back to this and I didn’t want to give on commenting because I think there is some really important stuff here.

    Reading thru it again, I think you have 3 problems

    1) how to work with people at different levels in a group
    2) how get to people to engage in the design process, instead of just the technical processes
    3) how to support/guide people thru real projects .

    I really wish the solutions to these problems where simple !!! I think most people that teaching design with technology face the same problems. I was think it could be good to try to organise some sort online meet/brainstorm session around each of these issues ? what do you think ?

    Here are some of observations

    1) how to work with people at different levels in a group
    Some of the suggestion I’ve heard are learning plans, self paced work (that has it’s own problems) giving extension work to the people that are faster, making all sessions optional, do advanced sessions and basic sessions all at times during a course and then students attending the ones that are at their level.

    2) how to get people to engage in the design process, instead of just the technical process

    One thing that seems to happen is as you become “an expert” in an area you look at the area differently and as teacher we see the most important parts as being the IA and interface issues. I was thinking back about this and wondering how I personally learnt that, and it was the hard way eg making sites with really bad IA

    Could the best way for students to learn about need for good design process be to set up a project where they focus on the technical stuff and really muck then IA stuff ? I would have to be a simulated projected !!! just trying to think ways they could learn it by experience

    3) how to support/guide people thru real projects .

    I would love to see the documents you are putting together. What I have tried in the past is give deadlines to students to at the different stages, eg brief due 1st week, mockup due week 3. BUT and it’s a big but what I have found was that real clients are messy and the briefing might not happen until week 4, and most students then seemed to do the planning documents just for me after the project was finished … What I’m going to try this year is for the students to develop their own briefing, and project management system and then hopefully they will actually use them as tools to help them.

    Just some thoughts

  • Genie, totally agree that in general most problems/projects can be approached using an approach very similar to the phases suggested by Web Redesign. I’ve been thinking about that a bit lately, how problems from all different areas of life can be approached using very similar methods (Defining the problem, analysing the previous solutions, through to evaluating the success of the chosen solution etc.) I guess the benefit of this book is that they’re applied specifically to the field of web design, with lots of resources and templates to help us get started! Yay!

    Robin, I love the idea of students learning about the importance of IA etc, the hard way! I reckon that would be the best way to learn, but the time required might be a problem… Can you remember over what time-frame you learned this? From when you started developing sites, to when you realised how important IA was? Wonder if it’s possible for us to speed up this period?

    Lots more to discuss about your 3rd point too. Will come back to it! (and will send you the document we’re working on to help students with their first larger projects)

  • Robin

    Finally getting back to this !!! The how did I learnt the IA stuff was a really good questions I did really learnt it the hard way, I stuffed the IA on quite large site for a government agency, it was really embarrassing. I think the really low point was the talk I gave about how “innovative” the interface was. So I wouldn’t want to wish this type of experience on someone else.

    Which got me thinking about other ways to do this, could a simulation or game work. This gives a safe environment of for students to learnt in hopefully the mistakes can be accelerated. I’m always in two minds about simulations compared to real experiences, but I think this is example where a simulation or a game could work really well.

  • I’ve been trying to think about a simulation to help learners learn the why of Information Architecture… but it’s really hard! You need to commit to doing a design to see how unhelpful it can be without a good IA, and takes time… hard to see how it could be sped up…

    Any ideas? James Golan from Sydney TAFE had a great IA activity that involved all the content for a largish site (60 pieces of content, each on a small piece of paper) to be grouped and labelled by small groups of 3-5 people. Then the groups test each others IA using user audience profiles (Joe Smith is interested in blah blah, how will he navigate?)

    It would be great to collaborate and develop say 3 more of these… doing one per week over four weeks, or every second week, would be a great way to build experience and get learners thinking through the implications of their decisions?

  • Robin

    James project is a great example of the sort of thing I was think about. Here is a bit more detail about what I was think of. I was actually thinking about trying to get the students to work really quickly, often I think they have to much time (or atleast I give them to much time). Check out http://headrush.typepad.com/creating_passionate_users/2005/12/creativity_on_s.html to get a bit of idea about what I think about with the speed idea.

    This is the sort of game play I was thinking about

    1) Students work in groups of three or more
    2) They have a starting fund of money and choose the following
    – office space and overheads (this might be part of actual board the game is played on).
    – choose the sort of people they what on their team, eg graphic designer, coder , IA expert, marketing expert, game designer
    3) There is a pile of cards with projects on them, and each turn a team gets one card/project
    4) Each cards has information about the project and income from the project. Which is based on:
    - each team gets a base level of points based on the make of their team compared the project. eg if they team is all graphic designers and the project needs coders then they are going to get less base points
    - each project has a IA scoring matrix
    5) Then in each turn a team then has 15 minutes (it might need to be more) to come up the IA for the project, and then they have a minute to present that at the end. Each team is then given a rating by the other teams based on the IA scoring system for the project. Depending on the score each team then win some money.
    6) Each team has to pay out overheads to the bank each turn.
    7) After a few turns the team with the most cash wins !!!!

Leave a Reply




You can use these HTML tags

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Notify me of followup comments via e-mail. You can also subscribe without commenting.