UX & UI

Iconography
I designed the Korbyt software icons to have their own look and feel—friendly and approachable. To achieve this feel, most edges of the icons are rounded and soft, and the outlined look is predominantly used, which makes them feel light and airy. I also created multiple versions of each icon—solid, outline, solid circle, outline circle and solid color in order to have the appropriate visibility and user experience as it related to hovering buttons, applying certain settings and also disabled buttons. Final format is svg.

Like Button
The "like" button I designed to be used in the KorbytGO application after a user likes a post in the news feed. Fun and flair was the goal!


Case Study: Korbyt Software—Campaign Experience and New Features
Below is a screenshot of the Korbyt campaign page prior to my UX and UI redesign.

Before redesign

As you can see above, there are options everywhere and it's confusing to know what to do first, what is required for proper functionality and what is optional. The goal was to give the user plenty of freedom, however, not so much freedom that it creates chaos or confusion about what to do.


Research
No user research was available for me to review at the time of redesign. Since I was a new user to the software, I took extensive notes on problems I had with this experience and also ideas on how to improve them. I also asked a few colleagues what their experiences and frustrations were about the campaigns page. Gathering the information that I could, while also researching competitive software experiences I was able to make a revised list of experience revisions and UI enhancements that would give Korbyt the edge in the industry.


Wireframe
I used Invision to build out the wireframe of the revised experience seen below. This is the final wireframe after meetings, input from colleagues, requirements and ideas that were expanded upon.

 

Final wireframe


Prototype and Mockup
I used Adobe XD to build out the wireframe from just a concept to something more substantial, a prototype, for our developers. Ideally I would not want to combine the prototype and mockup together, however I was only given a couple days to complete both, so I created the prototype and mockup as one in the same. Normally a prototype would show the wireframe in a usable way, while the mockup is reserved for UI design and details such as typefaces, coloring, hovering effects and other interactivity such as animation bézier curves. Below are short animated gif examples of the finalized experience.

Campaign Requirements
In the old experience, adding a new campaign required a title and start and end date. These settings could be found in the "metadata" (even though metadata is for information such as tags) section and not easily available to be seen and edited. In the new experience, the title, description, tags, and date settings are readily available to be seen and edited. Clicking "save" without setting any of the required elements will cause the sections to be highlighted, indicating to the user to fill them out (not seen in the gif, was completed in development).


Campaign Content and Media Library
In the new experience, the user can add new content, assign an audience, assign channels or schedule the content in any order they wish, but to make things easier to digest and understand, the navigation is set to show the suggested flow and order that the user would naturally take. First, assigning content they already have in mind for their campaign.


Assigning Campaign Audiences
Next, the user can choose the audience they have in mind for the content. They can either apply recently used and most used audiences from the draggable filter row or search by multiple metadata tags. Multi-select also makes it easy to quickly add audiences. The user is also given an indication of the total number of people that will be reached from all audiences combined with a smooth number counter transitional animation (not seen in gif, completed in development). Deleting audiences is a similar experience to adding audiences.


Choosing Channels to Deploy Content
Choosing channels would be the next likely step for a user to take. With an easy multi-select drag and drop feature (not seen in gif, completed in development), users can intuitively choose their channels, delete channels and apply their text and settings all at once.


Scheduling when Content Deploys
Content on the selected channels will deploy to the audiences on a schedule that either Korbyt learns through machine learning, or the user can customize their own schedule. The scheduler also has drag and drop functionality on the calendar. Colored dots indicate what channel is scheduled on what days with both monthly and weekly views available. The dots are flexible, able to be dragged and dropped anywhere on the calendar in both monthly and weekly views (not seen in gif, completed in development).


Final Thoughts
The updates for the campaign and audience user experiences for Korbyt went live on Friday, September 7. I will update this post with any user feedback I receive. Until then I'm excited to hear how the experience helps current users of Korbyt.