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 Dr Lawrence's data loss.
1. PLANNING THE SITE CONTENT
My first step was to see if any of the client's old 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 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. 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 aims to promote services to his prospective patients rather than serve as an expert platform in his medical field. The client didn't give an overly specific design brief, but we agreed on the following:
Adaptive site.
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 strict design criteria with a set of tasks that should lead me to a high-quality end product.
DESIGN CRITERIA:
Appearance / aesthetics
Content / substance
Functionality
Usability
SEO
DESIGN TASKS:
Styling / User Interface / UX / Usability
Page layout
Navigation / interactivity
Image editing
Graphics & typographic solutions
Branding
Copywriting & editing
SEO / metrics
Design for print / promo materials
__________________________________________________________________________________________
4. DESIGN NOTES + EARLY SCAMPS 1
To better understand the site's purpose, I used a good old-fashioned notepad to jot down my initial thoughts and questions for the client. 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 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 content 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 a logo form suggesting a ball-joint and a socket, denoting the hip & knee surgery. This idea was quickly dropped as it seemed to add little to a positive conveyance of the brand. I felt a typographic approach might be 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 with the rest of the site.
Generally, one of the most time-consuming stages of the design process is producing and selecting the right set 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
