App Design:
Goal Management
CLIENT
Supporti
​
ROLE
UX & UI Design
Product Management
Accessibility Watchdog
BACKGROUND
Supporti is a goal setting and accountability application that helps users focus on specific goals by narrowing large goals down into daily activities. Users are then paired together for 7-day accountability chat sessions while they track their Daily Activity.
PROJECT
Currently, users can see their goal-keeping data at the end of every session. There is no way to check between sessions and no way to keep track of multiple Goals or multiple Daily Actions. Though the client still isn’t certain that they want users to be tracking multiple Goals or Daily Actions during a single session, they want to to increase motivation for users to use the application and work on their goals.
​
Research shows that as individuals, seeing our progress can excite us to achieve our goals. To help motivate Supporti users, we decided to create a Goal Management Screen from which users can see their progress with their Goals and Daily Actions over time.
This project ended up having a full design as well as an “MVP” that could be pushed out faster, which limits users to having multiple Daily Actions rather than multiple Goals.
USER FLOW
To begin creating this section of the app, I diagrammed out some user flows. What would users need to do from this area? What would they see first? How granular would the information get? Would I reuse things that had already been built for other areas of the app?
​
I decided upon the following: the information would funnel into greater granularity, with the ability to add more Goals by reusing the Goal Setting Wizard that users see when they join the application for the first time.
INITIAL SKETCHES
For the first version of Manage My Goals, I sketched out a very simple set of screens:
TRACK MULTIPLE DAILY ACTIONS
After sharing these with the client, they decided it was important to enable people to track individual stats for Daily Actions. Since users were tracking multiple Daily Actions, it made sense to also allow users to add Daily Actions from this screen, and then to choose which action to focus on. I’d initially played around with the idea of starring the current action, but that doesn’t allow the user to make a different selection, so eventually I came up with having a checkbox to the left, which I then carried over to the first page of multiple Goals as well.
Utilizing the drop-down style I’d created for the Buddy Game Plan, these became my first wireframes:
Original Version
Final Version
Final version - Action Expanded
ADDING ELEMENTS
Not quite satisfied by the value provided by these screens, the client and I began brainstorming how different apps use progress to motivate users. After discussing several ideas, we landed on a calendar that showed progress over time because it is easily recognizable and digestible. As a bonus, it also allows for increased functionality in the future.
I played around a little with having a LOT of information immediately available on the calendar, but tabled it for the cleaner, simpler version. The version with more information tested as information overload - what was available wasn't needed and it made it confusing.
​
Around this time, I also updated the Goal/Stats tabs to be cleaner and brighter, as you can see in the section above as well. This was a purely aesthetic request from the client.
Calendar with too much information
Simple calendar
Initial Goal Management Screen Sketches
MVP
We also began discussing what could be pushed to development with the least change to current code. We decided to cut out the initial screen, since users aren’t currently able to select multiple Goals, and focus on building out a single Goal with multiple Daily Actions.
When adding new Daily Actions, users could be taken to the single pre-existing page for Daily Actions from the current Goal Creation flow. Yay for re-using existing pages!
After a few visual design tweaks, including an inactive state for changing Daily Actions while the user is currently in an Accountability Session, we decided on a final flow. Use the prototype to the left and see how it works!
TL;DR
The client wanted to increase the value of their app by allowing users to track progress on their Goals and build out a function to allow users to create multiple Goals rather than just a single one. I built out a series of screens, including a calendar, to enable this. Then, we cut off the first page and its function of allowing for multiple Goals in favor of a pared down version to push out to developers first.
This is currently in testing with users - I will update as more changes occur!