Niagahoster is a web hosting and domain name service provider company that was established in 2013. The company is located in Yogyakarta and has served more than 52,000 customers throughout Indonesia.
In this Niagahoster homepage redesign process, I implement four phases of the design process.
- Information Architecture. The phase of analyzing information on the Niagahoster homepage
- Define Problem. The phase of defining the problems experienced by user
- Research. The phase of researching user needs to achieve their goals
- Redesign. The phase of redesigning the Niagahoster homepage
First, I have to analyze and understand the content information on Niagahoster homepage. Thus, the problems experienced by user will be easier to define.
Based on the results of the analysis, I gathered information that there are 13 contents on the Niagahoster homepage.
According to personal experience using Niagahoster homepage, I feel confused when I intend to create and check a domain name for my project. Because on the homepage I couldn’t find a domain name search field on the homepage. I just found out that I have to click the domain services feature first to check the domain name.
To validate my problem and to find out other users problem in using Niagahoster website, I also conducted research using google form to my friends who use to visit Niagahoster website. The purpose of this research is to find a reference in redesigning Niagahoster homepage.
There are seven respondents on the research, ranging from students to employees with the ages of 17 to 25 years. These are the results :
After asking a few questions to users, then I set the user needs to simplify the redesign process of Niagahoster homepage.
The result of the research shows some user needs, those are :
1. A clear explaination of the comparison in hosting facilities
2. A domain name search field
3. A more concise website
Before I redesign Niagahoster homepage, I re-created the information architecture based on the results of the survey. However, because there is one user who think that the website should be more concise, I combine similar content, such as information on the advantages of Niagahoster. In addition, I also removed discount information content, because the content was already in section header.
Finally, I added a domain name search field to help the users to check their domains. The new information are showed below.
These are some website that have similar contents to Niagahoster. In line with the user opinion who find it difficult to compare the facilities provide in each package, I looked for some references to form the hosting packages in a table form.
Wireframe (Low Fidelity)
The next phase is creating wireframe for Niagahoster homepage based on the original content on Niagahoster website. For the wireframing I used figma. Moreover, to make it easier, I used 1440 px screen width settings and 12 column grid layout settings with 200px margins.
Defining Colors and Design Elements
Before heading to the mockup, I did some research on what colors I should use, based on the brand and the field of the company.
Mockup (High Fidelity)
After creating the wireframe, I continue to mockup phase with filling the images, adding colors, refining the layout, and creating some design elements.
Here’s the mockup link : bit.ly/NewFaceofNiagahoster