The client had an internal legacy application called API Source that was built years ago. The development team did all of the back-end and front-end tasks needed. 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 UI/UX of the solution, so the company wanted to modernize and improve the experience through CSS styling.
I had to give the legacy app a “face-lift” by generating CSS styles to solve UX problems, reduce friction between users and their goals, and optimize the UI design with aims to improve the overall usability and accessibility. I didn’t have access to upload my files to the server and had to use pure CSS to accomplish the task.
Check out the steps I took to address the project goals. See my process below.
I met with management to learn more about what they wanted to accomplish with this project and what was required of me. As a result, I learned more about their 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.
The app is for internal Developers who needs documentation to best complete their integrations and want to streamline their API workflow and deliver faster.
Evaluate Review & Feedback
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 though 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 so that I could 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 structure using CSS. The creation of user flow wasn’t necessary, but I did create a present a wireframe. The app was used on desktop computers, so I only focused on that screen size.
I created new concepts of the app through mockups. I had to adhere 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 synced the mockups to Invision and recruited a few users to test micro interactions. After a few iterations and tweaks, I received approval and moved on to CSS styling.
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. I ran the CSS code through CSS Lint and W3C Validator to check for any errors. I provided the file to the Development Team for implementation.
I had to test my work after developers implemented the styles and pushed changes to staging environment. I recruited users validate the changes and I also conducted a test using a keyboard. I made updates as needed.
After everything checked out well and was approved, the app was put into production.