Our starting point: the existing home screen in an empty state.
UX Writing & Design
Zynk needed a better first-run experience for its app. I helped rework microcopy, empty states, and general UX for better onboarding.
UX Writer (& some UX design)
6 weeks.
Zynk is a better way to send files. It aims to do better than chat apps like WhatsApp by transferring files without compression. Photos, video, folders, or any file can be transferred quickly and securely.
As a small startup, Zynk was primarily designed and developed by a team of engineers. Our team of three UX writers joined to improve the first-run experience of the app.
This was a co-op student project through the UX Writing Academy.
Our team conducted small scale user testing. We learned that the existing first-run experience was confusing users.
Specifically, the home screen empty state was identified as a problem area. Users struggled to understand how to get started and what steps to take next. Where was the “send” button the copy called out? Should the user start by adding a contact, or by sending something? We observed users randomly clicking around, trying to guess what they should do next.
Our starting point: the existing home screen in an empty state.
We also had discussions with the founder of Zynk to better understand the organizational context and goals. I noticed the word “chats” was used throughout the app and wanted to understand why. Was there a particular strategy there? No, it transpired. The UX had been modelled heavily on chat apps, and the word “chats” had been picked up as a by-product. In these conversations, the founder confirmed that the vision was for Zynk to be known as a transfer app.
To round out our research, we looked at a variety of chat apps like WhatsApp, Signal, and Telegram to understand common patterns and user expectations.
Despite similarities to chat apps, the main goal of Zynk is reliable file transfer. Our approach was to centre this functionality in the app experience. To achieve this, we removed “chats” from the vernacular of the app. Words like “transfers” and “send” are used instead.
Additionally, we redesigned several screens that comprised the first run of the app: the home screen, the my devices screen, the contacts screen, and the empty chat screen. Our overall approach was to provide clear next steps for the user to take, while adhering to the brand voice (reliable, innovative, supportive). Since Zynk is a new and innovative app, we also looked for ways to highlight and explain Zynk’s features and how it works.
Finally, we looked at ways to make the first-run experience smoother, taking a step back and evaluating the overall UX.
Home Screen | Empty State
Improving the home empty state screen was crucially important. This is the first screen users see after sign up—their first real interaction with the app. It needed to be easy to understand and successfully get users started.
Before: Zynk home screen in an empty state.
_Empty_OptionA.png)
After: revised with new copy to guide users toward next steps.
The most important ingredient on this screen was the empty state copy. It needed to guide new users toward sending their first transfer, and teach them that they can send either to their contacts or to another device. I wrote copy that distilled down to these main functions, while also feeling fresh and helpful to be in line with the innovative, supportive brand voice.
Additionally, we stepped up and did some design work on this screen, since we didn’t have a designer to work with on this project. We made the send button bigger and easier to find, and changed the icon to something that more intuitively reads as “send” (previously, a new contact icon was being used). We also added a bottom nav bar to make room for labels, since the icons previously being used were not intuitive.
Contacts
We changed the way contacts are managed through the app. Contacts are a key component for driving the usefulness of the app. The whole point is sending files somewhere—for example, to a contact.
Getting contacts set up smoothly needed to be a priority. While researching, we learned that other chat apps ask users to sync their contacts during the sign up flow. Zynk, on the other hand, did this later, during the first run of the app, once users first clicked on the send/contact button. This was creating friction, presenting another step before users could send their first transfer.
To make the process smoother, we suggested a new screen for contact syncing. It would appear after sign up, before landing on the home screen for the first time. This way, users would be ready to go before they tried to send their first transfer.
Before: the Contact screen as it was seen during the first run, asking the user to sync contacts.
After: a new screen that appears at the end of the sign-up flow, before the user tries to use the app.
Of course, users can always skip contact syncing. This was addressed with an updated version of the empty contact list screen. A clear call to action for allowing contact syncing is included. To make this screen more useful, we also added “My Devices” to the contact list, reinforcing this as a sending option.
After: the updated empty contacts screen, with a clear call to action to sync contacts. "My Devices" is also included in the contacts list.
Once contacts have been synced, the import contacts call to action disappears. “My Devices” is always present.
After: the Contact screen once contacts have been imported.
My Devices Screen | Empty state
Device-to-device transfers is the other way the app can be used. Helping users connect their devices was also of key importance to user success.
The existing empty state copy on the My Devices screen was long and clunky. I rewrote the copy to be clearer and more succinct. Instruction about signing in with the same phone number was removed, since the log in flows guide users through that. I also used this screen as an opportunity to highlight that Zynk works on all platforms. Finally, we removed the bottom transfer bar from this screen, since there is no way to transfer from here without a connected device.
Before: the My Devices screen in an empty, with long, hard to parse copy.
After: with new empty state copy.
We also revised the My Devices screen after a device is connected. The reference to “chats” was removed. Instead “transfering” is highlighted. Further, the copy now clearly explains that a device needs to be selected before transferring is possible.
Before: the My Devices screen showing a connected device but no transfer history.
After: reference to "chats" is removed; transferring is highlighted.
New Chat Screen
During our discovery process, the client told us they wanted to be transparent about the way they manage transfers. Transfers are primarily peer-to-peer, but need to go through their server in some circumstances. Although they deemed it a low priority, they wondered if we could find an opportunity to communicate this.
When exploring the new chat screen, we realized that it was a good venue for sharing information about the product. We decided to use this blank real estate to communicate how Zynk transfers files to users.
Before: new chat with contact, featuring generic empty state copy.
After: with copy explaining how Zynk transfers files.