Suparna Jasuja
UX/UI Designer & Developer
Cityspan Technologies
User Interface Redesign
Background
A two year project to redesign the City of San Francisco Dept. of Children, Youth & their Families’ customized grants and services tracking system
The three major parts of the project included their Request for Proposal application, grants management (contracting & invoicing), and services management (enrolling participants and tracking activity attendance)
Project Goals
Improve usability by giving the UI a more modern look and making UX changes where necessary
Simplify navigation (in order to make pages more accessible and improve the quality of data)
Decrease page load times
Improve UX to decrease the need for written instructions (design that leads the user to intuit what they must do on each page)
The Challenge
As the City’s prior system evolved over the last 15 years with Cityspan's software, the customized result fit the department’s business processes but was cumbersome for staff and grantees to navigate, leading to poor data entry quality.
My Role - Primary Designer + UI Developer
Design Process
I am the only in-house designer at Cityspan, but during the first phase I worked in collaboration with a graphic design firm for two months, which gave us a great starting point for our designs. I then helped my company further refine the visual identity to further fit our specific needs and satisfy our client. I also extended these finalized component designs into creating 50+ high fidelity mockups, using HTML/CSS, Photoshop and Illustrator.
A web development firm then helped us develop an initial CSS library and html structure using Bootstrap 3. I then took ownership of making changes to the CSS library when needed, and adding to it when I designed new features.
Implementation Process
Cityspan has its own infrastructure that we built the UI on top of. I worked closely with our front-end and back-end developers to integrate the new CSS library and new Bootstrap 3 based HTML structure to our system. Once the new UI was fully functioning in the system's infrastructure, I was able to create new pages and edit existing ones directly in the code base using HTML and CSS.
The Result
The full grant management, invoicing, and participant & activity tracking functionalities are live and currently being used by over 250 non-profit program grantees. Our client was very satisfied with the improved navigation, aesthetic look and feel, and new user-friendly features.