Construction Cloud Platform
UX/UI Case Study
The aim of this project was to create a redesign of the company's online cloud platform to fit the design of the new UI Style Guide. Construction Cloud Platform is an online web platform that manages and stores information in an online database.
​
The challenge:
This redesign was going to take up a lot of time, it took roughly two to four month to complete. For this project I focused on the table page as it was where needed the most work. This project was focused on the UI/visual Design and not on the UX design.
​
Role:
My role was to research competitors, create mid-fidelity mockups and create a high-fidelity mockup.
​
Design Process
Previous Design:
The original design is cluttered with a lot of visual noise and secondary features that could be hidden out of sight for the user.
The table breaks out of the screen to the right meaning the user has to scroll right to see other columns. Three of which are empty. There was a lot that could be improved upon and I could see so much potential for this design.
Research & Moodboard:
I created a moodboard of designs after researching some of the best UX/UI table designs. I found a few I liked and took design and typography inspiration from each.
I specifically liked the image behind the side menu and the colour icon on the dark side menu. I showed this moodboard to the stakeholders and they requested some mockup versions.
Ideate:
I researched the best practise of table layouts for the UX and UI so that I could do the best I could to get the company up to the best-in-class standard that its competitors displayed. After sketching a few design ideas and going over the layout, I decided to start creating high-fidelity mockups to show the stakeholders. They offered some valuable feedback that helped me come up with the final design.
Mockup & Conclusion:
After finishing the final mockup, I presented the design to the stakeholders and they were happy with it. I got rid of a lot of the visual noise from the table and followed some table guidelines that optimize the table for the user to easily scan the table. I would put the actions on the right but the stakeholders wanted it on the left. This goes against most users' mental models as almost all tables follow the same pattern and this would need to be tested but they decided against that and to go with the actions on the left. I improved the pagination by following best practice guidelines for tables. I also suggested that they implement either collapsible columns or when the user is creating the table, they select the columns they want to stop the overflow of the table.
​
In conclusion it would have been preferable to have user testing done prior to the redesign and once the table design had been approved, created a prototype for the user to test to validate any and all design changes that were made.
