Hello! My name is Julie Ho and I'm a UI & UX Designer with web development chops. If you're looking to work with a versatile and fun-loving designer, let's get in touch!
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.
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.
I championed visual consistency and UI modernization at ClickTime through the creation and development of their first internal style guide and UI components library.
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.
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!
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)
Julie Ho discovered her passion for UI/UX design while working on her senior thesis design project in sunny Long Beach, California. After graduating, she pursued the creative path that eventually led her to design for enterprise software in San Francisco. While there she also strengthened her front-end development skills and found herself contributing code to the web application.
Today, Julie is working as a roduct Designer at Yesware in Boston, MA where she works closely with fantastic colleagues to help sales professionals build meaningful relationships. She previously worked as a UX/Visual Designer at IBM Watson Health where she tackled complex problems and looked for ways to simplify patient care for radiologists.
When she’s not nose-deep in pixels and CSS, she either spending time with friends and family or exploring a new city with her husband. Her other interests include hunting for thrifty deals, lending a design hand to the community, and sipping coffee in a cozy cafe.
ClickTime Style Guide
I championed visual consistency and UI modernization at ClickTime through the creation and development of their first internal style guide and UI components library.
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 ownership 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.
Personas Workshop
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.
Company Context
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.
Internal Need
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.
Stakeholders Involved
CEO | Support Manager | Sr. Account Executive x 2 | Sales Manager | Sr. Product Manager
My Role & Responsibilities
Conducted research on how to conduct research
Researched users who tracked time for business
Produced personas workshop outline, presentation, and workshop activities
Led the facilitation of the Personas Workshop
Produced the graphic templates for the Personas Cards (seen below)
Current Usage
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.
Time Entry UI Refresh
I led the design for the user interface refresh for our highest trafficked pages and as well as contributed to the front-end implementation.
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 ClickTime 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
Day View UI Refresh
Old UI
Updated UI
Click and drag arrows to compare before and after
Week View UI Refresh
Old UI
Updated UI
Click and drag arrows to compare before and after
Timesheet View UI Refresh
Old UI
Updated UI
Click and drag arrows to compare before and after
Augmented Reality Fitness Goggles
A concept for fitness goggles using augmented reality. The user would navigate through obstacles and have a corresponding app for music and stats.
USPS Banking Simplified™
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.
Project Context
Background
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.
Project Brief
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™.
USPS Banking Simplified™
(n.) A banking service provided by USPS that allows its members to reload their card with cash and checks.
How it works
Members can use their card for purchases everywhere Visa debit and RFID payment is accepted
Members can reload card balance at USPS, Walgreens, CVS or at USPS Banking Simplified™ kiosks
Members cannot withdraw from card balance
Bootlegger's Far Out IPA
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!
Hack Congress Website
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.
Project Context
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.
My Role & Responsibilities
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.
Sputnik Fitness Mobile App
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)
