More than just a pretty interface.

Project Context

Company Background

ClickTime is a time and expense management web application with over 17 years of experience. Prior to my addition to the small design team of two, the software had led itself to inconsistent UI/UX and accumulated design debt over the years. Being a strong supporter of visual consistency, I took this opportunity to design and develop the company's first style guide and its corresponding documentation.

Need for a Style Guide

• Lacked visual references and documentation around in-app styling and conventions for the web components
• Increased inconsistencies due to the lack of standardized components
• Mixed user experiences and interactions (conscious & subconscious)
• User assumptions about a "broken" or messy product and poor branding impression

Value Provided

• Serves as the leading guide for the Design, Product, Engineering, and QA teams
• Resolves ambiguity during software development and leads to product consistency
• Supports a positive company brand image by prioritizing visual cohesion within the product
• Increases user's confidence in the company's credibility and competency

Roles & Responsibilities

As the UI Designer

• Conducted extensive audits of the visual components in the web application
• Had full ownersA7A7A7p to decide which components to slash and which to improve
• Built the UI components library in a Sketch file for faster prototyping that led to consistent mockups
• Provided thorough documentation about UI component behavior, examples within the app, and design specs

As the UI Developer

• Fully developed the style guide with HTML, CSS, Javascript, jQuery and Bootstrap
• Used GitHub for version control, code review, and final handoff to development team after leaving company

Reflection & Final Thoughts

Challenges

Creating this style guide was no simple task and I had my fair share in technical as well as company-wide challenges. The creation of the style guide and UI components library was initially started as a side project to help with my core UI/UX responsibilities. As it began gaining traction, it steadily became a core project and required juggling with my other projects. Addditionally, because many of the older pages in the app used legacy code, the changes required several approvals and effort from other departments. The lack of design input in addition to the company's lack of prioritizing interface standardization has resulted in many layers for me to detangle and implement.

Looking Forward

During the implementation of the style guide, I quickly ramped up my front-end development skills as I was the main contributor and also learned so much about coding from my colleagues. As I had full ownership of the design components, I've provided a guidance for the software to move into a more modern and streamlined direction. At this point, the style guide is slowly decreasing design debt as it serves as a reference guide for the PMs, developers, and QA teams for new development and code refactoring. Though I am no longer at the company, I believe this guide will help the team's prospective designers acclimate to the software and also offer the space to improve its components.

Project Context

Company Background

ClickTime is a time and expense management web application with over 17 years of experience. The 3 time entry pages (Day View, Week View, and Timesheet View) embody the company's core time tracking functionality and highest number of user traffic.

Business Opportunity

Concurrently, ClickTime was making other improvements and additions to the product as it was ramping for the software's newest version release. We took this auspicious opportunity to include the refreshed interfaces for the 3 time tracking pages along with the new updates.

My Roles & Responsibilities

As the dedicated UI/UX designer:

• Conducted competitive analysis & research of ClickTime competitors
• Explored ways of modernizing the interface
• Intergrated the internal style guide to maintained visual cohesion and consistency
• Consulted Google Analytics to inform my decisions to remove unused functionality
• Updated copy to improve in-app messaging for clarity and a more professional tone
• Collaborated with a Click Time software engineer to implement the UI changes

As the ad hoc UI Developer:

• Used Chrome DevTools to inspect current UI components and its corresponding styling
• Provided code snippets for design specifications for Day View and Week View
• Implemented the UI changes for the Timesheet View page

Technical Constraints & Challenges

These pages have undergone multiple permutations and subtle changes over the years prior to my addition to the team. As a result, multiple layers had accumulated and the code had become fragile and suspective to breaking QA tests. Additionally, these 3 pages used a version of ExtJS Javascript framework that is no longer supported and led us to be very conscious of the library's constraints when making more substantial revisions to the interface.

Process

Competitive Analysis & Research

To begin my research, I conducted a 5-week project of tracking my time with 5 different products— ClickTime being one. I chose 4 other competitor products and placed myself as a user who needed to track my time spent on projects. 
After the 5 weeks, I held a company presentation to share my analysis and created a product map and feature comparison spreadsheet.

UI Prototypes + Style Guide

As I worked to modernize the interface of the 3 time entry pages, I was diligent in integrating the style guide to ensure the pages remained on-brand and consistent with one another. My biggest priorities included updating colors to match style guide, removing redudant or unused functionality and elements, uniforming the typgraphy and iconography, improving copy for messaging, and incorporating more intuitive user interactions with the interface.

Front-end Exploration & Implementation

There was a lot to be learned about the back-end and front-end of the targeted pages! Some steps involved in the discovery phase included: inspecting with Chrome Dev Tools, pair programming with ClickTime's Software Engineer Clara, and making additional changes on Sketch.Following this, Clara and I continued our collaboration and then I eventually committed my own code changes after getting my own Dev environment. (More info below)

Design & Front-end Development

UI Exploration

Chrome Dev Tools quicky became my best friend as it was my main source of examining the code. From here, I worked specifically with the time entry pages and manipulating the CSS to see its affect on the the front-end components. Additionally, I took screenshots of the live page and then stitched together additional styling that I created in Sketch.

Pair Programming

I had the pleasure of collaborating with Clara for this project. After creating cases with design specifications, She and I sat side by side and hashed out the front-end changes to Day View and Week View pages.

Getting my own Dev environment

After spending much time in DevTools and familiarzing myself with the front-end code, I received my own dev environment. I was able to commit my UI changes indepedently and had implemented Timesheet View page UI refresh on my own. Woo hoo!

Final Thoughts

Reflection

This project provided satisfying results as I had this opportunity make an impact on the product's core pages. Approaching the tasks was initially daunting and implementing these changes was no simple feat as I ran into technical constraints and limited development resources. Playing both the roles of Designer and Designer-turned-Developer had lent me to really enjoy learning about front-end development and appreciating the work of the software and QA engineers.

Looking Forward

At the time I had left the company, the time entry pages had completed about 80% of its conception. The several components I had prototyped with design specifications include the calendar ribbon portion and the date display. In the end, the UI refreshes for the time entry pages as it was released had received several appraisals and would provide guidance for the company's prospective UI refreshes. Scroll down below to compare the old and updated time entry pages