{"id":2557,"date":"2020-09-02T09:41:47","date_gmt":"2020-09-02T09:41:47","guid":{"rendered":"https:\/\/wp.vlthemes.com\/sixten\/?post_type=portfolio&p=2557"},"modified":"2024-03-09T10:52:28","modified_gmt":"2024-03-09T17:52:28","slug":"vacation-tracking","status":"publish","type":"portfolio","link":"https:\/\/boulianne.net\/design\/portfolio\/vacation-tracking\/","title":{"rendered":"Vacation Tracking Interface"},"content":{"rendered":"\n
\"Vacation<\/figure>\n\n\n\n
\n
\n

Vacation Tracking Interface<\/h1>\n\n\n\n

In early 2017 I was testing out a new HR & vacation tracking app for the company I worked for. I liked the direction the app was heading to allow self-management of vacation time but saw some opportunities to improve the display of information in the leave tracking module.<\/p>\n\n\n\n

Evaluating With Heuristics<\/h5>\n\n\n\n

Using Jakob Norman’s 10 Usability Heuristics for User Interface Design<\/a> to evaluate the design leads us to two heuristics that can be improved upon:<\/p>\n\n\n\n

Match between the system and the real world.<\/b> Using terms that correspond to desired outcomes (natural mapping) helps build an experience that feels intuitive.<\/p>\n\n\n\n

Aesthetic and Minimalist Design. <\/b>Interfaces should not contain information that is rarely needed. Every extra unit of information in an interface competes with the relevant  information and diminishes their relative visibility.<\/p>\n\n\n

\n
\"Design<\/figure>\n<\/div>\n\n\n
Using Existing Styles<\/h5>\n\n\n\n

Although brand guidelines aren’t provided in a speculative project, I collected what I needed using a code inspector on the live application. This ensured that the new designs match the existing application to the pixel. Here are the colors and fonts I used to match my design updates to the existing app.<\/p>\n\n\n

\n
\"Brand<\/figure>\n<\/div>\n\n\n
Revisiting The User Interface<\/h5>\n\n\n\n

Below is part of the screen I adjusted and sent to the product designer as part of my product feedback. It helped illustrate one way to both condense and simplify the layout and usability of the leave tracking screen.<\/p>\n\n\n

\n
\"After<\/figure>\n<\/div>\n\n\n
Feedback from the Product Designer<\/h5>\n\n\n\n

My initial email with product feedback turned into a phone call with the product designer. Then into a chain of emails and this prototype showing improved information display and interaction. It’s always a pleasure to get to dig deeper into product design with different teams.<\/p>\n\n\n\n

\n

“This is killer. First off the toggle is nice, the more I think about it the more I like it. Also your explainer pop over is killer. Some JS stuff we\u2019ve been meaning to work into the system, definitely collapses a ton of that stuff. Great points, just shared with the product team. We thrive on feedback so this is amazing.”<\/p>\n\n\n\n

<\/p>\nEvan, Product Designer<\/cite><\/blockquote>\n<\/div>\n\n\n\n

\n
Scope<\/h6>\n\n\n\n

4 hours<\/p>\n\n\n\n

Tools Used<\/h6>\n\n\n\n

Adobe XD, Adobe Photoshop<\/p>\n\n\n\n

Roles and Responsibilities<\/h6>\n\n\n\n

This was an independent, non-commissioned project. I performed a heuristic evaluation, concept development, and interface design.<\/p>\n<\/div>\n<\/div>\n\n\n

\n
\n\t
\n\t\t
\n\t\t\t\"Visual\n\t\t<\/div>\n\t<\/div>\n\t\t
\n\t\t\t\n
\n\n\t\t\n\t\t\t