A brief walkthrough of our methodology, design process, strategic decisions, and the impact of our solutions on client success.
CLIENT OVERVIEW
Client: Mr Trevor Lawrence - a renowned consultant orthopaedic surgeon based in Birmingham, Solihull, West Midlands. Specialises in hip and knee procedures, including hip, knee, and revision hip replacements.
His original website, hosted by another company, went out of business, resulting in a complete loss of website data.
PROJECT BRIEF
The primary task was to retrieve as much data as possible from the archived version of the client's old website on web.archive.org and use it as a foundation for building a brand-new website.
1. PLANNING THE SITE CONTENT
The first step involved salvaging the client's old text content from web.archive.org, which amounted to a substantial 17,000-word document. While brimming with detailed information on joint ailments and treatments, this lengthy copy needed to be streamlined and simplified to make it more accessible and patient-friendly.
In consultation with the client, the massive copy was condensed to include only the most essential information relevant to prospective patients, addressing their frequent concerns about symptoms, risks, surgeon credentials, recovery time, cost, and value.
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?
Rewriting the copy helped me understand, group, and label the content, consider the images, and grasp the overall site structure.
Clear and timely communication with the client was critical in establishing the design strategy, ensuring no content was implemented without the client's approval.
__________________________________
2. DESIGN BRIEF
The client agreed that the site's purpose is to promote services to prospective patients rather than serve as an expert platform in his medical field. The design brief outlined the following requirements:
Adaptive site
Fresh UX and UI appeal
Intelligent, temperate, clean-looking, easy to read and navigate
Visually appropriate for the target audience, predominantly well-to-do private patients aged 60 and older.
__________________________________
3. DESIGN CRITERIA & TASKS
As with all web development work, strict design criteria were followed to ensure a high-quality end product:
CRITERIA:
Appearance/aesthetics
Content/substance
Functionality
Usability
SEO
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 PROCESS
INITIAL IDEATION
To better understand the site's purpose, initial thoughts and questions for the client were jotted down using pen & paper, which is essential in making early decisions on styling and UX design strategy.
__________________________________
5. DEVELOPING LAYOUTS / THUMBNAILING
The thumbnailing process, which involves exploring interactive elements and page composition in a stripped-down manner, allowed for quick capture of ideas.
__________________________________
6. ESTABLISHING THE SITE STRUCTURE
For sitemap wireframing, post-its were used on gridded A2 sheets, adding flexibility to the site-mapping process by allowing easy movement of post-its as different mapping ideas were tested.
__________________________________
7. DESIGN NOTES + EARLY SCAMPS 2
Exploration of branding ideas - ideation and improvisation using pen & paper.
Pen and paper are still the most effective way to grab ideas instantly.
__________________________________
8. LOGO DESIGN
Initially, a pictographic logo was pursued, suggesting a ball joint and socket (denoting the hip in its socket). Still, despite the many hours of design and testing, it was dropped as it didn't seem to sit well with the overall visual concept of the site.
__________________________________
9. TYPOGRAPHIC LOGO ITERATIONS
A typographic approach seemed like a better design option.
__________________________________
10. FINAL LOGO DESIGNS
Four logo designs were presented to the client for selection. The colour scheme was Olive Green (c3c27f) and Aqua Blue (6caab6).
__________________________________
11. DEVELOPING MOBILE PROTOTYPES
At this stage, the lo-fi prototyping method was used, allowing for instant capture of ideas without getting sidetracked by software technicalities.
Using mobile phone mockups and paper to test evolving prototype designs.
__________________________________
12. HOME PAGE DESIGN
As with magazine cover pages, a well-designed homepage was essential to setting the right tone for the rest of the site.
Producing and selecting the right original and stock photography images was one of the most time-consuming stages of the design process.
__________________________________
13. MOBILE BUILD - HOME PAGE
The mobile layout demanded as much thought and effort as the desktop layout, if not more so, due to the narrow screen accommodating only one text column. The site had to communicate the brand and the product with the same crisp clarity, whether on a desktop/laptop or a hand-held device.
__________________________________
14. FINAL DESIGN
The final design successfully captured the essence of the Hip & Knee Clinic, presenting a clean and professional layout that effectively communicates the brand and the services offered.
Final decisions on pages, sitemap and structure:
HEADER:
TREVOR LAWRENCE - UK'S LEADING HIP & KNEE CLINIC
PAGES:
Home
About
Hip
Knee
Fees
FAQ
Articles
Contact
FOOTER WITH CONTACT & ENQUIRIES + ADDITIONAL PAGES
Pre-Op Advice
Accessibility
Data Protection
HOMEPAGE SECTIONS:
Restoring our patients' mobility since 1999
Why choose Mr Lawrence's Clinic?
Helping you regain your active lifestyle.
About Trevor Lawrence Hip & Knee Clinic
Patent feedback
Evidence of Patient Satisfaction.
Book your appointment today
Studies and Articles on Hip & Knee Surgery.
Footer with Contact & Enquiries and additional pages
The client was satisfied that the new website design now serves as a valuable resource for prospective patients, addressing their concerns and providing essential information in an accessible and user-friendly manner.
Comments