Recess, an Internal Communications App
The image above was taken from the Recess testing account. What you see is sample data and temporary copy for the page description.
While primarily an internal communications too, Recess also gathers information about company health and engagement by tracking responses and reactions to surveys, check-ins, and newsletters. This page shows current and past company health score at the top, and individual scores and rate of change from last 30 days in the table below.
The Project:
Recess is an ongoing project started in Fall 2019 to create an internal communication app to send newsletters, check-ins, and surveys to employees to increase communication and track employee engagement.
Project Roles: UX/UI Designer
Process:
We work on a two-week sprint cycle. The first week we choose a feature (or features) from the opportunity map. The opportunity map contains feedback from customers and stakeholder requests organized by the type of opportunity. Once we’ve chosen a feature to focus on, we brainstorm solutions, wireframe the best ideas, get feedback from the developers, iterate, and move to Figma for high-fidelity frames. After a final walk-through with the team, the developers initiate the sprint and start writing Jira tickets. Once coding is complete they publish the changes to the development server where we test and give feedback. After any fixes are made it’s published on the production server and given a final test.
Below are some examples from a recent sprint. The goal was to increase the ease of users being verified and added to the platform as well as speed up the initial invites and clarify messaging.
Here’s an example of an early wireframe done using Invision Freehand. I sketched the initial flow then sent it to my teammates for review. We then discussed during a live call and a few more iterations were made before moving to Figma for higher fidelity screens.
Below are some iterations in Figma. With the flow solidified in Freehand, I could now focus on email and screen design. I usually add variations of designs vertically while laying out the flow horizontally. I label each variation in the frame title so when discussing with teammates we can easily understand what is being referenced.
Below is the final flow in Figma. I’ve removed all but the final screens and made it very clear for the developers to follow. I’ve included three different states of the Invited Accepted screen on the right; the default state, the loading state, and the error state. I include notations in blue text for any notes to the developers. This is the flow that we walked through as a team during the sprint kick-off meeting to make sure the developers had everything they needed and there weren’t any remaining questions.
Here is a test email sent to me during the testing phase to make sure all features were working as expected. If anything doesn’t work right or any small design tweaks are needed, they are noted and fixed before publishing to the production server.
Next Steps:
Recess is up and steadily gaining new customers. As we get more users in the app we are working on refinements and improvements based on user interviews and testing. The next sprint entails creating an internal survey template builder and a few smaller clarity improvements such as adding the ability to edit RSS Feed titles and adding the “not-taken” percentage to the eNPS insights page.