Above is the prototype used for review and documentation. You can click through the prototype and at any point hit R to start over. No account is needed.

Earlier this year I was approached by Modern Logic to help with updating the design of their studio website. Aside from a general UX/UI redesign they wanted to add the ability to create a custom reel of their work to share. After hearing the pitch we immediately thought this was a cool idea that has never really been done before, so we jumped at the opportunity to collaborate with them on the feature. Once we determined the feature set we wanted for launch, we started working through the design process and ended up with what you see in the prototype above.

At the start of design we created variables, or design tokens, that are based on the brand color palette (img.1) and other assets provided by Modern Logic. From there we applied the tokens to the components needed for the Reel builder and navigational elements (img.2). We wanted to build design tokens into the workflow since Modern Logic expressed the desire to apply a similar visual langauage to other web sites under the Monstera brand. As the other sites start to spin up we can add the other brand specific colors to the Brand library so that they can be applied to the component library. making the process for both design and development a bit more streamlined.

Mobile on baording message for reel editor.

REF level design tokens created for Monstera Brand

SYS level design tokens used for Modern Logic website.

Creating Design Tokens allowed us to create a scalable system that could be updated as the brand evolves as well as add some customizable features such as light/dark mode toggle seen below.

Animated example of switching between dark and light mode.

Along the way we noticed that Figma was a bit limiting when it comes to prototyping so we created some examples that illustrate the intended behavior that could not be replicated with the out of the box prototyping features. Although slightly rough these examples served as a starting off point for development, and can be refined using the appropriate plugins and understanding the limitations.

Animated examples of what was created for the prototype and for dev handoff.

Once the Reel Creator was created we added some small animations and transitions to for a more dynamic experience. Part of the page loading process is to have a loading animation sequence that includes a logo animation (below) and a page transition. This would allow for all of the video assets to load in the background so that the viewer is not having to wait for all of the videos to load.

Micro animations used in page transitions and on boarding indicator.