Redesigning Internal Office Website

This is a story on my design journey. And sure, this story is from my point of view with all of the conditions in the project, that may not seems ideal if comparing to the other design project case. So, let’s begin.

The previous design of my internal office website

The Challenges

Just like the other jobs in the world, challenges will always come in the job.

The Process

After we knew what we can do with the technology used, we decided to use these steps during the development process:

  • 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.
Lo-fi wireframe on my sketchbook
  • 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.
Design for each page on Zeplin
Prototyping process on Adobe XD
  • 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.

The Result

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.

The redesigned version of my internal office website

UI Designer | Author of www.masbobz.com, a blog about design, freelance, and self-improvement in Bahasa Indonesia.