Antifragile UI/UX

Project overview

Antifragile UI/UX is a platform focused on showing screen recordings of how digital products adapt and respond to errors in a user's flow. I used React with Styled-Components for all my front-end development, Amazon S3 to serve all my images, Wista to host my videos, and Now to host the site. I have the project up on Github.

As a designer creating user interfaces and experiences I look for inspiration in a few great products. I always find myself recording these experiences and taking notes. Instead of having them sit in a folder somewhere collecting dust, I thought I would create a platform where I can document and share them with others.

Designing the video page

I started out with the meat of the product, the video page. I wanted something clear and simple. Here are a few designs I pulled inspiration from.

Inspiration-1

design inspiration-1

Inspiration-2

design inspiration-2

Inspiration-3

design inspiration-3

Inspiration-4

design inspiration-4

Inspiration-5

design inspiration-5

I wanted to display the video and content in a less "YouTube" manner. Which is typically the video on the right-hand side and an aside with content. Nothing wrong with that of course but since this is a personal project I wanted to experiment a bit more with the layout.

The final design allowed the video to take the full width of the screen with a certain height restriction and the content right underneath. The content is separated into two sections. On the left, the actual videos with two navigation icons. The navigation icons are there to let the user know there's more content. When a video is selected the link will go from a grey color to an activate bold purple color. On the right, all the corresponding emails a user receives.

Video page final design

Video page final design

Designing the home page

I wanted the home page to keep in line with the same mantra, simple & clean. I started off with cards showing the product's logo but I felt this took attention away from the content. It felt unnecessary.

Home page iteration-1

Home page iteration-1

Home page iteration-2

Home page iteration-2

The final design leaves room for additional content. It transitions into a card when hovered. Towards the top, I give a brief description of the project. Here I also wanted to break the mold a bit with the layout. I made the title big with a short description on the side. I looked at Schick Toikka - Merged Contours for layout inspirations.

Layout inspiration-1

Layout inspiration-1

Layout inspiration-2

Layout inspiration-2

Home page final design

Home page final design

Animations

I'm a fan of just the right amount of animations. In other words, not using animations just because we can. Instead, using animations because they enhance the user experience. I wanted the entire card section to stand out when a user hovered over it. So I added a transition into a card with a slight light purple drop shadow. When a user clicks on the card I wanted a smooth transition into the next page. For this I made the title transition with the user. You'll notice the title goes from it's original large font-size into a smaller font-size.

Title transition

When scaling the home page down to mobile the header title and content would crunch up next to each other. I wanted to keep the large title effect but still give the content room to breath. So, when on mobile, the title now shows up as a subtle backdrop. This helps bring the main content to the forefront.

Responsiveness

I wanted a way for the user to know which video they were viewing from the list. For this I added an active and disable state to each video link. When a video is active the user will see the link turn from a grey color to bold purple color. When a user hovers over the circle navigation it will slowly pop out with a drop shadow and filling the arrow icon with the active purple color. I gave the arrow icon for our text link buttons a subtle bounce effect. This way, when hovered, it indicates to the user another page will be opened.

Active links and navigation