FlowBuilder
A habit making app to encourage regular creative habits and make portfolio-ready projects through community feedback
ROLE
As the sole UI/UX designer, I researched and identified user needs, conducted interviews with the target audience, and built an interactive prototype, which I then used to conduct user testing.
OBJECTIVES
A high-fidelity interactive prototype of a habit making app design prompt app with social/community features such as posting, commenting, liking and saving.
CHALLENGES
There were many challenges when it came to the visual design of the app, and figuring out what features would both encourage healthy habits and keep users motivated. These were overcome through research and collaboration.
OUTCOMES
A high fidelity interactive prototype for an app, developed through feedback and iteration, focusing on a specific user flow: from their first time opening the app to creating their first post. Out of 3 users used for feedback, all 3 responded they would like to use this app and that it would improve their habits.
Overview
Often designers who are just getting into the industry do not have developed portfolios. This project aims to solve that problem by instilling good creative habits into the user through gamification and easy-to-access community feedback.
The target audience for this project was:
junior designers (<5 years of experience)
senior designers in industry (>5 years of experience)
Interviews & Research
At the time I was working on this project, many of my peers were junior designers who had just started out. Due to this I was able to explore the problem space to a great degree.
Through interviews I was able to define some of the main problems that caused stress among junior designers. I decided to target the problem of a lack of experience.
With the problem defined, I began searching for existing solutions to the problem. From results that came up, many of the solutions boiled down to “keep creating more”, so from there I broke the problem down further to “what to create” and encouraging iteration on the idea through real growth from feedback from experienced designers.
For the problem of “what to create” I found many services online that offered daily prompts to inspire designers to create, e.g., sharpen.design, DailyUI, among others. However, often these services alone did not offer any method of easy feedback.
References used to address the problem of "what to create"
For feedback, often designers posted in online forums such as Reddit and Facebook. However these forums often do not offer the option to hide one’s identity when posting unless a burner account is used, which can contribute to a fear of judgment in young designers.
While this is a fear all creatives must overcome, this project is more aimed at helping them develop creative habits and improve their portfolios.
At the same time, these forums never guaranteed that the poster would receive a response, with many posts often receiving too few to no feedback at all.
With this in mind my next step was to find similar services that offered effective means for receiving feedback and growing. From my previous experience I was aware of one such service: CodeWars. Although the service was geared towards learning programming languages, it’s community features were effective and translating them to a design context may prove effective too.
References used to address the problem of how to integrate community feedback effectively
Features, Feedback & Iteration
Based on my research, the very first features I planned were posting prototypes, images, and prompts, commenting on above posts, liking and saving posts, and searching for posts. At the same time, I wanted to focus on creating a single user flow to start with to get to user testing as soon as possible.
For this purpose I chose to focus on the flow of when the user first opens the app to creating their first post.
I started by making an info screen when the user first opens the app as this would be the simplest to achieve. This screen should inform the user exactly what to expect from the app, but not overwhelm them with all the features of the app yet. For this, I wrote a simple overview of the service split across three screens according to their content. I tested it by showing a general audience outside my target audience the screens and examining what buttons they pressed, any points of confusion, or anything that does not make sense.
The three info screens users will see when first opening the app
From there I made the Login and Signup screens as those were the next simplest to make. These screens were made in collaboration with Kowser Azim, one of my design mentors throughout this project. He has a masters in branding and logo design, and assisted in aligning the visuals with a consistent identity. Through his advice, the identity of the app was changed to three consistent shades of blue, which made it easier to clearly indicate buttons and important text throughout the app.
The background of the screen builds on the blue colors chosen as well as the “Builder” in the concept name. It is meant to represent a blueprint, and convey a sense of structure and add noise to the background to make it more interesting.
The screens also offer the option to browse prompts as a guest, allowing easy anonymity. At the same time, the Sign up screen hides this button to encourage the user to sign up more, although the option is still there, just hidden.
The log in and sign up pages for this app
The next screens made were the Home screen and the Post screen. The Home screen introduces many of the features of the app, including a pulsing post button (although this is not visible in the image), a streak feature to encourage at least weekly engagement, bookmarks for ease of access, and the user’s own recent posts, and comments received.
Through testing, the Home page saw many changes in terms of layout and content. The streak feature originally showed the weeks as a list, which often confused users so it was changed. The bookmarks were originally called “Pinned”, but were changed due to ambiguity.
The next screens made were the post screens. By default, the post button leads the user to post any work in progress or prototypes. These screens are simple as they only require the user to put in their post details and the prompts used/images/links.
The home page, and new post page for this app
The prompt search screen was next. The main changes made based on feedback on this screen were that the icons for the heart and the bookmark were changed to outlines so they could be filled in to show posts that the user themselves had already liked or saved. The posts themselves show only the summary of the greater contents of the prompt, which can be expanded on by clicking the post.
The expanded screen shows the full details of the prompt as put in by the poster. This screen also shows comments below the post that the user can refer to for other details or input from other users, if available.
The search page, and an expanded prompt page for this app
The last screen to be made was the Community page. This is the main page people are expected to go to find prompts to explore. This was validated through testing, where users were given the full prototype and tasked to go through it and create a post without any help or input from the moderator. For this screen, the like and save buttons are filled in on purpose to prevent users from liking posts without exploring them first.
This screen also introduces the feature “Prompt of the Day”. This was introduced as, during testing, when users were asked to select a prompt to use from a mock-up of the Prompts screen, they expressed difficulty in picking one. To aid their choice paralysis, the “Prompt of the Day” was introduced as a choice that would be framed as “better” and encourage users to take part in it.
This is done in the hope that, rather than getting choice paralysis and leaving the app with nothing, the user may instead choose to settle with a clearly “better” or “recommended” choice.
A mockup of the Community page in use