Product Design
UI Design
UX Collaboration
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
As the UI designer, my role was to use the SS brand as a jumping off point to develop and implement a design system for the product interface.
I also collaborated with Tyler and Garett to solve UX problems during the design process to continually improve the functionality of the platform through more intuitive UI design.
Tyler Morian & Gareth McDonald – Development
Roberto Lucero – Identity Design
Madisen Fedo – UI Design
March 2021 – August 2021
Our challenge was to combine 3 distinctly different functionalities, which are usually accomplished in different platforms, into one easy to use product. These tasks included: sharing projects with clients, communicating back and forth on design iterations, and finalizing designs through bug tracking during development.
How to differentiate in a dense competitive landscape
A visual identity, marketing website, and initial prototype had already been created before I was brought onto the project. These elements served as jumping off points for my research and development of the platform design system.
Establishing a fresh, dynamic, and scalable design system
After I gained a better understanding of how similar platforms used color and typography, the next step I took was to develop a design system for SimpleStage. My goal was to stay true to the SimpleStage name by designing a UI with the following characteristics:
Design & Refine
Several flows were iterated on throughout the design and development phases. As we refined each screen/flow and found that certain aspects of the dashboard weren't clear or intuitive enough for the user, we'd work through different variations until we landed on a better solution. I’ve broken down the keys screens below that were substantially re-worked to walk through the biggest changes we made to improve both the UI and UX of the platform.
Designing a cohesive interface experience for a multi-faceted platform
The final design aims to reduce the friction typically experienced when working within multiple platforms to complete different tasks. By consolidating these tasks into one unified platform collaboration is easier, workflows are more efficient, and projects are more organized.
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!
Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
Setting a new standard for design projects and processes
Working on SimpleStage taught the team a lot about both UX and UI design. All of which helped to reshape our design processes at Motion Tactic for the better.
Design Systems are now an integral part of our initial design processes. Working on SimpleStage taught me how to develop a design system and why they're important to use on projects at any scale. These are the benefits I found when working with a design system & component library:
SimpleStage is set to launch in late 2021. After launching with an MVP, the team plans to begin user testing to further iterate on the product's design, features, and functionality.
View Case Study
View Case Study
