Initial Sketches

In order to understand how kudos was going to be used by our clients, I first spoke with marketing to gauge how users would like to view or give kudos to their team (or wider company) as a result I experimented with a filtering system (1) and drew inspiration from other parts of our system to ensure consistency. this led to three sketched designs where I included a month drop-down with immediate team filter options. But this progressed to adding a search bar to find specific individuals, to a filter button that provided a collapsible option depending to aid with different screen sizes. These three components allow anyone to find a person they want to give/view kudos for, whether it’s a general look or more a specific person in mind. You will also find brief designs showing how a comment would look (2), but I built upon this later when I knew how the spacing and layout would be around it.

The three timeline sketches (3-5) show the change and proposed the final idea of how the screen would look. what was clear was that the navigation/header would look the same, with the search bar and month on the same row and filtering below, for a clear hierarchical structure. But I experimented with having members’ names displayed on the left if a filtering option was selected (3) However, this was scrapped in the later two sketches as it took up valuable space that would be used for the kudos comment. Thus, I opted for the final design (5) where more attention and space would be given to the comments including the badge first for visibility, followed by the profile icon of the individual to give you kudos and the date and comment beside it.