User Interface Design | Branding



Come up with a "truly human," digital innovation that helps people realize their potential.


brainJoy was a desktop app that provides a solution for the treatment of mental health in America. 1 in 6.8 people experience mental health problems in the workplace and 2.7% of all sickness absence days can be attributed to mental health conditions. brainJoy was a tool designed with these statistics in mind and helped address them through the use of anonymous reports of mental health, mood tracking, and most importantly, an AI chatbot.

On November 10, 2017, I had the amazing opportunity to participate in Accenture's 24-hour Hackathon. Its theme was 'Truly Human', and the brief centered around creating a digital product that solved for at least one of the following:

Provided for individuals before the Hackathon. A more detailed version was given to each team.

Around 50 people were divided into teams with three to five members. Each team consisted of a combination of developers, creative designers, marketing specialists, and data analysts (optional). My team was made up of two creative designers (myself, another UI designer, and a UX designer), a marketing specialist, and a developer.

After a couple hours of debating what our theme and project would be, we came up with the idea of what would soon become brainJoy. We chose this topic and the 'Opportunity' theme because mental health is a large part of people's daily lives and tragedies can avoided if preventative measures are taken.

One of the main possible issues with a platform like this were concerns about privacy. People might be afraid to use the platform if they thought their information could be used against them. To solve for this, the platform wouldn't use identifiable user names. New employees would be given a link (to make it company specific) which they would put into the platform and be given a randomized name consisting of letters and/or numbers. Once given this, they would be able to input a password. Another way around this was having the reports generated by the platform from the manager view not consist of individual user names and instead be overall statistics. The only time personal information would be given out would be if a manager received a 'critical alert' about that person. A critical alert would be if someone were a danger to themselves or another person. To further ease the minds of users, reports would be handled by the brainJoy company instead of the individual company. This extra step is to eliminate any suspicion that the employee's company is getting their private information.

We decided our platform should be light, motivational, and comforting. The platform needed to be a comforting best friend that could be a sounding board. After a couple rounds of quickly executed style tiles, we decided on a cool palette with rounded iconography to meet our design needs. The other UI designer and I came up with a weather theme to define moods, images didn't seem appropriate because the platform could be addressing serious problems, and general icons didn't seem 'human' enough. Going along with the theme of 'thinking human,' we decided to name the AI Joy.

Our usesrs


Kevin Fredricks was the first user, he was a lower-level employee, maybe and associate. He has some mental health concerns pertaining to depression and stress. Tara Hall is in some type of administrative role, like a manager or director. She wants to make sure those under her are in good mental health.

Wireframes provided by the UX team.

Competitive ANalysis


I worked in a similar project, The Branch, while still at Designation. While fleshing out the aesthetics of brainJoy, I looked at the visual competitive analysis I did for The Branch since time was limited.

Based on our research, my team and I decided we needed to use bright and friendly colors in order to create and environment which encouraged users to connect with others. We also learned creative UI techniques to accomplish this, such as forgoing imagery and using icons instead.

  • 7Cups created a relaxing and cheerful feeling through a morning theme/aesthetic and illustrative imagery. There was some disconnect between color palettes due to the distinct difference in saturation. It also employed straightforward and easily understood icons.
  • Talkspace had a cool color palette that made the app seem more calming and approachable. Its bold use of color with minimal accents made it stand out more from the other competitors.
  • Pacifica's nature imagery made the app seem relaxing because of their dark and hazy overlay. It also had a modern feel due to its sharp corners, whitespace, and use of black sans serif type.
  •'s photography was haphazard because the photos are unrelated and differ greatly in content and stylization (all were bad stock photos). It had an outdated color scheme due to the desaturated orange and forest green. Also, the location and layout of the cards at the bottom of the screen make it feel overcrowded and unplanned.

Key Screens


While we did not end up placing, I am extremely proud of the work we accomplished in such a short amount of time. Each team was given three minutes to present. We were one of the only teams who had a mockup to show with their presentation, as well as a click-able prototype. The chat window was left empty because during our prototype walkthrough, we also showed an example of the chatbot our developer designed.

Manager dashboard

I wanted to create a screen with easily accessible tools in the nav and broken-down analytics that were easy to digest and showed important information at a glance.

Employee dashboard

On this screen, employees would have access to a mood tracker and goal tracker to help them monitor their mental health and progression.

Chat window with AI

This is what the chat bot, Joy, would look like. I was aiming for a fairly stripped-down aesthetic so users would be better able to focus on the conversation.

My reimagined screens


The following are the screens I would have designed had with more than 24 hours. The main difference between this iteration and the previous was the inclusion of more UI elements and the reconfiguration of existing elements.

Manager dashboard

I added a sidebar on the left to provide a more glanceable view of key stats and information. I also moved the 'Concerns' card to the top so it wouldn't be as easily overlooked.

Employee dashboard

This screen had the most changes. I added two more sections to the side nav, 'surveys' and 'calendar.' Additional elements added were the left side bar with overall stats, a calendar showing the employee's PTO (an expanded calendar can be found under the 'calendar' in the side nav), the daily journal, and a daily brain teaser. I added the calendar here so users would know if they have PTO or 'mental health' days coming up. The daily journal was included since the purpose of this app was to track mental health and many people find it helpful to write about their feelings. The daily brain teaser wasF added to provide a distraction if needed. This is not to say brainJoy wants to encourage users to be distracted at work, but rather to help cope with stress during lunch or while taking a break.

Chat window with AI

Not much was changed on this screen other than the addition of the new items in the side nav.

Other deliverables


As previously stated, my team was able to complete a prototype to go along with our presentation. However, this prototype showcases the new screens I created.

Final thoughts


This is a project I’d definitely like to flesh out further in the future although I’m really happy with where it is at the moment. At some point in the future, I will design screens for more of the side nav items. Another change would be to fully design the chat screen. All in all, I really enjoyed being a part of Hackathon and can't wait to do it again!