Angry Thoughts
Published in

Angry Thoughts

Unconventional websites: one final look at AV7

In the previous episode of Unconventional Websites, we explored some unique quirks of our new company website, how innovating on interaction can result in some interesting technical challenges, and how we ended up tackling them. Read all about it here!

That was, however, not the end! There are more challenges to explore, so call me Dora because we’re diving right in!

An emotional navigation system

The main feature of AV7 is how it responds to the emotional state that the user selects on the homepage, presenting different screens through branching paths. All of the multiple screens that belong to each emotion are managed through the main component that houses all the routes for those screens, any props that need to be handed down, and the overall emotion’s state variables.

I also implemented an intricate system that remembers the user’s progress and decisions while navigating the emotion tree in the browser’s local storage. This was done to present the user with the same step should they abandon the emotion before reaching the final steps. There are even some alternate versions of pages that are only accessible when returning to an emotion in this way. Furthermore, we made this saving of progress only activate if the user returned within 90 seconds from when he/she first selected the emotion. This is because most emotions last for an average of 90 seconds, at least according to some sources.

Disgusted — reminding people to breathe

One of the emotions given as an option to the user is Disgusted. Here, we presented a unique twist on the aforementioned navigation system. Upon selecting this emotion, the user is prompted to take a 60-second break to breathe and recompose him/herself before continuing the site’s navigation.

Here, we took a similar approach to the other emotions’ 90 seconds memory. The time that the user selects “Disgusted” gets stored in the browser’s local storage. There is a check very high in the website’s component hierarchy that is constantly evaluating if this value is set, and its purpose is to block further navigation within the site while the 60 seconds don’t run out. Within these 60-seconds, the user is constantly redirected to a page where there is a timer counting down and a custom animation made with GSAP, which functions as a breathing exercise.

When these 60 seconds are over, the user is finally presented with the rest of the emotion’s screens, or he/she can choose to leave the emotion through the menu.

Designs without scrolling

One particular element of AV7’s design is that most pages were made to fit all of the content into the screen without requiring scrolling. As you probably know, this defies the natural tendency of web pages to push content down when something doesn’t fit.

The decision to do so led to a few unique situations in which I had to take extra precautions in order to keep this from happening. It was especially challenging to try and keep the layout under control while trying to support the full range of device screen sizes. Some compromises were made in small screen sizes, where more leniency was applied to allow for vertical scrolling.

Custom grid dimensions

Our mockups were produced fitting content into a grid and, as pages were being developed respecting that grid, I started to notice a trend in which content was constantly ending up looking a lot different than in our mockups, and scrolling kept creeping into our pages. This is normal, of course, to some degree, but the results prompted me to investigate and make an effort to alleviate this situation.

Upon further inspection, I noticed that the percentage of screen width used in our mockups was bigger than what Bootstrap was allowing me to use on this unconventional website. That is why I made a custom container that envelops a Bootstrap fluid container. This made the difference I was hoping to see and was really useful in providing us more width for the content, preventing it from needing to flow down in a lot of situations, and keeping proportions more alike what was conceptualized in the mockups.

Final thoughts

I really loved getting involved with this project, its concept, and the final results. AV7 didn’t revolutionize the web with bleeding edge technology usage or groundbreaking UX/UI design, but it is a unique blend of conventional elements that give it its own unique identity.

Having sung its praises, there is also some shade to be thrown to this experience. Particularly because the overwhelming amount of 70+ pages made the production of this unconventional website a real grind, and it’s a shame because I believe that we could have invested that time into conceptualizing an interaction system with a lot more depth.

This time we’re truly done looking over this website’s unconventionalness. Thanks for reading, and don’t forget to:

Stay ANGRY!! 😡

Originally published at https://angry.ventures.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Angry Ventures

Angry Ventures

8 Followers

We're a venture studio made by awesome people who strive to help clients build outstanding tech and marketing products