App UI Design

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

My Role

UI Design
Wireframes
Mockups
CSS Styling

Tools I Used

Axure
Sketch
Dreamweaver
Chrome Developer Tools
CSS Lint
W3C Validator

Methods

Interviews
Testing

The Problem

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.

Before

My Process

Requirements Gathering

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.

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.

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

Wireframe

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.

Mockups

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:

  • Used bold color and high contrast to support better readability of the information, strengthen the call to action, enhanced navigation, stimulated interactions, satisfy aesthetic needs and visual solutions.
  • Emphasized important content by making it bigger and bolder.
  • Added white space around elements to simplify the layout and eliminate clutter so users can quickly locate the information they’re looking for.
  • Cleaned up some of the positionings of elements.
  • Updated old icons with new SVG icons (provided developers files to replace on the server).


I presented the mockups to stakeholders to get their feedback.

Previous
Next

Style Guide

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

Testing/Launch

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.