The above image is the very first version of the internal website on the company I worked on. That website is used to display the information of all employee, book the meeting room, discussing a topic on a specific forum, and many other features that will be developed in the future.
Since the end of last year, I have been asked by the management team to join the project for redesigning the internal website and to give some input on the development process. This offer comes because they know that I have an interest in the design process and have some experiences to coordinate the team.
The first concern of this website is about how the user interface (UI) looks like. The management team and I come to the conclusion that this website’s UI is too old school and needs to be redesigned. This is intended for giving a good first impression to the user before they started using the website.
So, the project is officially started in January.
Considering there is already so many pages and functionality on the current website, we agreed for the 1st phase, we will focus first to redesign and keep the same functionality for the main and most used pages: Login, Forgot Password, Home, Calendar & Meeting Room Reservation, Employee profiles, About us, Client portfolios, and Teams.
Just like the other jobs in the world, challenges will always come in the job.
The most challenging things on this redesign project are the technology used to build the website: Tiki Wiki. Honestly, I and the developer team never used this before to develop any project on the office. So, when this project offered to us, we have some discussion on the first place to learn the technology.
This learning process takes around 5 work days to make us understand what is possible or not to be developed using this technology.
After we knew what we can do with the technology used, we decided to use these steps during the development process:
- Review of Page Design
First of all, me as the UI Designer, and the developer team reviewing all of the main pages to learn more about the detail of each page to have a better understanding what we will do next on the page design.
- Sketching the low fidelity wireframe
Finished with the review pages, I started to sketch the low fidelity (lo-fi) wireframe on my sketchbook to rearrange the layout and give some notes on it to fix the current layout and the flow that not consistent.
- Confirm & Discuss the possibility with the developer
The lo-fi wireframe that I created before is to give the developer an idea quickly about what my design looks like. This is very important to reduce the risk when we try to force using high fidelity (hi-fi) design but it’s not applicable. This lo-fi wireframe can be reworked faster if the design not applicable based on the discussion with the developer.
For me, sketching on the sketchbook is faster and enjoyable. For other people, maybe using some wireframe tools like draw.io will give a faster result. So it doesn’t matter what tools we used. Just choose one that suitable for our needs.
- Approved -> Creating High fidelity design
On this project, the management team gives me and the developer team freedom about what the UI Design will look. So, the discussion about UI design only happened between me and the developer team.
After I got a confirmation from the developer that my lo-fi wireframe is applicable, I continue my work on Adobe XD to convert the lo-fi wireframe into hi-fi design.
- Work in Parallel
When I finished creating some page design for certain features (for example : Authentication features that contained with Login and Forgot password page), I will export the design from Adobe XD into Zeplin and continue to create the other page design while the developer doing their job based on my exported design on Zeplin.
This Zeplin application is really helpful as a bridge between the designer and developer. It contains all graphics assets, typography, CSS code needed by the developer to convert the design into a web page. I always remind the developer team that they should use the design on Zeplin as guidance.
All main pages finished, next is the prototyping phase on Adobe XD. This prototype feature provided by Adobe XD gives the team better understanding about the connection between pages, simple interaction like dropdown menu, and the most important, give the real picture about the website looks after.
- Testing with QA Team
Once the developer finished their work, I collaborate with the QA team to give them some brief about the testing process. I tell them to use the Adobe XD Prototype and design on Zeplin as guidance for their testing process.
- Fixing Bug
And just like the other web/apps development, the bug will be there waiting for us. This fixing bug process mostly about the small details missed from the design. So, it’s my duty to remind the developer about the importance to follow the design and guide them if they have any difficulties to implement the design during this process.
- (Extra) Reworking the design
This step still on the development process, but I am not sure where I should put this step in the order list above. Because this reworking the design process sometimes happened after I show my sketch wireframe to the developer, sometimes it happened after the fixing bug and we come to the conclusion that some part of the design can’t be developed and need to be redesigned.
So, after we finished the 1st phase of this project, the website is officially launched and announced to all employee. I am so happy after the website launched, I got good appreciations from the employee that makes me and the team have a stronger will to continue this project and give better result in the next phase.
For the design choice that I used on this project, basically, I try to make the design as clean as possible with the combination of my company brand color (green + orange) and white color.
And for some part on the design, I used card elements to make the good separation between each section of the pages.
For now, I want to share you my prototype using Adobe XD as the result of this 1st phase. Let’s enjoy it 😁