HCM Card Detail

The "HCM" Project

CSS SASS HTML JQUERY UI sketch adobe photoshop invision

Background

This is a project that has not yet been released, so we'll just call it "HCM".

In the HCM project, we're building a native app for all users with an additional desktop browser interface for admins. There is a task system involved which allows admins to create cards and assign them to users.

Native App for Users

Our CEO, product owner, and I went through many wireframes and mockups early on. We had to quickly prep a prototype for our CEO to show to investors. They provided a rough starting point, but looked pretty nice given the time table.

View the v1 prototype

After another time-sensitive push for a prototype revision, we were able to get the developers involved in the discussions. We made some better decisions about the flow and IA. We adopted a card approach for tasks.

View the v3 prototype

The latest prototype is pretty solid on design, though we will likely need to adjust the sizing on some text and other elements as we build to assure excellent usability across devices.

View the v4 prototype

Join the app via invite code; view task details
Three 'swimlanes' contain tasks at different stages of completion
Three 'swimlanes' contain tasks at different stages of completion
Manager's view of a user's profile
Assessment report
A rewards area where users can redeem points for stuff

GALLERY: Native Mobile App


Desktop App for Admins

This was a secondary priority; it is still in the design phase. I just finished the flow of 90% of the tool. I compiled the rough mockups into a prototype to make sure everyone is on the same page.

View the rough flow prototype

Build tracks with the track editor
Drag & drop states / hover states of various elements
Library of learning curriculum
Curriculum editor

GALLERY: Desktop App for Admins


Code

I was asked to help our front-end dev write the views for our cards and their corresponding detail views.

This is the rendered code

This is the rendered code

Takeaways

Don't forget to check the little phones and the big phones for design fit. Use lighten() and darken() mixins in SASS to make color adjustments easier and more consistent!