Ivana J. UX/UI designer - Customer Engagement Platform

Octopus

Platforms: Native web and mobile app (iOS & Android) for end users and partners
Years: 2016-2021
Role: Senior UX/UI designer
Tools & Software: Sketch, InVision, Jira

Industry: Customer engagement, social network, e-commerce, help desk

Project overview: As a part of the UX/UI design team, I played a significant role in the continuous improvement and feature development of a comprehensive platform designed to drive customer engagement and brand loyalty. This platform featured modular solutions, including customer engagement tools, social networking, e-commerce functionalities, and real-time communication. The modular architecture allowed for both independent and integrated operation within a complex system, and all modules were designed to be white-labeled, ensuring seamless brand integration for each client.

Key contributions:

• Enhanced user experience and interface: I was involved in redesigning and optimizing the user experience and interface for web and mobile applications, resulting in improved usability and user satisfaction.

• Visual design and brand implementation: Created custom illustrations and implemented white-labeled designs tailored to each client's brand identity, while maintaining a cohesive and scalable design system across all platforms.

• Cross-functional collaboration: Collaborated closely with cross-functional teams, including developers, product managers, and stakeholders, to ensure seamless integration of new features and modules, fostering a collaborative and efficient development process.

Through this project, I developed my skills in user-centered design and scalable systems. I learned how to create solutions that solve business problems and meet user needs.

Partner mobile application

My main focus was developing the partner side of the platform while ensuring that the end-user side reflected those changes. Both the partner and end-user experiences were implemented as native mobile apps for Android and iOS.

The login process

Including splash screen, login screen, typing,

error states, reset password,

and successfully completed screens.

Channels

Including channel preview, creation process,

edit process, empty states, filtering,

tooltips, error states, confirmations of actions,

use of modals, bottom sheets,

and successfully completed screens.

Engagements

Including lists, previews,

filtering, creation process,

edit process, empty states,

error states, confirmations of actions,

different statuses, and use of modals

Engagement creation

Including basic and advanced processes,

mandatory fields, use of radio buttons,

check boxes, date and time pickers,

dialogs, and tooltips.

Scan code

Business partners could use three different methods

to add engagement to customers: scan code, enter code,

or to display code directly to a customer at the point of sale.

This is the preview of the scan code process.

Chat

Inbox for different channels, channel selection,

with tabs for filtering conversations,

notifications for unanswered conversations,

use of bottom sheets, dialogs, and

screens for sharing images, adding engagements,

error states, different statuses in the inbox,

and a preview of items in chat.

Audio and video call

Our app had an integrated option for audio and video calls

if the business partner wanted those options.

I have covered different states from making the call,

incoming audio or video call,

call on hold, activating different options during a call,

and different views during a call.

Notifications

I have covered different types of notifications

for different system requirements.

Analytics

For easier business management,

we had a shorter view of analytics on our mobile apps.

My account

The partner side of the app had different roles,

An administrator could assign different roles

with different set of limitations

through the user management process.

Every user could update some of their information

in the "My account" section.

Partner registration and settings

Registration process for business users

Showing dialogs, cards usage with edge cases,

checkout process for packages and add-ons,

confirmation screens.

After initial registration,

users were able to edit information

in the partnership settings section.

First iteration of UI Design and User Experience

As the app evolved, we began redesigning the UI and enhancing usability through continuous testing and iteration, all while working within design sprints and collaborating closely with developers and PMs.