WEB DESIGN CASE STUDY 1 - DESIGN PROCESS

Updated: Mar 18

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:

  • 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 a strict design criteria with a set of tasks that should lead me to a high quality end product.


DESIGN CRITERIA:

  1. Appearance / aesthetics

  2. Content / substance

  3. Functionality

  4. Usability

  5. SEO



DESIGN TASKS:

  1. Styling / User Interface / UX / Usability

  2. Page layout

  3. Navigation / interactivity

  4. Image editing

  5. Graphics & typographic solutions

  6. Branding

  7. Copywriting & editing

  8. SEO / metrics

  9. 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


Logo ideation and improvisation using Adobe Illustrator

__________________________________________________________________________________________




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.


An early Homepage version (left) and a more recent one (right)

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.


Home page (pics 1+2), a Child-page with menu buttons (pic 3) and the abbreviated menu (pic 4)


__________________________________________________________________________________________




14. HOME PAGE - FINAL DESIGN




114 views
QUICK CONTACT :

LinkedIn

​ZigMEDIA © 2020 • Birmingham UK