Collaborate across timezones and departments
All while wearing your favorite sweats.
Project TL;DR
Single page application for Datadog
A designer/developer collaborative effort creating an internal social network exclusively for Datadog, with continuing improvements in accessibility and Slack APIs.
Quick Look
• Digital Wireframing
• Prototyping in Figma
• Developer hand-off in Zeplin
• React front-end
• Ruby on Rails back-end
• Competitive Analysis
Client
Datadog is a monitoring and analytics service through a SaaS-based platform - with 30+ offices working and collaborating remotely around the world.
Solutions Engineers and Product Designers from Datadog provided research insights to kick off our MVP build.
Team
Katie Killary, UX Designer
Lia Kapanadze, Software Engineer
Jenny Piwonski, Front-End Developer
Role
I designed a full stack web application for Datadog employees during a five day sprint-style hackathon, in collaboration with designers and developers.
I was part of a team of four designers and developers where I was responsible for the development and visual design of the mobile web application.
I led the UI work, and produced all deliverables for presentation to the client following a 5 day mid-sprint style cycle.
The challenge
Datadog, with offices located around the world, prides itself on a collaborative work culture, with employees also working on side projects to continue to improve their tech skills.
Our team was tasked with building a platform with which Datadog employees can stay connected in their new work from home environment. Aligning with Datadog’s existing design system, we drew inspiration from The Office to add a fun twist to our solution.
How might we connect Datadog employees across the world…
… so that they can collaborate with others and cultivate a collaborative, inclusive environment amidst the COVID-19 pandemic?
Bridging the Gap
The Approach
As UX/UI Designer, I conducted user research and collaborated with our other UX Designer, working toward a mid-sprint specs hand-off using Zeplin integration with Figma.
The Software Engineer and Web Developer on our team built the application using React (front-end) and Ruby on Rails (back-end). Our team maintained daily stand-ups to align on product scope while designing and coding simultaneously.
During UX development, I considered visual affordances, intuitive user interface designs and micro-interactions whilst our UX designer ensured designs met accessibility requirements.
User Personas
Pam, Solutions Engineer
Share hobbies and network with more Datadog coworkers
A fun way to network within company
A safe, reliable way to share information
Dislikes Zoom burnouts
Toby, Technical Recruiter
Foster a community of mentorship and continual learning
Gain valuable employee feedback
Wants to make Datadog collaborations more fun and personalized
Wants to address Zoom burnouts from employees
overview + development
Journey Map
The user journey map we created shows that Datadog employees potentially will use the proposed social networking platform to personalize their profiles, connect remotely with others, and share hobbies/skills in order to collaborate on future projects.
Competitive Analysis
To determine features for the MVP, we identified key competitors with similar goals to design more efficiently and purposefully.
Breaking down features from direct competitors like Slack and Hive as well as comparators Facebook and Instagram provided clear, distinctive user paths that were included in the proposed platform design.
Feature comparison
An overview of competitor features showed that there were clear opportunities to answer user needs - implementing important features like Location, Memoboard, and Local Time were important for our proposed platform due to Datadog’s global employee reach spanning 20+ timezones.
These features took priority throughout ideation.
ideation
Working with our second designer, we created low and mid-fidelity wireframes implementing prioritized features [Location, Local Time, and Memoboard].
Solutions
Connect with Datadog worldwide - all while working from home.
use cases
⇢ Sign Up/Login
Authenticating user information for security - this answers user needs for safe sign in.
⇢ Personalization
The tag feature gives users option to personalize based on hobby or professional interests - users can network more easily through these.
Deployment
At the end of the 5 day sprint, demo deployment took place demonstrating full stack development on React and Ruby on Rails.
Our GitHub read me includes
140+ commits
User Authentication (Security)
Entity Relationship Diagram (ERD)
Code Showcase
Deployed on Surge/Heroku
Post-MVP Goals
Code
When users add interests - “tags” to personalize their interests on their profiles, our developers wrote code in the back-end that contains a many-to-many table array so users can click and search by these tags.
Our GitHub Readme demonstrates this (the interest being "Crocheting”) and was demoed during our remote presentation with Datadog in May 2020.
design
This prototype showcases our vision of the user journey through WUFPH, viewing colleague’s profiles and searching for collaborators by interest tags.
Usability testing conducted on the initial prototype showed that users liked the mix of career and personal interests, and overall enjoyed the friendliness of the application. But one user did not find the search function or know the context of the feature, asking “Is this for people, interests or posts?” We considered “Search WUFPH teams” (pictured below) to clarify functionality.
Adding more clarity with stronger UI affordances is the recommended next step for this prototype.
UI Improvements
woof makes it easy for Datadog colleagues to work and play
Developing a more fun, visual layout that drives woof’s goal home - we’re all connected, from anywhere.
Next Steps
⇢ Expand dashboard and onboarding
⇢ Improve primary navigation and utility
⇢ Improve UI and Graphics
⇢ Add weather and map APIs
⇢ Improve accessibility
⇢ Leverage accessible APIs
⇢ Conduct more user testing
⇢ Add aria-describedby labels to code to provide essential info
⇢ Improve UI and develop a coherent Design System with consistent voice
You made it!
Thanks for checking this out. Have questions? Break the ice.