Works In Progress
Works In Progress
Works In Progress
Atlassian Feedback App
User Interface Design Project
A project brief set by Atlassian to develop a cross-platform application for quick and effective internal feedback within a system or company to reduce the stress of giving feedback and create an environment of continuous improvement.
THE DESIGN BRIEF
“Happiness is the secret ingredient for successful businesses. If you have a happy company it will be invincible.”
- Sir Richard Branson
The Design Problem
Colleagues in both large and small companies alike, nearly always work in teams to achieve the company's goals. This process is often an undertaking that requires a lot of emotional work from the colleagues themselves to overcome their own personal and cultural biases, which is often left to the employees themselves to handle, which is not always an ideal outcome.
The process of giving feedback to colleagues - and of giving feedback in general - is commonly treated as an afterthought, or a post-mortem report to be completed after the fact, and ultimately does little to help employees navigate working in teams in the moment. The question then becomes:
"How can we give colleagues an opportunity to build a workplace culture in which they are able to freely give and receive feedback at any stage of a project, in a way that removes the stifling nature of 'serious' feedback and encourages employees to see feedback as a positive part of their working week?"
HIGH LEVEL TIMELINE
5 month project as part of a Master's degree.
MAKE OF THE TEAM
Originally this was intended as a group project, however, due to unfortunate circumstances I was the sole researcher and designer for this project.
PRIMARY GOAL
To produce a cross platform application design that facilitates effective, low-stress feedback opportunities between co-workers.
MY ROLE
I was the sole researcher and designer for this project.
This project was initially a three month project intended to be completed by 2-3 designers. Unfortunately not every project goes to plan. I unfortunately encountered discrimination during the early stages of the project, and after unsuccessful mediation attempts it was ultimately determined that I would need to complete the project on my own with extended deadlines to account for the increase in project responsibilities.
As such, this project was fraught with issues early on that impacted my success with the outcome, however I still believe the project was a valuable learning experience and bolstered my skills across the full pipeline of UX and UI design.
THE RESEARCH
The full research report and design proposal is included in the following slide gallery.
A summary of the background research, online ethnography findings, competitor analysis, identified needs, issues and personas, and a summary of the proposed and chosen ideas is included below.
ADDRESSING THE DESIGN BRIEF
As mentioned in the original brief, the application is meant to recognise great work and highlight growth opportunities in a way that reduces stress and creates an environment focused on continuous improvement.
My solution to the design problem primarily focuses around the concept of making the feedback process more appealing by rejecting a professional atmosphere in lieu of a casual, fun one. To this end, a motif of food is present in the design to riff on themes of nourishment and necessity, accompanied by bright colours and illustration-style imagery.
Giving employees an avenue for self-regulation and positive reinforcement as well as accountability without having to raise every issue with their managers or HR will help to create a healthier level of interpersonal communication and address issues earlier and more effectively.
DESIGN CONCEPT
The key focus of this app is on keeping things fun and
constructive, but the challenge was encouraging effective and actionable feedback in a way that does not detract from a casual and lighthearted experience.
The concept revolves around an elaboration on the 'sandwich technique' of constructive criticism delivery, in which highlighted areas for improvement are 'sandwiched' between positive feedback to make it more palatable to the recipient.
To achieve this, the feedback delivery feature of the app consists of a form with a number of separate text input fields, stacked one above the other like a sandwich or burger.
This design affordance ensures that feedback and criticism is constructed in a way that is beneficial for the recipient, while also teaching the deliverer how to construct helpful feedback as they are writing it.
FEATURES
Given the time constraints of the project, I aimed to keep the feature list and scope of this application relatively small. This worked to the design's benefit, as a more simple feedback system with less things to keep track of would make the system less overwhelming for the personas who are less mobile literate.
There are four main aspects to this app that are all integrated into each other, namely the profile, the feedback form, the mood tracker and the archive, which work together to encourage users to give feedback quickly and frequently, to obtain and share benefits, gain heightened emotional awareness in relation to environmental changes, and hold onto tangible sources of lasting feedback to assist in personal development and motivation.
PROFILE
The profile section is a hub for the user, containing the theme and badge customisation, the activity trackers for points and mood over time, as well as access to the archive and contacts list.
A set of the employee's top ten favourite badges will be displayed here along with their profile image and basic company details such as name and role.
Some badges will be obtainable without a point cost, such as pride flags, nationality flags, disability awareness icons, and other identity symbols, so that everyone is able to have at least one badge on their profile upon signing up.
FEEDBACK FORM
The primary feature of this app is the feedback form, which employs the use of the sandwich technique for giving critique and feedback.
Points are earned with each message sent, which can be spent on application themes, and awarding badges to other employees in a similar fashion to Reddit Gold or Steam Reaction Stickers.
As part of the form users are prompted to select their mood at the time of writing, which is then graphed and displayed on the mood tracker.
MOOD TRACKER
The mood tracker section displays an employee's reported mood over time.
Mood trackers are a valuable tool that encourage emotional awareness and can help with identifying the source of problems that may arise in correlation to changes in the workplace.
The mood tracker can be viewed only by the user by default, but an anonymised, aggregate view of all employee mood data can be obtained by managers or HR to track overall company mood.
ARCHIVE
The archive contains feedback received from co-workers. An archive is a deliberate choice over a forum or chat section as the inbox is not to replace face-to-face conversation but rather to complement it and assist in accountability and record keeping.
This is an important feature as it allows employees to remind themselves of positive feedback that is easily forgotten over time due to our inherent negativity bias, as well as having something tangible to refer back to when taking steps to work on personal growth.
REMOVED FEATURES
Originally I had included an 'avatar' system for users as a means to make them feel a greater sense of control and self expression within the app.
As I developed the clickable prototype I realised that this avatar system was not going to be as useful as I had initially hoped. It didn't integrate into the rest of the app in any way, and the nature of this app is for use between colleagues that see each other on a daily basis in a face-to-face role, so an avatar of themselves would be redundant where a profile picture would suffice.
The initial concept involved people earning points via feedback sent, to spend in a shop where they would buy items for their avatar, but as the app concept developed, it became clear to me that a 'badges' system in which users are given badges for achievements would be more fitting for the context.
In this new design, users would have a limited number of 'slots' to equip the badges that most closely aligned with their personal values, to be displayed on their profile, with a wide range of badges to choose from based on performance and/or personal identifiers.
Later in the process I realised that the competitive nature of a leader-board would be counterintuitive to the collaborative goal of the application, and it was changed to place more emphasis on personal activity and growth.
DESIGN EVOLUTION
FLOWCHART
The earliest part of the design process involved creating a rudimentary flowchart to illustrate the functionality of the application, and the relationship between actions and outcomes of tasks performed.
Along with some of the removed features already mentioned, originally I had intended to allow for replying to feedback within the app, and for the ability to send feedback anonymously.
These features were removed very early in the process as anonymity would be redundant in smaller workplaces and potentially harmful in larger ones, and removing the ability to respond to feedback directly within the app gives employees the time to reflect on the feedback and not immediately lash out in a reply if hurt by any criticism.
WIREFRAMES
The next step involved creating some basic wireframes in Balsamiq to visually depict the intended layout of the user interface.
This is where the badges started to replace the concept of an avatar, and the inbox started to turn into a message archive. At this stage I still had a focus on a leader-board and scoring system, which would later be replaced by a more personalised activity section with the mood tracking feature.
WIREFLOW
The wireflow was the final step in the process before creating the full mockup.
This is where I began to really flesh out the user interface and introduced concepts like the mood tracker and the badge system, and the relationship between pages within the app. The profile also started to become the main centre of activity, though I had yet to decide if I wanted to omit the main menu entirely or not at this point.
During usability testing, a main request was for the feedback form to incorporate some kind of prompting, or an example of what to write. I originally considered adding the prompts as text that would be cleared as the user began to write their own response, but this would later be scrapped due to accessibility reasons.
While onboarding would be helpful in demonstrating how the forms are used for a new user, it wouldn't be helpful for users who had been using the app for the many years that they would presumably be at a company for, so I later decided to add an additional side drawer with scenario-based sample responses that users could refer back to. This would also benefit neurodivergent people and people who speak multiple languages, as it would give them a set of 'scripts' and an understanding of the kinds of expected responses for a given workplace setting.
FIRST PROTOTYPE
The initial final prototype was built in Adobe XD, as I had access to the software at the time, though in hindsight this was a poor decision due to the inflexibility of Adobe software and files.
The design drew on multiple colours to distinguish each 'section' of the app from the others, though the activity tracking section was considered part of the profile.
This was the final result of my original project at the beginning of my studies as a user experience designer, and unfortunately the structure of the curriculum meant that I was unable to conduct further testing or iterations on this design at that point in time.
REBUILDING THE PROTOTYPE IN FIGMA
Upon revisiting the project a few years later and with a lot more experience in design and usability testing I wanted to give this project a second attempt, to employ all the knowledge I had learned within that time, including the use of 8pt design grids and how to conduct independent research so that I could continue developing my usability testing skills as well.
Drawing on the Segment UI Kit by SET Product as a guideline for the style, I began fleshing out the concept in full. Here is where I challenged myself to develop a consistent workflow and style, though it soon became clear that even with the support of a UI Kit, this was still a rather large undertaking for one person. It's here that I could really feel the impact of a lack of a team to work with and was really missing that collaborative component.
My intent at this stage is to begin to construct a working prototype that could be interacted with for testing purposes. At this stage I am aware of some inconsistencies in the features, but rather than overwhelming myself trying to find and fix them all on my own, I am choosing to leave them in this draft because I am curious to see what user testing responses will be. Will the user testing participants pick up on the same issues I am seeing? Or will there be more critical problems within this user journey that I have not thought of? This is the meta-question I am most eager to address with user testing going forward.
Due to COVID-19 I am unfortunately unable to continue user-testing and development for the foreseeable future, however I am looking forward to continuing work on this case study in the future.
LESSONS LEARNED
"Many times what we perceive as an error or failure is actually a gift. And eventually we find that lessons learned from that discouraging experience prove to be of great worth.”
- Richelle E. Goodrich
This was one of the first projects I completed during the course of my degree starting in 2018. At that stage I was not as well versed in experience design and testing as I am now - though I of course will always have a lot to learn. Upon revisiting this project to prepare it for display on my portfolio, I noticed a lot of flaws in the design that I simply didn't know how to pick up on back in 2018.
I wasn't happy with the outcome of the project at the time of completion because while the theoretical foundation was strong, the design was lacking. I knew it wasn't my best work even then, but I was even less happy with the outcome after reviewing it three years later. As such, I chose to rebuild the app to demonstrate all the knowledge and design experience I had obtained in those three years.
I learned a lot through the process of rebuilding the app, about what I should prioritise, and about how to streamline a design. I learned about how to identify redundancies in designs that don't benefit the user versus redundancies in navigation that benefit users with accessibility needs. Most importantly, I learned how to center the design itself around the way the user will interact with and navigate it, not the other way around. But in building this app, I also learned how vital working with a team can be to the success of a large scale project like an app design, and how much harder it can be to do from scratch without the input or critique of other team members.
While part of me wishes that this project could have come later in the course of my degree, to achieve better results with more knowledge from the start, I think it is perhaps more valuable to me like this, because it serves as an excellent example of how my design skills have developed through hard work and ongoing learning, and will continue to develop as I keep doing this work. I'm sure that in another three years I will reflect on and test this design again and discover even more ways to improve it.