Pharmaceutical Product Website
The Mandine Traditional Pain Relief Liniment website initially consisted of a single-page format providing basic information. Now, the plan is to enhance its visuals, incorporating a new page and additional content. The objective is to preserve the existing web design and color scheme without altering them while introducing new content and pages.
Project Overview
MANDINE traditional liniment
UX/UI Designer
Project Title
Role
2 Weeks
Timeline
About the Client
Mandine pain relief liniment is manufactured under the company named "SYP Pharmaceutical Production." Despite being situated in the capital city, the company has noticed a substantial customer base residing in towns outside the city limits, rather than in downtown areas. Recognizing the importance of staying connected with these remote customers, the company aims to launch a website dedicated to providing information about the medicine and facilitating the enquiry process.
Problem Summary
A comprehensive overview of ingredient contents is required.
A detailed description of ingredients will be added as a new page.
The website must align with the product's logo and brand color.
Though the product has its own social media presence, it is not very active.
Context
Revise the existing design by making content edits.
Incorporate additional features.
Integrate new pages.
Goal
Establishing credibility with existing and potential client while also drawing in new customers.
Revamp visual elements.
Convert horizontal scrolling content to vertical scrolling and update.
Incorporate testimonials.
Introduce a new page detailing ingredients.
User Research Method
Survey
Based on the survey findings, it appears that "Mandine" attracts more customers from suburban areas rather than downtown, with a majority being elderly individuals.
Therefore, the design should prioritize clarity and simplicity, catering to the accessibility needs of this demographic. Avoiding bright colours and small fonts is advisable.
Additionally, the website should be structured as a single page to minimize user stress, with a focus on straightforward buttons and clear calls to action, omitting technical jargon.
Persona
Solutions
The following illustrates the enhancements made from the previous version according to user problem.
Design System
Utilize the brand's colour palette.
Incorporate grey for contrast.
Integrate black and white for text and button elements.
The client has provided the logo, which features a monochromatic palette predominantly comprised of dark green hues.
Color Theory
Typography
LOGO
Wireframe
Prototype
Low-Fidelity Prototype
High-Fidelity Prototype
