Case Study UI/UX: Redesign website introduction page of the company to be more professional look
Hi medium readers, Thank you for visiting and This doesn’t take much time, but the longest is 10 minutes, so happy reading. 😉
Overview
Some time ago I received an invitation from a client regarding the redesign of their company introduction page, and they wanted their website to look professional in the eyes of clients and investors. The company is a small startup that provides smart contract solutions for professional service buyers and vendors. The platform where vendors and Byers will meet is being built. Website will only present about the actual Ledger and how it is developing (news).
It can be seen from the old page display that there is not much content available and here the client frees me to be creative to maximize my work. They do not ask to think about the content writing on their website. They only focus on the redesign, after that they think about content writing with their team. So here my role is only to be a Ui/Ux Designer for sure.
The Goals
After a few times, we sailed talking there were some important things that clients wanted from their website and that really challenged me.
- A display that describes a company.
- Introducing the company and some of the products and services they offer.
- As well as an attractive appearance so that users feel comfortable on the website with its good and correct Ui/Ux.
Rule & Responsibility
I talk to clients, interview clients who want to discuss what their website pages will look like, and create project summaries. Designer: Of course, it’s me. I am the Ui/Ux designer on this project.
Scope
Because there is no content structure on the previous website so I am here focusing on the layout and also the appearance of its Ui and Ux based on research results from similar website references and also analysis from competitor websites and more importantly the main point that clients want is a good display. professional.
Process
In this process, I will include a usability heuristic method when conducting inspirational web references and also during competitor analysis research.
Web Inspirations
I suggested 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.
Analysis Competitor
When we discussed I asked them a question. “Do you have competitors that you think are good?” They gave 1 of their competitor’s websites. Then I analyze their content structure and improve it and then I implement it on my client’s website.
Thanks to my question, here I can see what my clients want from the appearance of competitors’ websites. Then I concluded that they wanted a bold font style as well as clean website pages. By being empathetic to the client, we will be able to build the desired goals.
Wireframe
After I did research on competitor websites and also found some inspirational websites, I immediately started the wireframe creation stage. Then I proceed to the wireframe process. In this wireframe, I present the Information architecture based on their actual content as well as the layout I propose to present the content so they know how the page will look.
After I showed them the results of my wireframe making then I got feedback from them and they “liked it”
Design
After the wireframe stage was approved by them, I proceeded to the mockup process
At the mockup stage, I will give them a system design so that the programmer does not surprise the programmer during implementation
Design System
For the color scheme, the client wants to follow the color scheme on the previous website. For the font, I chose a mix of GT America and Helvetica to make it look professional and of course with a good and correct hierarchy.
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.
Experience
This challenge was an excellent opportunity to think more deeply about landing pages and experiment with different decisions that go into such details as the placement of the CTA buttons.
At this point, the landing page is far from complete, since, in the case of a real project, this would be the starting point to develop and launch the page to measure the reactions and interactions of the users. Then use the numbers to further improve and optimize the design.