Riki Muhamad

Sivali Official Website

Sivali.co is official website for Sivali Cloud Technology, is a company that provides cloud technology-based solution and infrastructure services. Their expertise at strength lies in the industry’s evolution and challenges, specialize in crafting bespoke Cloud Technology solutions that empower businesses to thrive in the digital era. Their proficiency extends to efficient DevOps practices, robust Security measures, and seamless Tech Professional Delivery services.

Collecting Information

Recently, I worked on a project in the office where I work. This project is to create an official website for the company. Since this is an official website, I designed this carefully to avoid any cause in the middle of developing process.
Start from collecting the information, I communicated with the founders of the company. There are two founders in this company, and they want the website looks professional as a tech company solution.
It was fun to discuss with the founders. Let me explain what I got in this discussion:
  • The website would be a central hub for company’s information such as the services, products, and company it self.
  • The website prominently highlights the strategic partnerships with leading global cloud providers. Emphasize how these partnerships enhance service offerings, provide access to cutting-edge technologies, and ensure reliable solutions for customers. Clear communication about these alliances will instill confidence in potential clients and position Sivali as a trusted player in the cloud technology landscape.
  • The website must highlights the experience of the company as forefront of cloud technology solutions for 30 years.
  • The website must has media to post blog and press release in different page.
  • The website must has two contact form, each for enterprise potential customers and for partnership program.
  • The design must focus on brand awareness of the company. Besides, each official vendor partner has a page, and the branding must follow the vendor’s branding color.
The client wants this project to be completed by mid-July at the latest. I have at least a month and a half to complete this project from the research process to becoming a functional website.

User and Audience

We know that all products have goals and targets that must be achieved. In this project, in addition to providing information about the company, it is also to get customers. Let me describe the target customers or audience of this website.
  • Enterprise : Enterprises have complex IT needs, including data management, security, scalability, and efficiency. Sivali’s tailored solutions address these challenges, ensuring seamless operations and strategic impact.
  • Reseller/partnership : Resellers extend Sivali’s reach by promoting and selling its services. Partnerships foster mutual growth, innovation, and ecosystem expansion. Sivali values long-term relationships with resellers and partners to enhance customer experiences and drive success.
  • Investor : Investors play a crucial role in Sivali’s growth trajectory. Their support fuels innovation, expansion, and market presence. Sivali welcomes investors who share its vision and believe in the potential of cloud technology solutions.

The Role

The project is a corporate project where I work full-time. I am a Product Development Specialist in this company, and in this project, I have multiple roles such as Product Researcher, Product Designer, and Project Manager.

Design Process

As a project to create an official website, I started by creating a sitemap. Sitemaps help me in working on the design as a guide page for what I have to create. Also the sitemap I will use to determine priorities and create a work timeline.

Sitemap

Gantt Chart

Wireframe

Problems

The process of collecting information was so smooth. However, in a project we will inevitably find problems to solve. This project is no exception, there are several problems that I found and had to solve. Let me describe the problems I found in this project.
  • As the client mentioned in the collecting information process, the client has some vendor partners, and they want each partner to have a page only for explaining the vendor’s product and the page must follow the branding color of vendors. As I expected, each vendor has a color that is the opposite of the branding color of the client company. The solution is I need to choose neutral color that fits to all colors. This color will be used as header and footer color.
  • Besides design the website, the client gives me full responsibility for making copies of their website. That’s mean I have to learn more about the company, teams, and make copies. To be honest, I use AI to help me make a copywriting. Thanks to AI maker!
  • Since this company is new company, we lack of people especially we have no Project Manager. That’s why I have to take responsible as a Project Manager also.

Final Mockup

There are many things I do in this project besides designing the website. However, I quite enjoyed every process. Let me show you the final mockup of this project. I’ll divide it according to the category according to the design of the page it is in.

Homepage

Our Vendor

Vendor Categories
Vendor Pages

Company

Contact

Blog

Policies & Other

Component

After design process, the project will go to the next phase which is developing phase. For this website, the developer use NextJS as programming language with Strapi as CMS. To make the process easier and faster, we use a library which is the library that we used was Shadcn/ui. This library is very easy to implement in the design process and developing process. These are some examples of components used in this project.