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.

View shorter version in Behance:

https://www.behance.net/gallery/89754615/CEDIMED-A-UX-Driven-Case-Study

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:

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

Old Website

Limitation / Restriction

It is important that I mention the limitations of this re-design / CEDIMED, in general.

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

Three user Personas: a Doctor, a Salesman & a businessman

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.

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.

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

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.

  • Green is a cool color that symbolizes nature and the natural world.

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.

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.

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.

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

Homepage

Landing screen — HomePage
Product Section — HomePage
Download Section — HomePage
Contact Us Section — HomePage

Product View — All

Search & Categories — Product (all)
Product Card

Product — View Details

  • 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

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.

uxmujahid.com | Aspiring to make an Impact.