Happily
Happily is a global media production company that specializes in producing carbon zero experiences and livestream broadcasts with the largest, most diverse network of event specialists in the world.
I launched an intuitive and efficient interface that facilitates seamless interactions and effective information exchange between the admin team and their freelancers, fostering enhanced collaboration and user satisfaction when matching them with available event jobs.
UX/UI Designer
5 weeks
Facilitate efficient communication by implementing vital features that aid in prioritizing messages, ensuring that urgent and essential messages receive immediate attention.
Streamline the process of matching specialists with event jobs by providing a robust and user-friendly messaging system.
Designing specifically for mobile devices and the iOS platform
Because of time constraint, consider the target audience of the app, but focus designs on one of the key users
Without features for prioritizing messages, the Admin team may struggle to identify and respond to urgent or critical messages promptly
Resulted in delays and inefficiencies in their workflow
The current system restricts messaging to job-related contexts, which limits the Admin team's ability to communicate with specialists for various purposes
Lead to bottlenecks in the matching process
The filters and categories allows for the team to sort through the messages by specific events or clients
It's invaluable when monitoring essential performance metrics related to freelancer response times and engagement
Message templates provided a consistent and efficient way for the Admin team to communicate with specialists across various contexts, from job-related updates to general inquiries
Admin members can easily adapt pre-defined messages for different purposes
To ensure that the design process is user-centered, I directly engaged with the Admin team. This way I could gain insights into their needs, preferences, and pain points. This knowledge serves as the foundation for creating a messaging system tailored to their specific requirements.
Key Findings
Several key findings emerge from the research conducted with the Admin team regarding their current workflow and pain points in using the messaging system:
Event & Job Creation Challenges:
The Admin team faces difficulties when creating events and associated jobs due to the absence of search and sorting functionality in the dropdown menus. They need a more efficient way to locate and select events and jobs.
Template Usage:
Templates for messages are absent, which is a significant pain point for the Admin team. Templates would save time and improve productivity by allowing pre-set messages with the ability to customize while integrating with Hubspot.
Message Filtering & Sorting:
The Admin team finds it challenging to filter and sort messages efficiently. They need better labeling, filtering, and sorting options, including filtering by archived messages, unread messages, and sorting by date and alphabetically.
Message Tracking Limitations:
The current messaging system lacks comprehensive tracking capabilities, making it challenging for the Admin team to monitor their communication with specialists effectively. This includes the inability to see the initial message sent to specialists.
Increased Task Completion Time: A boost in efficiency by a decrease in the overall time it took for team members to search, message, interview, and hire for the matching of available event jobs.
Decreased Error Rates: Improved usability based on the frequency of errors or mistakes made within the messaging system, such as sending messages to the wrong recipients or misclassifying messages.
User satisfaction: Users, in this case, the Admin team, expressed satisfaction with the redesigned messaging system. Their feedback and input during the design process was reflected in the final product, leading to a positive user experience.
I went through multiple iterations for creative solutions, fostering innovation and ensuring that the final design is well-informed, user-centered, and optimized for its intended purpose.
First, I had it designed where all the recipients would be in a label that could be deleted at any time once you've applied all the filters for who you want to message, but this became a probably when it could be well over 20 freelancers a team member would be messaging and it would become extensive
To mitigate this problem it would only show the number count, but a 'cancel' button would take you back to the filters if you want to change the recipients or view them specifically
I also added in the ability to select from the pre-set templates in the new message modal to save time
Selecting Templates
I explored the option to view and select a template on the right hand side of the messaging platform
After adding in multiple templates, it seemed to take up a lot of space and the text was small to read
Ended up making the icons a plus instead of an accordion view, so when click the plus icon, the template text would automatically load into the message input
That way it was easy to read before sending off the message and if you wanted to delete it, it would be an easy undo
In designing the wireframes, they visualize the user interface, interactions, and message flows, serving as the foundation for a highly intuitive and efficient messaging platform.
When I first joined the team, there was no predefined design system in place, which presented both challenges and exciting possibilities. This evolving design system became an indispensable resource for our team, streamlining the design and development processes and accelerating project timelines. It also played a pivotal role in maintaining brand consistency across a range of digital assets, from the microsites' CMS for client events to the Happily software system.
Heading 1
H1: Open Sans, Bold, 32px
Heading 2
H2: Open Sans, Semibold, 24px
Body Text 1
B1: Open Sans, Semibold, 16px
Body Text 2
B1: Open Sans, Regular, 16px
Accent text 1
A1: Open Sans, Bold/Uppercase, 16px
Accent text 2
A2: Open Sans, Semibold, 14px
Primary
#002EAF
Primary
#4984C5
Primary
#3E88F5
Secondary
#D6E7FA
Secondary
#8E58A4
Secondary
#838383
iOS 390 x 844 : 8px layout grid, 4 column
24 px gutters & margins
desktop 1440 x 1024 : 12 column grid, 70px
To create accessibility in my designs, I prioritize inclusive features such as clear and concise content, well-structured layouts, color contrast, and readability.
Color Contrast
4.5 : 1 for text < 19px
Line Height
1.4 Em
After receiving direct feedback from the Admin team interacting with the system, I was able to iterate some more on the product as they identified some key usability issues. These design improvements ensure that the final product aligns with their needs and expectations.
An option for Freelancer's to include reason for declining
- A common question that comes up internally, was why a freelancer was declining job opportunities
Our team didn't want to keep bothering the same freelancers if they didn't see themselves fit for that particular role or that they had to interest participating anymore
- Adding in a feedback modal after declining a job role offer, will get more analytics to the team and also allow the freelancer to be heard if any complaints were to arise
- They always have to option to skip it too
Adding the ability to edit templates with variables
- Through the usability tests, the admin team members explained to me that it was a big hassle to keep bothering the dev team whenever they wanted to add a new template
- So created the ability to edit and add templates themselves in their account
- To do this, I needed to include variables that the dev team could integrate easily but still give the admin team members flexibility with certain dates and times that would be unclear until the near future of it
Monitoring & Metrics
Implement systems for monitoring key metrics, such as response times, message volume, and user satisfaction, to assess the impact of the redesigned system so that continuous improvement, along with a feedback loop can occur.
Promote the adoption of the new messaging system with the freelancers through targeted campaigns.
This will along them to access their portal more often for opportunities and track which jobs they are considering.