Legacy App UI Design

Legacy App UI Design

API Source provides developers instructions on how to effectively use and integrate with an API. It’s an online reference manual containing all the information required to work with the API, including details supported by examples.

Due to a Non-Disclosure Agreement, information on this project is limited.
Client

NIC

My Role

UX/UI Design
CSS styling

Tools I Used

Sketch, Invision, Dreamweaver, Chrome, Dev Tools, CSS Lint, W3C Validator

Project Summary

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.

Legacy App Before
Legacy Application Before

The Challenge

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.

The Solution

Check out the steps I took to address the project goals. See my process below.

My Process

Requirements Gathering

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.

Research

I conducted research to identify user pain points and problems.

Interviews
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.

User Persona
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.

Wireframes

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.

Mockups

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:

Used bold color and high contrast to support better readability of the information, strengthen call to actions, enhanced navigation, stimulate interactions, satisfy aesthetic needs and visual solutions.

Emphasized important content by making it bigger and bolder

Added more white space around elements to simplify the layout and eliminate clutter so users can quickly locate the information they’re looking for.

Texture and tone to influence the order in which users read the text.

Cleaned up some the positioning of elements.

Updated old icons to new SVG icons (provided developers files to replace on the server).

I presented the mockups to stakeholders to get their feedback.

Validation

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.

CSS

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.

cssscreen

Testing

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.

Launch

After everything checked out well and was approved, the app was put into production.