Case Study:
Toky
in this project
Product Design
Design Systems
Information Architecture
Webflow
SwiftUI
Prototyping
User testing
Toky is a fully online contact center that lets businesses get in touch with contacts via voice and messaging.
From learning SwiftUI to understanding the almost infinite paths a single call can take, working on projects in Toky not only required constant evolving of existing features, but also suggesting brand new ones, a task impossible to achieve without a deep understanding of its customers and the technical behind-the-scences.
product design:
understanding calls
Redesigning the Call Detail unit for Toky required a deep understanding of the anatomy of every call: every call event and how these events can be combined must be understood in order to communicate them to users in a clear, human way.
The result is a Call Events timeline (seen on the right above) that shows every bit of information about the call Toky records, without overwhelming users with a convoluted technical view. Every call event was also categorized, and colors assigned to each category help users associate each of the categories faster.
The portion of the map shown on the left represents about 20% of the entire call path, which ultimately did not only help for designing the Call units and other implementations as the one shown above, but was also useful for the Support team to understand and explain users what each event entails.
product design:
dashboard
The best way to show users this Call Detail unit was to locate it in a panel that lets users see the call in context.
The left portion of the screen shows the list of calls. Summary units with larger numbers provide not only a macro view of what can become a long list, but are also interactive: for example, clicking on the Inbound Calls unit will filter the list to show only those calls on the list below it.
The right portion of the screen acts as an inspector of whichever call is selected in the list on the left. This scrollable Call panel shows anything from basic information like the origin and destination of the call, a detailed timeline of all events that took place in the call, to even the type of audio device used to make it. Its subsections also act as scroll anchors, so users can jump to the notes made about this particular call in a quick way.
TOKY CHATS MOBILE APP: FEATURES
Toky needed a mobile app for its users to get in touch with contacts via WhatsApp and SMS. Additionally, the Toky Chats app needed to let more than one agent collaborate in chats with a single contact, and let agents get notified only during their working hours.
After tackling these two main features, I noticed that because of the nature of the conversations, the only information an agent usually had about a contact was a phone number. With this in mind, I decided a good way for the app to help agents tell contacts apart would be to visually distinguish them with automatically generated avatars, created with a random combination of an icon and a color (seen on the first screen on the image above).
Because the majority of users were on Android, this version of the app was first designed.
TOKY CHATS MOBILE APP: IOS
For the iOS version, I recreated all the screens directly on SwiftUI. This let me having more control over how spacing, text sizes, and even animations should be in their final, native context. SwiftUI also allowed for the dark and light modes of the screens to be designed simultaneously, and to design a widget view (seen on the fourth phone) to check on their chats without even launching the app.
TOKY CHATS MOBILE APp: Swiftui
The image above shows the code it takes to render this particular message item on the list on screen.
Going for SwiftUI on this project let me think of my design work even more as the system it really is: how each element combined with its restraints and rules result in something that not only looks, but also behaves as what I had in mind. Additionally, having all views done already in code is useful for the final implementation of the app on iOS.
TOKY CHATS MOBILE APp: video walkthrough
The videos above were captured from an iPhone running the build.
Case Study:
Toky
in this project
Product Design
Design Systems
Information Architecture
Webflow
SwiftUI
Prototyping
User testing
Toky is a fully online contact center that lets businesses get in touch with contacts via voice and messaging.
From learning SwiftUI to understanding the almost infinite paths a single call can take, working on projects in Toky not only required constant evolving of existing features, but also suggesting brand new ones, a task impossible to achieve without a deep understanding of its customers and the technical behind-the-scences.
product design:
understanding calls
Redesigning the Call Detail unit for Toky required a deep understanding of the anatomy of every call: every call event and how these events can be combined must be understood in order to communicate them to users in a clear, human way.
The result is a Call Events timeline (seen on the right above) that shows every bit of information about the call Toky records, without overwhelming users with a convoluted technical view. Every call event was also categorized, and colors assigned to each category help users associate each of the categories faster.
The portion of the map shown on the left represents about 20% of the entire call path, which ultimately did not only help for designing the Call units and other implementations as the one shown above, but was also useful for the Support team to understand and explain users what each event entails.
product design:
dashboard
The best way to show users this Call Detail unit was to locate it in a panel that lets users see the call in context.
The left portion of the screen shows the list of calls. Summary units with larger numbers provide not only a macro view of what can become a long list, but are also interactive: for example, clicking on the Inbound Calls unit will filter the list to show only those calls on the list below it.
The right portion of the screen acts as an inspector of whichever call is selected in the list on the left. This scrollable Call panel shows anything from basic information like the origin and destination of the call, a detailed timeline of all events that took place in the call, to even the type of audio device used to make it. Its subsections also act as scroll anchors, so users can jump to the notes made about this particular call in a quick way.
TOKY CHATS MOBILE APP: FEATURES
Toky needed a mobile app for its users to get in touch with contacts via WhatsApp and SMS. Additionally, the Toky Chats app needed to let more than one agent collaborate in chats with a single contact, and let agents get notified only during their working hours.
After tackling these two main features, I noticed that because of the nature of the conversations, the only information an agent usually had about a contact was a phone number. With this in mind, I decided a good way for the app to help agents tell contacts apart would be to visually distinguish them with automatically generated avatars, created with a random combination of an icon and a color (seen on the first screen on the image above).
Because the majority of users were on Android, this version of the app was first designed.
TOKY CHATS MOBILE APP: IOS
For the iOS version, I recreated all the screens directly on SwiftUI. This let me having more control over how spacing, text sizes, and even animations should be in their final, native context. SwiftUI also allowed for the dark and light modes of the screens to be designed simultaneously, and to design a widget view (seen on the fourth phone) to check on their chats without even launching the app.
TOKY CHATS MOBILE APp: Swiftui
The image above shows the code it takes to render this particular message item on the list on screen.
Going for SwiftUI on this project let me think of my design work even more as the system it really is: how each element combined with its restraints and rules result in something that not only looks, but also behaves as what I had in mind. Additionally, having all views done already in code is useful for the final implementation of the app on iOS.
TOKY CHATS MOBILE APp: video walkthrough
The videos above were captured from an iPhone running the build.
Case Study:
Toky
in this project
Product Design
Design Systems
Information Architecture
Webflow
SwiftUI
Prototyping
User testing
Toky is a fully online contact center that lets businesses get in touch with contacts via voice and messaging.
From learning SwiftUI to understanding the almost infinite paths a single call can take, working on projects in Toky not only required constant evolving of existing features, but also suggesting brand new ones, a task impossible to achieve without a deep understanding of its customers and the technical behind-the-scences.
product design:
understanding calls
Redesigning the Call Detail unit for Toky required a deep understanding of the anatomy of every call: every call event and how these events can be combined must be understood in order to communicate them to users in a clear, human way.
The result is a Call Events timeline (seen on the right above) that shows every bit of information about the call Toky records, without overwhelming users with a convoluted technical view. Every call event was also categorized, and colors assigned to each category help users associate each of the categories faster.
The portion of the map shown on the left represents about 20% of the entire call path, which ultimately did not only help for designing the Call units and other implementations as the one shown above, but was also useful for the Support team to understand and explain users what each event entails.
product design:
dashboard
The best way to show users this Call Detail unit was to locate it in a panel that lets users see the call in context.
The left portion of the screen shows the list of calls. Summary units with larger numbers provide not only a macro view of what can become a long list, but are also interactive: for example, clicking on the Inbound Calls unit will filter the list to show only those calls on the list below it.
The right portion of the screen acts as an inspector of whichever call is selected in the list on the left. This scrollable Call panel shows anything from basic information like the origin and destination of the call, a detailed timeline of all events that took place in the call, to even the type of audio device used to make it. Its subsections also act as scroll anchors, so users can jump to the notes made about this particular call in a quick way.
TOKY CHATS MOBILE APP: FEATURES
Toky needed a mobile app for its users to get in touch with contacts via WhatsApp and SMS. Additionally, the Toky Chats app needed to let more than one agent collaborate in chats with a single contact, and let agents get notified only during their working hours.
After tackling these two main features, I noticed that because of the nature of the conversations, the only information an agent usually had about a contact was a phone number. With this in mind, I decided a good way for the app to help agents tell contacts apart would be to visually distinguish them with automatically generated avatars, created with a random combination of an icon and a color (seen on the first screen on the image above).
Because the majority of users were on Android, this version of the app was first designed.
TOKY CHATS MOBILE APP: IOS
For the iOS version, I recreated all the screens directly on SwiftUI. This let me having more control over how spacing, text sizes, and even animations should be in their final, native context. SwiftUI also allowed for the dark and light modes of the screens to be designed simultaneously, and to design a widget view (seen on the fourth phone) to check on their chats without even launching the app.
TOKY CHATS MOBILE APp: Swiftui
The image above shows the code it takes to render this particular message item on the list on screen.
Going for SwiftUI on this project let me think of my design work even more as the system it really is: how each element combined with its restraints and rules result in something that not only looks, but also behaves as what I had in mind. Additionally, having all views done already in code is useful for the final implementation of the app on iOS.
TOKY CHATS MOBILE APp:
video walkthrough
The videos above were captured from an iPhone running the build.