Mobile view coming soon!
Please view this project on a screen larger than 1120px wide.
While watching live sports (or any live show), introducing live comments is a fun way to increase engagement and be social without having the viewer leave the program.
This concept was done using Figma and Origami Studios.
Live comments and watch parties are a way to increase user engagement and build a community
Live Comments
Users can comment, view comments, and “like” comments while watching the game.
Interaction
Concept
During football season, I’m glued to my fantasy football app, either checking my team or my opponent’s team page.
Typically I check live player stats, and whether they have the ball or not - and if they do, their field position. I like to know whether or not they have a chance to score.
This suspense elicits the emotion of playing fantasy football, so with that, I created an animation that would would trigger if a player happens to score fantasy points. The suspenseful emotion of wondering whether they will score - in my opinion - deserves a feeling of joy and success when they DO score.
This was a concept I did while learning ProtoPie.
Animation sequence signaling a player who just scored fantasy points during a live game
Fantasy Football Scoring Sequence Animation
Live stats tracking with a scoring sequence animation for when a player scores.
Micro-Animation
Concept
Some of our users of older demographic didn’t intuitively understand that the steppers below the carousel meant that viewers can swipe to see more options.
These are two separate solutions that were proposed to add that extra layer of education and clarity.
Exploring ways to educate the user that they can swipe horizontally to view more shows
NESN 360 Shows Carousel
Option A: Shows auto-swipe through the carousel to indicate all of the viewer’s options.
Option B: Quick animation that alerts users there is another show to the right, indicating that there are more cards. This occurs just once upon app launch.
Micro-Animation
For this concept, I focused on displaying the betting data in concise card layouts.
The challenge with numbers and data in tables is making them ‘fun’ or engaging to look at. This was my focus when creating this design since it is something that I think can be improved upon in many of the sports betting apps I’ve used.
Focusing on just including the most important pieces of the data also makes this more user friendly for newcomers or casual bettors.
In betting, a ‘-290’ means a team is favored to win, which I depicted in green. This color choice is associated with ‘good’ or ‘positive’, while red is typically associated with ‘bad’ or ‘negative’... this design choice helps the user quickly process which team is favored to win. A ‘-380’ means a team is REALLY favored to win.
Sports betting app with betting lines and odds
Sports Betting
Looking at sports betting data can be really overwhelming, but it doesn’t have to be!
Visual UI
Concept
Visual feedback is one of the most important aspects of creating a great user experience throughout a customer’s journey.
This concept was done completely in Figma.
The spinner after clicking ‘Place Order’ represents that the system is processing the order, while the success screen is a little more obvious. These two aspects make it super clear that the order was placed and leaves no doubt in the user’s mind.
Animation that gives users visual feedback confirming their order went through successfully
Payment Confirmation Animation
Users can swipe through saved payment options and then are given a confirmation animation after clicking the Place Order button.
Micro-Animation
Concept
This is an example of the next screen where the new feature is being used by the user.
First, the user will be shown a one-screen “onboarding” of how to use the new feature.
When apps introduce new features and functionality, I sometimes find that they fail to do a good job at educating the user about the new feature and how to use it.
This concept is introducing a fun way to educate the user on how they can move around within the photo to see more detail.
I believe this education and “mini onboard” to the user is super helpful in creating a better user experience, as well as increasing awareness.
Educating users how to use features
Onboarding New Feature Functionality
Micro-Animation
Concept
Thinking about how an AI assistant for chats can help recognize the words a person types to pull up a quick action to attach the latest file when a specific keyword is typed.
In this case, a resume.
This is an animation I put together that utilizes motion to attach the file to the chat bar in a fun and delightful way – but I also considered the file item in that it never leaves the user’s screen, so you can easily connect the action to the result.
Using AI to help users attach recognized files
AI-Attachment Assistant
Micro-Animation
Concept
I have a passion for creating micro-animations, so this page is dedicated to a handful of visual, interaction designs, and micro-animations that I have not created case studies for. You can see more on my Dribbble page.
Visual Interface, Prototypes, & Interaction Designs