This eliminated the possibility for the user to interact with the expired invitation. It didn’t however provide them with any context for why the icons where gone, or let them know that the invitation was expired.
Cascade8
INTRODUCTION
As part of the design team, I am working closely with senior designers, developers, the marketing team, and the Product manager to improve the global user experience on the Archipel apps ecosystem through user research, data analytics, prototyping, interface design, motion videos, and more.
PARTIES INVOLVED
3 designers, 2 product managers, 5+ developers, and a marketing team.
MY ROLE
Prototyping, design, benchmarking solutions, optimization of key features.
TIMELINE
August 2021 - September 2022
Improving the Invitation Feature
PROBLEM STATEMENT
This issue aimed at improving the invitation feature encompassed several smaller problems which gave me the opportunity to become more familiar with this component, learn how it works, how users interact with it, and how it could be further optimised.
BREAKDOWN OF THE PROBLEM
Jump to prototype
⌛ Interactions with expired events
Users tend to accept the invitations without paying attention to the date of event. That leads to the situations when they accept the events that already passed.
🔄 Users cannot change their invitation answer
Buyers' acceptance/refusal to a screening or meeting shouldn't be definitive. They should be able to modify their answer.
🔔 Repeated notifications
Due to the structure of invitations, the same notification appears in several categories, possibly confusing for the user and cluttering the invitations dashboard.
Making invitations clearer to the user
Initially, users could still interact with invitations for events that had already passed by either accepting or declining it. This would in turn notify the person who sent the invite, causing unnecessary confusion for both parties.
PROPOSED SOLUTION
To face this first problem, I came up with three potential solutions.
1. Remove icons for expired events
2. Disable icons for expired events
The icons are still visible but appear as disabled. Again, still lacks context for the user.
3. Replace icons with a descriptive tag
Reusing a pre-existing “tag” component that comes to replace the icons, and inform the user on the status of the notification. This became the chosen solution.
The second problem was that invitations would appear several times in different categories. For example, if they had been sent on a day that had already passed, they would appear in both “Monday”, and “Last Week”.
PROPOSED SOLUTION
I suggested and designed the wireframes for a new structure, that would be presented as Today; Earlier; Passed Invitations.
This prevents invitations from appearing in two places at the same time, and also comes to support the “expired notification” description tab I talked about above, by allowing passed event related invitations to automatically be sorted into that appropriate category.
Allow users to change their mind
Users were able to accept or deny an invitation, but once that choice had been made they couldn’t change their input. In case a user changed their mind, or selected the wrong option by accident, this could turn out to be quite frustrating.
This issue required a lot of back and forth communication with the devs, which I go into more detail about further down.
PROPOSED SOLUTIONS
I first came up with a google meets style option, where the user can freely select “yes” or “no” with a toggle component. A component with that specific purpose already existed in the Angular material library which would have been the perfect use case.
Other options were to have the “accept” and “deny” icons always available (instead of disappearing once the user had selected one), have the user open a dropdown to then modify their choice, or go further into the user flow and directly into the event page they had been invited to, to modify their choice there.
One of the issues these proposals brought up however, were that as soon as we made this change of answer option available to the user, whenever they used it, it would send an extra notification to the event host, every time they changed their answer.
Because of this I had to make this new feature accessible if needed, yet not so easy or satisfying to use as a simple click of a button.
Taking all of the above into account, and having validated our work with the devs, the Lead UX designer and I decided to choose the dropdown style option.
This both allows for the user to change his/her mind, all whilst not making it too easy to change back and forth between accept/decline.
UI ADAPTATION
Once the wireframes were validated by the lead UX designer, devs, and product manager, I moved on to the UI phase. Using the design system and pre-established design guidelines, I built high fidelity mockups with the help of Figma’s auto-layout tool.
At this point, the mockups were ready to be shipped out to the developers to be integrated into the apps.
Access different collections
PROBLEM STATEMENT
When navigating to the FilmSeriesNFTs landing page, the Cascade8 collection was the only one available. When we would start having different NFT projects, it meant that they would all be mixed together in the same space. We wanted to be able to create different sections for each project.
BREAKDOWN OF THE PROBLEM
Jump to prototype
🔖 Lack of organisation
All future projects added to the collection will be mixed up together
Designing a new Collections page
I started this project of by performing a benchmark of other NFT platforms, collecting information and building a moodboard for inspiration. Some basic wireframes were also designed.
PROPOSED SOLUTION
Using the wireframes and angular material library as a reference to make sure every new component I design will be easy to implement for the devs, I built this high fidelity mockup. I also designed a mobile version, as well as an overlay menu for easy navigation.
Two new components were built and added to the FilmSeriesNFT design system.
This allows us to change our designs dynamically from a single place.
Enhancing the onboarding experience through callouts
PROBLEM STATEMENT
We needed an onboarding solution within the apps to do a better job of explaining important features to new and current users.
BREAKDOWN OF THE PROBLEM
Jump to prototype
📍 Onboarding new clients
We needed a way to onboard new clients and introduce them to important features.
🆕 Pointing out new features
Another reason for the callouts was to pin point new important updates to the web apps.
Benchmark & Wireframes
After some benchmarking, I started with some low fidelity prototypes for three different types of callouts; a standard box callout, that would be fixed to the right, lower hand side of the screen. It would have a content area for pngs, GIFs, and short videos, as well a a short text description and a button.
The second callout would be a more area specific callout, that points to new features directly. The third option, similar to the first, box type callout, would be built as a carousel.
Here we can see the two main types of callouts with a bit more context
ECOUNTERED PROBLEMS
After showing of the first wireframes to the rest of the team, we realized there would be a few issues. First of all, we had a chat bot positioned to the bottom right of the screen. To sovle this I changed the positioning of the callout to the left hand side of the screen instead. The more contextual callouts I created that would function as "pointers", would take the dev team too much ressources in terms of time as they were slightly more complicated to implement that the fixed position callouts, so we also dropped that specific design idea.
UI ADAPTATION
After a final meeting with the lead developer to determine if whether there were any further technical restrictions with my design or not, the wireframes were validated by the project manager and the rest of the design team, and I had the go-ahead to get started on some high fidelity prototypes.
Experiences through Illustration & Motion
PROBLEM STATEMENT
Sometimes the best way to convey a message is through videos and illustrations. I had the opportunity to work on some motion design videos as well as full background illustrations.
BREAKDOWN OF THE PROBLEM
Jump to prototype
📺 Landing page animations
We needed a way to onboard new clients and introduce them to important features.
🖼️ Animated and static illustrations
Illustrations needed to be reworked, as well as making new ones for page backgrounds and email templates.
Landing page animations
Once the Lead UI designer had drawn up a storyboard, I brought it to life on After effects, exported it and optimised it to make it as light as possible. After a few iterations, the videos were integrated into the landing page.
Animated & static illustrations
A new page was created one of the Archipel web apps and an animated background was necessary here to make the experience more pleasant for the user. The rocket illustrations were reworked to make them a little bit more dynamic and fun.
Email flow illustrations
There were for an email flow between clients. There were three types of emails depending on the flow so I drew up three separate illustrations.
