Wiki Mindo Redesign (2019)
Wiki Mindo is the internal system website from my previous company, that can be used to announce important events in the office, book a meeting room, see employee profiles, and many more.
Since the launch of the website, there are many complaints from the employee who uses it. Most of them complained about the old-school interface, many unorganized layouts that make the feature difficult to use.
Based on those complaints, it impacts the number of uses of the system, which is very small. The other problem, on the previous development there is no dedicated designer who tried to solve the interface and layout problems. And the most challenging thing is, the website is build using a framework that has so many limitations.
The development team chose me to take the role of UI Designer for this project. I have some responsibilities such as designing the new layout and interface of the website from wireframe, high fidelity design, to prototype. Besides that, I also need to work closely with the developer to make sure the development process of the new design can run smoothly.
Along with 2 developers, 1 project manager, we agreed to divide the project into some milestones. In one milestone, we will focus on several features, based on priority. The priority comes from the urgency of the feature that is most needed by the employee.
Before we started the redesign, the current design needs to be reviewed. Which part we can keep, which part we can improve. In this step, the developer also reviews the framework used on the website to know what we can do on the redesign process.
Using the information from the review process, I put the idea for each screen that will be redesigned into some wireframe on my sketchbook.
After I finished creating a wireframe for each feature screen in one milestone, I showed it to the developer and ask for their confirmation about the possibility of the design can be developed or not. Once they confirmed it can, I move to the next step.
On this project, I used Adobe XD to create the high-fidelity design and prototype.
Once I finished the high-fidelity design for one feature, I export it to Zeplin so the developer team can use it as their guidance to develop the design into code. After I export it, I continue the design on the next feature.
All high fidelity design for all features in one milestone finished, next is connecting all of the screens to be an interactive prototype. This prototype will be presented to the office team and also give complete guidance to the developer team. The result from the prototype presentation was very satisfying. The office team was really happy with the prototype and the redesign version of the website.
After the developer team submitted their work, I and the QA Team test the website to make sure everything matches my design.
If there is any bug or unmatched design founded by the QA team, they will report it to the developer team and me. And if needed, to solve the issue founded by them, I rework my design with the developer.
Soon after the first version of the redesign was released on the website, our team got good feedback from the employee. They said the redesign solved their concern about the previous website version. The interface looks more clean and modern. And with the rearrangement of the website layout, the feature now easier to use.
One of the most challenging parts of this project is the framework. There are so many limitations that may prevent us to give an ideal solution for the redesign process. But, our team can adapt to that condition and tried to solve the problem using that limitation.
In conclusion, this project taught me many things when building a digital product, such as a website. First, a proper interface can make a difference in user experience when using the product. But don't forget to not only create a good interface, but we also need to solve the main problem first, so it will make the interface successful.
The other thing I learned a lot is, a design project can be well executed if we maintain good collaboration with the developer. Ask for their idea, suggestions, because they are the ones who will execute our design to be real.