WEB DESIGN CASE STUDY 1 - DESIGN PROCESS
Updated: Mar 18, 2020
Client: Dr Trevor Lawrence, orthopaedic consultant, top UK hip & knee surgeon, based in Solihull, West Midlands. The company hosting Dr Lawrence's old site went bust, resulting in the loss of Dr Lawrence's data.
1. PLANNING THE SITE CONTENT
My first step was to see if any of the client's text content could be salvaged through web.archive.org. The salvaged copy amounted to a whopping 17,000 words document. It needed good sifting through, grasping its content and making some tough decisions regarding its considerable length and indeed its medical jargon complexity. My project ahead was going to be a lot more than just a web brochure.
The lengthy copy was brimming with detailed information covering the delicate subject of joint ailments and treatments. In order to make the copy more accessible to prospective patients I suggested a plainer, simpler patient-friendly approach covering most frequent concerns such as:
Do my symptoms mean I need joint surgery?
What are the risks?
What are the surgeon's credentials?
What's the recovery time?
How much is it going to cost me?
Is it worth the cost?
The website was to be aimed at patients rather than at Medical professionals. In consultation with the client the massive 17,000 words copy was shrunk to contain only the most important information relevant to his patients. The copy was mostly rewritten avoiding the dry medical terminology, too often difficult to follow by a non-medical site visitor.
The process of rewriting the copy helped greatly with the understanding, grouping and labelling of content, considering the images and getting the handle on the overall site structure.
2. DESIGN BRIEF
The site to be aimed at promoting services to his prospective patients rather than serve as an expert platform in his medical field. Client didn't give an overly specific design brief, but we agreed on the following:
Fresh UX and UI appeal.
Smart, temperate, clean-looking, easy to read and navigate.
Visually appropriate for the target audience, loosely described as any age, but predominantly the well-to-do, 60-somethings private patients.
3. DESIGN CRITERIA & DESIGN TASKS
As with all of my web development work, I follow a strict design criteria with a set of tasks that should lead me to a high quality end product.
Appearance / aesthetics
Content / substance
Styling / User Interface / UX / Usability
Navigation / interactivity
Graphics & typographic solutions
Copywriting & editing
SEO / metrics
Design for print / promo materials
4. DESIGN NOTES + EARLY SCAMPS 1
I used a good-old-fashioned notepad to jot down my initial thoughts and questions for the client so to better understand the purpose of the site. This was essential to deciding on my styling, UI and UX strategy.
5. DEVELOPING LAYOUTS / THUMBNAILING
Thumbnailing - a process of exploration of interactive elements and page composition. Its stripped-down nature allows for quick capture of ideas.
6. ESTABLISHING THE SITE STRUCTURE
For purposes of sitemap wireframing I tend to use post-its on gridded A2 sheets so to add flexibility to the site-mapping process, moving post-its around as I tested different mapping ideas.
At this design stage I don't normally use apps such as Adobe XD. The array of features and their intricate technical nature tends to get in the way of the bird's-eye-view, essential to planning and developing the website architecture.
7. DESIGN NOTES + EARLY SCAMPS 2
Exploration of branding ideas - ideation and improvisation using pen & paper.
8. PICTOGRAPHIC LOGO ITERATIONS
I initially toyed with the idea of a logo form suggesting a ball-joint and a socket, i.e. the hip & knee surgery. This idea was quickly dropped as it seemed to do little in terms of adding to a positive conveyance of the brand. A typographic approach seemed like a better design proposition.
9. TYPOGRAPHIC LOGO ITERATIONS
10. FINAL LOGO DESIGNS
Choice of four, for the client to choose from.
Colour scheme: Olive Green (c3c27f) + Aqua Blue (6caab6)
11. DEVELOPING MOBILE PROTOTYPES
At this stage of the project I used the lo-fi prototyping method as it offers an instant capture of ideas without getting sidetracked with software technicalities.
12. HOME PAGE DESIGN
As with magazine cover pages, a good homepage design is essential to setting the right tone, tasked to follow through the rest of the site.
One of the most time-consuming stages of the design process is the production and selection of images. For this project I used both original and stock photography.
13. MOBILE BUILD - HOME PAGE
The mobile layout demands just as much thought and effort as does the desktop layout, if not more so due to its narrow screen that can accommodate only one column of text.
The site must communicate the brand and the product with the same crisp clarity whether a desktop / laptop or a hand-held device.
14. HOME PAGE - FINAL DESIGN