Designing a Company Directory — A UX Case Study
Continuing to hone my UX skills during COVID by participating in a Hackathon.
Two months into working from home due to COVID-19, I participated in my first hackaton from May 18–22, 2020. The hackathon was hosted by Datadog and General Assembly.
Datadog, a monitoring and analytics platform for developers, IT operations teams and business users in the cloud age, had discovered that since the company switched to remote work, their current “intranet” was not serving the personal and professional needs of its employees.
The objective of the hackathon was to create an internal tool that’s a hybrid between an employee directory and social network.
Users & Audience
The users of this tool that we developed would be the 1700+ employees of Datadog.
Roles & Responsibilities
For the hackathon, the participants were divided up into 8 teams of 4–5 people. My team consisted of 2 developers and 2 UX designers (me included). As luck would have it, or not, the other UX designer and I both happened to be stronger in the area of UX Research than UI design.
Scope & Constraints
The hackathon kicked off on Monday morning and our presentation was 5 days later, on Friday afternoon. Within the timeframe of 3.5–4 full work days, our teams had to:
- Conduct & Synthesize User Research
- Create a hi-fidelity mock up and prototype to hand off to our developers
- Code the front-end and back-end of our prototype
- Put together a slide deck and practice our presentation
- Present the outcome of our work to a panel of 8 judges from General Assembly and Datadog
Designing + Developing the Web App
Monday — UX Research
Immediately following the hackathon kickoff meeting, our team met on zoom to develop a plan of attack for this project. We agreed to use Monday.com to track our tasks and processes. Furthermore, we decided to have a daily standup each morning on zoom to ensure we were on track or identify any roadblocks.
My UX teammate and I jumped into developing a plan for how to quickly get some basic user research that would help drive our design process. Because we did not have access to Datadog employees, we put together a screener survey and sent it out to our network and found 4 users to interview on the topic of company directories, communication, and socializing with their co-workers.
Each user interview took about 30 minutes, which we transcribed using the app Otter, and quickly pulled out user quotes that we could use to develop our user persona, user journey map, and problem statement that would drive our design process. Luckily, we had a few good templates that we were able to use, in order to quickly put together each of our research deliverables.
Based on our user interviews, we developed the following persona for the hackathon.
User Journey Map
In order to get a better idea of how our web app could serve Sam’s needs, my UX teammate and I developed a Journey Map in order to pinpoint the areas of opportunity.
The the process of mapping out Sam’s experience working remotely on as a new employee for Datadog, we saw that our app could address Sam’s desire to:
- Find ways to connect with their co-workers on a more persona level
- Easily see what projects other people in the company are working on
- See, at a glance, when people are online and available to chat, since the ease of “walking by someone’s desk” is no longer an option when you’re working remotely.
In order to focus the design work that we would do together the next day, my UX teammate and I articulated a problem statement that would drive our design studio.
The problem statement we articulated was:
It’s difficult to stay connected with coworkers on a personal and professional level across a large organization with everyone working remote. Data Dog wants to find ways to cultivate their fun work environment and promote positivity during difficult times.
Sam was hired by Data Dog 2 weeks before COVID prompted the company to shift to remote work.
How might we help Sam easily connect with coworkers on a personal and professional level?
Tuesday — Design Studio + Prototyping
After a full day of research on Monday, my entire team came together on Tuesday morning to hold a design studio. We held the design studio together on zoom and used the simple tools of paper and pen to sketch out our ideas.
After doing a fun sketching warm up to get our creative juices flowing, we focused our design studio on sketching out what the homepage of our web app would look like.
By lunchtime we had a design we all agreed upon, and it was up to my UX partner and I to jump into Figma and get designing. Because of the tight timeline and need to handover a design to the frontend developer for coding ASAP, we decided to immediately work on a hi-fidelity mockup. Generally, I prefer to work in mid-fidelity first, but our timeline did not permit this.
As mentioned earlier, my comfort level lies in UX Research and creating wireframes, so immediately jumping into hi-fidelity, creating a color palette, choosing typography, and creating components, pushed my skills to the limit and showed me just how much more UI practice I need to do.
That said, by late Tuesday evening, my UX partner and I had a working prototype that we could test on Wednesday morning.
Wednesday — Usability Testing
Before we handed off the prototype to our front end developer teammate, we wanted to run a quick usability test to ensure that there weren’t any glaring usability issues.
Overall, our usability test was a success. 4 out of 4 users completed the task to find their project lead and check their profile with ease. Our users commented that they like how clean and simple the design was, and they liked how at the bottom of the page they could easily see where they fit into the organization.
Wednesday — Handoff
After running our usability test, my UX teammate and I handed off our design prototype using Figma to our teammate who would translate it into the web app. Because he was familiar with Figma, our teammate was able to easily go into our component library and grab the info he needed to style the web app.
Thursday — Slide Deck
With our design work complete, my UX teammate and I set to work on the slide deck for our presentation to the judges on Friday. In the meantime, developer teammates worked on translating our prototype into a working web app.
Friday — Practice and Presentation
With only 8 minutes to present our work, my team practiced on Friday morning in order to make sure that we could cover everything we needed to in the time allotted. After running through the presentation 4 times, and making sure that it was just under 8 minutes, we were ready to go.
We were the 7th presentation out of 8 back-to-back presentations. Knowing that the judges would likely be experience fatigue paying attention to nearly 6 identical presentations before ours, I did my best to find an engaging and fun way to kick off our presentation.
Outcomes & Lessons Learned
In the end our team came in 4th place out of 8, so while we didn’t win, having the experience working with a team of developers was worth much more than the prize to me.
If my team were to develop this product further, we would plan to:
- Focus on requirements of the persona, key problems and expectations to draft and refine user stories.
- Impact to architecture, security, scalability based on Product road map.
- Explore client integration opportunities.
- My Project Team => webhooks with Asana/JIRA
- Login and My Team => Oauth and webhooks with HRIS/IDP/Slack
Documentation and Community:
Share the project and get contributors! This is a common problem for lots of companies right now.