Ideation, Product Design
V1: September 2021 - 3 days
V2: January 2022 - 1 week
Flowstate helps bridge the gap between ideation and prototyping by translating information architecture into workable layouts for designers to start iterating on.
Flowstate provides an intuitive interface that makes it simple to ensure that all the necessities for the user flow is met.
This application identifies the context and components of each screen and builds potential starting points for your designs.
NanoGiants provided the context and challenge for the UX section:
These requirements can be very broad in scope and difficult to breakdown into tangible flows and designs. Countless requirements can make it difficult to organize user flows in an effective and intuitive way.
However, when properly done, this provides clarity and vision to the project. It may be difficult to account for all the details within the requirements while making designs an intuitive experience. Flowstate aims to help map requirements to components in order to provide a foundation for all the necessary pieces that a designer will begin iterating on.
We conducted 3 interviews with designers currently working in the UX/UI industry to better understand the end-to-end process of designing and identify opportunities to capitalize on their needs and diminish the frustrations they experience.
We looked at the market to examine what the current solutions are:
Overflow.io allows users to build, manage, and design user flows from beginning to end. Overflow's integration with other software allows designers to seamlessly import screens into Overflow and have a prototype ready for user testing.
However, this still requires the screens to be built and connected with each other.
Lucidchart does a good job of providing an intuitive and easily accessible platform for their users to get started easily. It makes building and diagramming business processes easy and quick.
But, Lucidchart does not provide any prototyping opportunities, leaving users to find another software for those needs.
Figma is the industry standard and provides functionality throughout the entire design process. Figma supports the end-to-end design process and with plug-ins and extensions can perform many high-level functions easily.
But, Figma is not specialized for diagramming and prototyping like Overflow and Lucidchart.
We decided to develop Flowstate into a desktop app as it would provide the best opportunities to accomplish our goals. Flowstate needed to allow users a way to quickly reference requirements and keep track of their statuses. As well as, creating opportunities for designers to start mapping out their user flow with different layouts to chosoe from.
This version was created within the timespan of our hackathon. It established the look and feel of Flowstate but did not meet all the requirements that we strove to have for Flowstate. The application provided information about the user flow but wasn't helpful for keeping track of requirements.
Version 2 allowed me to come back to this project and really think about what problem Flowstate was solving and how to go about ensuring that the features are helpful for the users. I redesigned the user flow of the application to create a more streamlined process through:
Flowstate provides a minimal interface with only the necessities to allow designers to quickly reference requirements and build their user flow diagrams.
Flowstate helps designers during the ideation and iterating process by providing different layouts with the necessary components for each screen.
