CEDIMED — a UX Driven Case Study
Overview
This is a case study that I had taken to incorporate some of my recent studies and realizations of an appropriate design approach that I got to know by many amazing articles on Medium over the past few months. I shall link the articles that have helped me wherever I talk about it. It is also a UX driven project and I got to test so many ideas and approaches that wouldn’t have been possible if not for the many great design communities out there. I had tremendous help from senior designers in the company and a lot of talk with the client as well.
CEDIMED is a case study on website building. I was lucky enough to talk with the client as much as possible & create a website based on proper UX methodology and feedback for the end-users. The website created contains only the core pages needed to pitch in the overall design, but enough to have a full understanding of it.
View shorter version in Behance:
Article Format
Now, this is going to be quite a lengthy article. So, I thought it’s best to show the structure beforehand so that you may skip to the relevant section if you prefer. But if you prefer to read the whole article, I’d like nothing better.
Challenge
The client needed a website to showcase their products (medicines) that they manufacture & distribute. They had already asked a web-dev agency to make a sample site & needed my feedback on it. Upon reviewing the first edition of the site, I noticed a few things that could be removed and changed which I was not able to see before. So, I told them that I can take this up as a side-project and re-design the website.
Why Re-design
There were a lot of benefits for me to have taken this as a project and go through the research, interview, analyze, design, iterate and all the other steps as it was all new for me and wanted to quench my curiosity. To state, a few of them would be for the reason that:
- I have a real project that I can work on from start and a great platform to test my ideas & experiments.
- This is a great boost to my career as a starting UX Designer.
- Having a client (who’s a close relative of mine), I could understand the requirements clearly & talk with him whenever needed.
- I could finally go-about making a website by following the UX Methodology step-by-step.
Goal
The main goal of this re-design would be to have a simple, modern yet straight-forward, clutter-free website that directly meets the requirements of the end-user. Each page was to be designed keeping in aspects many points that I was not aware of previously. I shall explain each of them along the way. The end result was to have a website that would serve the needs of the user as easily & as precise as possible without having any stutters or difficulties along the way.
A good user experience is the one in which a user will look back at what he just accomplished and feel good about it. Meanwhile, a bad experience will be noticed at every step of accomplishing a task. The goal of this re-design is to aim for the former one.
Old Website
Limitation / Restriction
It is important that I mention the limitations of this re-design / CEDIMED, in general.
- Firstly, CEDIMED is a starting new company. Therefore, it does not have the perks that an already well-established company would have. For eg: credibility or user-trust or market-awareness. That is why you won’t find any review section or testimonial anywhere in the site.
- Second, only the core needed parts of the website have been re-designed. The purpose of this re-design was to pitch a design direction and layout to proceed forward with. But having said that, the designed pages are sufficient enough to understand the scope and goal of the site.
UX Stages Tackled
Having recently started my career as a Jr. UX Designer, I’ve had the opportunity to work with some amazing people as recent as it seems. Since this is a re-design and not a build from scratch, I’ve tried to implement as much of UX Methodology as I can.
1. Interview
As mentioned earlier, the client was a close relative of mine. As such, we were able to have a discussion on this formally with other members of the management & informally as well. This allowed me to have a deeper understanding of the requirements and what exactly is the goal of having a website.
2. Personas
On analyzing the discussions and interviews, I was able to get a clear picture of who is it that the website is targeting and our potential-end users.
From the above 3 personas, we can see that the three main types of users we’re targeting are Doctors, Salesmen & Company Owners looking to invest. These are the type of users that will access the website & our target (end-users). The entire website is tailored to meet the requirements; ie, relieve pain points and fulfill their needs.
3. Content Hierarchy / Management
This was the first and foremost decision to be taken. How well and fast a user understands and gets used to a website all depends on the information/content that is displayed hierarchically.
That is why in this re-design, all the content is placed in such a way that naturally scrolling through them once is enough to understand the purpose and the scope of the site & what the user is able to do. That and many other articles regarding best practices in content placement and components also cleared my mind to provide a better experience.
Typography
For any content, title, topic or anything you read, typography should be properly set up. If the text is not clear or understandable or indistinguishable, then the whole purpose is lost. That is why, it is imperative that a website must follow a set of guidelines to make sure that the text is accessible, distinguishable and easy for the eyes.
The typography trend lately is such that each website uses a combination of fonts: Sans & Sans-serif based. And this is helpful for many reasons.
- It’s a widely adopted pattern, meaning the users will be familiar with it.
- It is easily distinguishable.
- The line-height is such that it does not stress the eyes or your cognitive load.
Size
In terms of the font size & spacing, there were two really good websites that I had fallen in love with. One is MailChimp and the other is NetBramha Studios. And this redesign is inspired by these two. MailChimp has its own design system, which helped me a lot to understand their typography.
Having gone through that and a few other articles, I came up with a set of guidelines to follow in this re-design as well.
So, the two fonts that I’ve chosen is Vesterbro & SF Pro Display font families. They are among the trends as of now and potentially go on next year as well. They clear the WCAG tests too.
Colors
As much as people tend to ignore this, but colors do play a vital role in how the users perceive content. Each color has its own advantages and a mood to it. If used incorrectly, chances of getting information misinterpreted or conversion-rate could be affected.
The psychology behind colors can help tune the stress and the mood of the user. Since, our end-users are busy, goal-oriented, focused people, it is important to use proper colors to relieve them of any stress so that they can make a future-proof decision. That is why the color of green & blue is maintained throughout the website.
- Blue calls to mind feelings of calmness or serenity. It is often seen as a sign of stability and reliability.
- Green is a cool color that symbolizes nature and the natural world.
The colors are also used consistently throughout the website. All the main CTA’s and actions are in blue, where-as all the secondary actions are in green. This helps the user to get used to the pattern and know instinctively what a button does before even reading the text on it. Thereby, it also passed the squint test.
The colors used in the site are also directly aligned with the brand being promoted. The colors in the logo of CEDIMED are the primary & secondary colors throughout the entire website. All-in-all, the colors are brand-aligned, consistent & psychologically curated with the best interests of the end-user.
Design Language
With the growing number of devices and means to access the same information in a varied number of ways, having a common guideline and a system will help ease much of the work in terms of design and development. I’m talking about Modular Design by Brad Frost in his book on how to create and maintain effective interface design systems.
CEDIMED was re-designed with a number of aspects in mind. I have listed them out below.
1. Designed for end-users
There is a difference in usage patterns used by people of different ages. How a teen would use/navigate a website is different than how an elderly gentleman would operate.
Since our target users are people with ages of at-least 25 and above, a design and usage pattern familiar to which they’re already comfortable were taken into consideration.
The texts are made larger & bolder (wherever needed) to make it accessible for elderly people & pass the WCAG guidelines. The website focuses on simplicity and getting things done, as again, our users are busy people who value time. All the elements and components used are straight-forward, fast & stress-free and there is no learning curve needed to navigate and accomplish the goal of the website.
2. Design Elements
Each element was carefully crafted from scratch keeping in mind the best positioning & alignment and re-used wherever the need be. The molecules that make up a component are also re-used independently wherever applicable. This ensures that the design can be made consistent & made across different platforms without having to code for each.
3. Data-Driven Design
So like all things here, I came across a wonderful article, yet again, that showed me the value of using the raw data and how dangerous it is to assume something just because it might make sense to you or be obvious to you. That is why you might’ve noticed that the structure of the site seems very familiar to most of the recent modern websites that you’ve used in the recent past.
4. Heuristics
Heuristics Analysis isn’t UX Research. Heuristic evaluations are essential, but unlike user research, they don’t provide the necessary UX data needed to design digital products. Remember, heuristics are predetermined. They’re best practices to judge by, but they’re no alternative to real feedback from real users.
I had tried my best to follow the above-mentioned Heuristics throughout the website. With the implementation of these, many of the accessibility, discoverability, scannability & navigation is done right.
I have also followed the famous Gestalt Principles: especially the proximity, common region & similarity and implemented it the best I can.
5. UI Decisions
Before going any further, I want to mention a couple of UI decisions I’ve made to, once again, align it to the best interests of end-users. As we know, the website is targeting users who value time, focus & simplicity. Therefore, I have made some key decision to tailor those:
- The website is clean. There are no unwanted elements anywhere. Only sufficient elements and content is presented whenever applicable. This ensures fast & smooth navigation.
- The website is oddly static. There are no animations or unwanted interactions. As the user’s values time, the information needs to be displayed as soon as possible & if the network is slow, there could be a shimmer effect just so that the user would understand intuitively that this is where the content is going to appear & prepare for the same.
- There is no excess or lack of information. All the content displayed had information that is enough for a user who has little knowledge about the product presented in a simple fashion and for an expert to browse through as well.
- The design is a combination of flat & material design. The design follows a rigid approach with sharper cards and elements so as to give off a corporate feel (and not with extra-round corners..)
- I recently came to know the value of Negative space and how much of an impact it has on the user’s attention and focus on what’s essential for them. CEDIMED re-design also implements the same.
6. Responsiveness
To view the same content on different screens of different pixel density and resolution and ratio means to have the design automatically fit each of those scenarios. But designing for each of the hundreds, if not thousands, of those screens is…frankly not possible.
That is why CSS has a layout system. This means that each screen is divided into 12 column layout and there are breakpoints where-in the content will be adjusted to fit based on the display properties. CEDIMED is re-designed keeping in mind the breakpoints and how it would perform on screens of different properties.
I have also designed the site with the Grid system in mind. Although many designers don’t really use this anymore, and for the right reasons, I feel this could still be followed so as to reduce the guesswork the developers have to do in order to code the components.
Homepage
The homepage follows a Z-Viewing pattern.
This is the landing screen. The main purpose of this screen is to have the overall vision and goal of the site presented in a clean and clutter-free manner such that the user must understand the contents of the site just by having a glance at this screen.
You can see that the tabs are classified in a much more normal way. There is less cognitive load on the user. The page also takes into consideration the 3 levels of processing: Visceral, Behavioral & Reflective (taken from The Design of Everyday Things).
The main focus is on the text that is displayed here. Seeing as this is the first and foremost text that a user will read, it is imperative it delivers the right message. The user must have a general idea of the overall website & motivation to navigate further just be the text alone. That is why I have included the keywords Quality & Trust. Below is a small description supporting the main text.
All landing screens must be accompanied by a CTA, as that is the main goal for having the website in the first place. The CTA here is accompanied by a ‘View Products’ button for those who want to discover a bit more before making the decision. This gives the feeling the user is in full control of the site.
The landing screen ends in such a way that the user knows there is more content below. This helps with discoverability.
The Products Category clears many of the pain-points which you can see from the user personas. The information displayed is relevant to both experts & beginners. And the actions of the card are also made clear.
This screen shows the importance and effect of Negative Spacing. The user’s attention is drawn to download the product catalog and nothing else matters here.
Then comes the Contact Us Form & eventually the footer. The Contact Us form is re-used in other pages as well since that is the main objective of the website. The size of each section/card is in designed such a way that the whole card and sneak-peek to the subsequent section will fit in a screen. This helps the user to accomplish his task faster.
Product View — All
All the other pages follow a pattern. The header contains page Title & a supporting illustration. And the footer remains the same for all the pages.
Three things I’d like to point here is:
1. Search bar
For any listing or if there is an abundance of data, having a search option will greatly improve the experience. First-time users can still go through all cards/products one-by-one. Meanwhile, experienced users can search for the exact product they want.
2. Categories
The categories shown here are the same as that in homepage. By default, ‘All Category’ is chosen. But the user could choose any.
3. Product Card
The product card design is also interesting.
All the information on the card is placed in such a way that the user’s eye-tracking is constant & fluent.
The CTA on the card is also clear and distinguishable.
Product — View Details
At first glance, what you see is:
You’ll notice that this follows a similar pattern that typical e-commerce sites do. This helps the user to navigate and accomplish his goal faster. The information displayed here is enough for most users. If not, all relevant information is presented below in a concise and clean manner.
- On the first scroll, the user is presented with the short text & a short video describing the product. This will clear any doubts he may have at this point.
- If he still likes to explore further, he can scroll again & view the medicine composition and detailed methods and indications, all presented in 1-liners.
About Us
This page also follows the header-footer pattern, the same as the others. The content displayed here is for credibility, trust & assurance purposes. The team members’ card contains the links for social sites.
And that is followed by a ‘Contact Us’ form, which is re-used from the homepage.
Conclusion
If you made it this far, then a hearty congratulations. The purpose of this project was to personally test out many ideas and knowledge that I’ve acquired from many articles and people in the past three months. This re-design, without a doubt, still contains a lot of corrections to be made, but as of now, this is where I’m at. I’ll continue to work on a variety of projects and post my findings here so as to have a track of my progress. I hope I was able to help you in any which way from this article & I look forward to learning a lot in the coming months.
