A certain project got my attention while I was archiving my projects folder recently. Something similar occurred a few years back, when I rediscovered my ‘1st website ever’ in my portfolio, which was the reason for writing an e-book ’20 years of webdesiger’. Now I noticed my first project (actually one of the first major projects) that I tackled in a UX-like way — Nationale Vereniging De Zonnebloem. This was in 2012, and I wasn’t even aware of the principles of Rapid Prototyping, User-Centered Design or User Testing at that time.
But what makes this project so special for me? And why can it be for you, by the way… This specific project gives you a glimpse in what was a normal way of ‘doing webdesign’ back then. We’re talking only 8 years ago! This doesn’t seem that long ago, but internet years count double… In this period tools like Adobe Photoshop and Illustrator dominated the webdesign market. When every internet company was looking for ‘best practises’ to control the growing complexity in building websites. Responsive design was still in its infancy. Tools we use today to create wire frames and visual prototypes such as Sketch, Invision Studio or Adobe XD did not exist at the time. There were also no efficient, reasonably priced tools available for collaboration and feedback such as we now use Invision. Let alone Design systems. It was hard work; labor intensive in design, development and project management. And it is precisely the lack of these tools that we now take for granted which made me realise that tools will come and go. The tools don’t make you a UX-designer. It’s the way of thinking…
When I started as a freelancer at the beginning of 2011, I was determined to do things differently — I wanted to design applications to be easy to use by users and developed in close collaboration with these users and the client to quickly implement new insights. Unlike the experience I had at the agencies where I worked before, where budget was paramount and Functional / Technical Design Documents were carved in stone…
While browsing through the files in this Zonnebloem project folder on my MacBook Pro, I discovered that I was apparently already doing good UX-stuff back then…
A little about the client and the project
De Zonnebloem depends on a group of volunteers (a department) that is committed to people with a physical disability and wants to give them an unforgettable day by organizing activities.
In order to perform the Zonnebloem work in a proper way, a department used its own administration. Setting up an administration was complex, labour intensive and the overview quickly disappeared. On top of that, a detailed administration often depended on just one person. The administration had to be set up again when that person was no longer available. As a result, the execution of the Zonnebloem work was (severely) hindered with possible adverse consequences for the target group; the department guests.
The Zonnebloem Central Office planned to develop an online environment (application) to support the departments in organizing their activities. This ‘departmental administration’ must offer basic functionality to enable a department to function properly and to support the volunteer in his or her (administrative) activities. The scope of the application was determined: an extensive Customer Relationship Manager (CRM) to keep track of all relevant and indispensable personal data of guests, and a way to invite the appropriate group of guests to participate in an activity.
Being a ‘hub’ between the national departments, the Zonnebloem Central Office could have obtained a good overview of the necessary functions from the input of these departments. UX-element #1: Design what real users want and need. Check!
Ideation – Wire framing and Iterations
The first thing I did was to create the main structure of the application; the sections, the main data-views, wireframes with a rough layout of content and functionality. For this I used Adobe Illustrator. I exported the Illustrator files to PDF and discussed them the client. Comments were placed in Notes in these PDF files. I introduced a naming system for pages and their content (text and functionality) to keep track of changes by constantly referring to them. This work flow promoted communication and reduced the risk of errors and/or duplication of work.
UX-element #2: Proper communication and documentation. Check!
Each new version, from rough concept growing into more detailed versions, was extensively tested and discussed with the customer. After 4 iterations we were able to define different unique customer journeys to focus on: creating an activity, entering and managing guests and volunteers, inviting guests, communication between volunteers, and the evaluation of an activity.
Valuation – User testing
The client was pleased with the outcome of the iterations, so the obvious next step was to test our ideas with real users. The website of Zonnebloem was brand new and because this application was meant to be part of this corporate site (behind a login), I had to use this visual style for the prototype. Adobe Photoshop was the leading tool in the market at the time, Sketch did not exist. Remember? So I built layer after layer to be able to simulate all the required statuses of a page. I cropped and exported elements to ‘smart objects’. In Adobe Dreamweaver I built a static website, with hotspots to navigate. A hell of a job!
UX-element #3: User feedback. Check?
Partly. The wire frames and the visual prototype was tested with users, but, for some reason, I as the designer wasn’t invited for these sessions. Small corrections were sent to me by email. I did the adjustments (oh boy, all the changing of the Smart Objects, and the changed hyperlinks…) and delivered the final PDF’s and a zip-files with the html-prototype to the client. There it was, the end of my assignment. A strict separation between ‘design’ and ‘implementation’. I have never seen the actual implementation, if it took place at all… Because I am involved with customers, I have regularly tried to get in touch to inquire about the status, but no success. Okay, I got paid, but it felt unfinished. …
That fact is also typical for that period of time; web-applications were a domain for developers. Visual design was only an aesthetic layer on top of the functionality. No need to ask those odd designers what they think about user’s needs. Do your job with your fancy colors and fonts and leave it up to the big boys now. Right? Okay, a bit exaggerated to make my point here. Thank goodness this has become much better over the last years. Ten years ago I witnessed many angry faces at project meetings when I said that “our technical platform is going to be a commodity. Focus on user needs.” Okay, we still need and depend on platforms, but the focus on User Experience has taken its place.
I knew it!