The client had an internal legacy application. The development team did all of the back-end and front-end tasks needed. However, there wasn’t a dedicated UX/UI Designer then, so the look and feel of the interface wasn’t a priority. As time passed, the application evolved, and users were no longer satisfied with the aesthetics, and it didn’t adapt to smaller screens, so the company wanted to modernize and improve the experience through CSS styling.
I met with management to learn more about what they wanted to accomplish with this project and what I required. As a result, I learned more about the goals for the app and the users.
I conducted research to identify user pain points and problems.
I communicated with users to gain insight into which areas of the app needed further refinement. I engaged with them to learn what they do and don’t like about the current experience and what they’d like to see changed.
I compiled my notes and looked for trends. A lot of users were frustrated and complained about their experience interacting with the components.
I also went through the app and tested interactions, and noted down issues I found myself.
I organized the feedback into one document and filtered them into actionable steps to be aware of the priorities that had been established by the users.
The client felt that the existing architecture of the app was fine and no change of the structure was needed, but I had the ability to make a few minor updates to the structure using CSS. The creation of user flow wasn’t necessary, but I did create and presented a wireframe. The app was used on desktop computers, so I only focused on bigger screen sizes.
I created a new concept for the app through mockups. I adhered to the company’s Interface Guidelines and referenced specs from their Design System to maintain consistency. I gathered components needed to cultivate my design. This helped me work efficiently and guide me with the specs needed later on in the project.
I applied the following design principles to improve the UI:
I presented the mockups to stakeholders to get their feedback.
I didn’t have access to files on the server, so I used a technique in Chrome Dev Tools to generate styles into a file from the browser. I started styling the shell of the app, then worked my way down to the interactions. I added CSS transitions to make interactions smoother. Next, I ran the CSS code through CSS Lint and W3C Validator to check for any errors. Finally, I provided the file to the Development Team for implementation.
I tested my work after developers implemented the styles and pushed changes to the staging environment. I recruited users to validate the changes, and I also conducted an accessibility test using a keyboard. I made updates as needed. After everything checked out well and was approved, the app was put into production.