Case Study: Redesigned A Website Landing page to get a new CRM license to other Professionals
Hi Medium readers, this is my first article, this time I want to share the results of my case study and also provide insight behind my decision when redesigning a landing page from one of the companies.I’m sorry if there are mistakes in this writing, whether it’s a typo or poor grammar.This doesn’t take much time, but the longest is 10 minutes, so happy reading.😄
Overview
This is a side project that I was working on when I was asked to redesign a landing page on this company’s website. This company is a CRM platform for credit repair professionals, Mortgage Professionals, Realtors, Car Sales to help improve their clients’ creditworthiness by improving their credit. The reason they asked to redesign this web landing page is to get a new CRM license for other Professional Services.
So I conclude that their goal in redesigning a new landing page is to get good credibility from their company.
The Problems
This current web page doesn’t really attract a lot of information that we can’t catch as new users and of course, this will be confusing for users later.
Moreover, this website will become bigger and develop so that a better content structure is needed that is fresher and more attractive for clients or investors. For this analysis, I use the usability heuristic.
The Challenge
Some interesting things challenged me to do this redesign, namely by making this website great and even all their expectations. and I am very challenged to make it happen!😤
The Goals
As I mentioned earlier regarding the problems that existed on the old landing page, I will summarize the goals from the results of our negotiations, namely:
- Website display that looks professional
- Clear information structure
- Clean Website Appearance
- Better Layout
Rule & Responsibility
I’m the one talking to clients, interviewing clients wanting to discuss what their landing page should look like, and creating a project summary.
Designer: Of course, It’s me. I’m the Ui/Ux designer on this project.
Scope
Actually, I didn’t start from scratch, because they already had a design draft (Current Page) for the landing page. And most importantly, I already know about the content and structure of the content and requests from clients to make this landing page look more professional and clean.
So, I design from a draft and then develop it. The list of pages I designed is a landing page.
Proses
After I read the results of their brief and had some discussions, there were several points that I got, namely that they wanted their website to look as follows:
- They want a jquery slider on the hero/header
- CTA to invite new clients to send data and also questions about the products offered
- The color scheme is the same as the previous page
Sitemap
Because they already have a content structure and this is only a landing page and only 1 page so the first thing I do is just follow the content structure that is already available in the draft.Because they already have a content structure and this is only a landing page and only 1 page so the first thing I do is just follow the content structure that is already available in the draft.
But of course, this Sitemap is very useful to see how big the scope is and also as my guide when designing pages. When this sitemap is complete, I send it to them for approval before moving on to the next step, wireframes.
Web Inspirations
I gave them a suggestion for an example of an inspirational website to help the client find what he wanted by looking at several similar inspirational websites. I am here to help clients to realize their goals and also the results are following their expectations.😊
The results of the research that I found when looking for inspiration were mostly about the layout, content structure, and also the nuances of the color scheme. The following above is a website that I found.
Wireframe
After getting some suggestions and suggestions from the results of the Web Inspiration I gave, they became clearer about what the landing page would look like. Then I proceed to the wireframe process. In this wireframe, I present the Information architecture based on the actual content of them and also the layout I propose to present the content so that they know how the page will look.
In this process, I think the wireframe process is very important so that I and the client can focus on the content first. Before I go directly to the Visual Design section.
After I showed them the wireframe, there were several things they thought needed to be changed. I found important things to be revised, namely the Hero section and also the CTA to invite users to join.
- According to them, for the hero part, the slider needs to be changed and made cleaner but still has the slider. And for the solution, I changed the layout to make room for the slider and also the CTA as follows.
2. For the CTA section which aims to invite users to join them, it looks less eye-catchy. Here for the solution, I made 1 more separate section between newsletter subscriptions and also a CTA for an invitation to join which previously only had a newsletter subscription section. In addition to making it easier to explain the products offered, users will be very interested because they are given the information they need and not confusing for sure.
After they agree with the results of the revision that I gave then I proceed to the Visual Design stage.
Mockup
After some feedback on the wireframe in the Figma file and approval, then I move on to the mockup stage. After the next stage, I used the results of the final negotiations following their agreement regarding several presentations that I presented to them. Fill in the image, create some design elements to emphasize the meaning of the site, add color and enhance the layout. And here is the mockup result.😁
Conclusion
With some feedback and revisions, the final design is finally done.
Finally, the conclusion is the result of my study case, hopefully, it can be useful for readers by looking at the Ui/Ux process flow that I usually do and apply to a project.
Disclaimer
This case study is based on the results of my side project with the client, but this design will only be made for research purposes. if this design is very useful in terms of user visits, there will be some research and testing in the future.😉
