A case study about how my personal hackathon project turned into a product feature that shaped the company's product strategy.
UI/UX, web app, productivity
AI trained web application that equips Diagnostic Radiologists with relevant clinical history. I led the user experience and user interface efforts and was a supporting role in the user research.
healthcare, UI/UX, web app
By providing the right information at the right time for the users, Yesware's weekly support tickets decreased by 16 percent.
UI/UX, web app, customer support
I led the project for the user interface refresh project for ClickTime's core pages and as well as contributed to the front-end implementation.
UI/UX, enterprise web app, pair programming
I planned and conducted the internal workshop at ClickTime that resulted in the creation of high-level personas built around user needs, motivations, and pain points.
user research, workshop, presentation, personas
I championed visual consistency and UI modernization at ClickTime through the creation and development of their first internal style guide and UI components library.
UI, visual design, front-end dev, style guide
After struggling to find a fitness app that I liked, this became a design exercise for myself to envision my ideal fitness app.
mobile app, UI/UX, visual design
If USPS branched into a banking system, what would it look like, how would it work, and who would use it? This project explores my solutions for these questions.
UI/UX, interaction design, industrial design
The former IPA beer label was in need of major makeover. Being a beer enthusiast myself, I was excited when I was asked to create the new look of this groovy, hoppy beer!
graphic design, packaging, FMCG, beer!
This is a passion project of a friend who asked me to designed the website, logo, and the style guide.
UI/UX, visual design, branding, logo
My husband Peter and I wanted to build virtual version of one of our favorite board games to make available for family and friends (and others) to play during the Quarantine of 2020.
UI/UX, gaming, for fun
Considering other perspectives can only result in diverse and creative options to explore.
Inside and outside the office, I'm constantly asking questions and seeking more knowledge.
Never be afraid to collaborate, share, and offer suggestions and execute when there is an opportunity.
Design is all about people and shouldn't be treated as an isolated activity or single thought.
Exploring our world helps me cultivate new ways of thinking and embrace the unfamiliar.
This one has been ingrained since childhood and has become my mantra. Thanks dad!
I championed visual consistency and UI modernization at ClickTime through the creation and development of their first internal style guide and UI components library.
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.
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.
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.
I planned and conducted the internal workshop at ClickTime that resulted in the creation of high-level personas built around user needs, motivations, and pain points.
ClickTime is a time and expense management application with over 15 years of experience. Within the more recent years, the company has added two UI/UX Designers (me being one) who have spearheaded the user research efforts for the product.
Prior to the small design team of two, there was virtually no documentation or any research surrounding our existing users. The Lead Designer and I both saw this as a gap in our knowledge and felt that having meaningful insight into our users behaviors was essential in building a stronger product. Our efforts to incorporate user research sparked conversations within the company and the facilitation of the internal Personas Workshop with our stakeholders.
CEO | Support Manager | Sr. Account Executive x 2 | Sales Manager | Sr. Product Manager
These personas are used mainly in the Product Team during the development of new features. They are referenced to specific user stories in the internal product management software and are kept as a reminder than our users are real people with real needs and goals.
Disclaimer: The content of the deliverables seen below are intentionally blocked as they are internal resources.
I led the design for the user interface refresh for our highest trafficked pages and as well as contributed to the front-end implementation.
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.
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.
As the dedicated UI/UX designer:
As the ad hoc UI Developer:
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.
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.
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.
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)
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.
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.
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!
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.
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
Click and drag arrows to compare before and after
Click and drag arrows to compare before and after
Click and drag arrows to compare before and after
A concept for fitness goggles using augmented reality. The user would navigate through obstacles and have a corresponding app for music and stats.
If USPS branched into a banking system, what would it look like, how would it work, and who would use it? This project explores my solutions for these questions.
This project was completed for the Interaction Design course taught at San Francisco State University's College of Extended Learning in Spring 2016. The still images below are screenshots of my presentation and the final interactive and animated prototype.
Given a range of projects to choose from, I chose the scenario of USPS's expansion into a banking service. I mapped out the ecosystem of the banking service and explored further into the kiosk user interface concept. Additionally, user interactions with the kiosk screen, branding, personas, and physical product dimensions was then concepted into the kiosk system known as USPS Banking Simplified™.
(n.) A banking service provided by USPS that allows its members to reload their card with cash and checks.
How it worksThe former IPA beer label was in need of major makeover. Being a beer enthusiast myself, I was excited when I was asked to create the new look of this groovy, hoppy beer!
This is a passion project of a friend who asked me to designed the website, logo, and the style guide. Hack Congress is currently under development.
Following the 2016 Presidential Election, Brian Holt felt motivated to start his passion project Hack Congress. The objective of this website is to connect tech professionals with campaigns in need of assistance.
I was involved as the sole designer and responsible for the look and feel of the Hack Congress website & branding. Showcased below is the landing page and its corresponding style guide that includes typography, color scheme, interaction & logo design. Providing a style guide for this project makes it possible for the Brian to quickly develop without needing to worry about the styling. The website is currently being developed and will be launching some time in 2017.
After struggling to find the right fitness app that encompasses the right features for an effective work out, my partner and I set out to design and develop our own. (work in progress)