Flow Collective

App design on Figma

What is Flow Collective?

Flow Collective is an app design, made on Figma. Flow Collective is an enrichment center that targets young adults. The main screens are home screen, program screen, your classes screen and booking screen. In this design I wanted to have a cozier look and also focus on the "Flow" theme. Using curve lines in the background as well as choosing a brown, cream color palette.

Planning

For this assignment, I first identified what the content of the app would be, the target users of the app and also identified when the app would be used. Afterwards, I looked for inspiration on the different elements I wanted to include such as the layout of the programs display and the navigation bar. I then created a sitemap to plan how each page interacts with each other and to identify key pages that needed to be designed. 

Wireframe

When wireframing, I got to play around with different layouts on the app before deciding on a final layout. I also considered what theme I wanted for the app. In this case, I wanted to really focus on the flow theme, which matches an arts enrichment center as it symbolizes expression and freedom. Thus, I added flowy lines in my design to show that aspect of it. I also made use of more curvy lines so that the design seems more playful instead of serious.

Mockup

In the mockup, I had to choose a color palette. I tried different colors but decided on a warm - brownish color palette as I felt that it matched Flow Collective's theme. The colors I chose were also to reflect the enrichment center's warmth and playfulness

Prototype

In the prototype, I linked all the pages together and made the application interactive. I decided to change the navigation bar on the bottom to have a gradient to add a smoother and more creative twist in the app. Some interactions I designed would be the horizontal scroll on the upcoming classes. The dropdowns in the booking form. I also designed the booking process until the end. This includes the popups for the payment information and the booking confirmation popup.