Every time a new year begins many people usually set goals for themselves to either accomplish by the year’s end or to positively impact their lives longterm. A common occurrence that people usually experience when setting these lofty goals is the drop off of actively pursuing these goals to the end (i.e. lack of motivation, accountability, etc.).
Goal Builder helps aid users in accomplishing their goals by allowing them to set, track and share their goals with a community that encourages the sharing of progress and success with others.
User research, User Interviews, Persona Creation, User Journey, Information Architecture, User App Flow, Wireframes, and
Adobe Illustrator CC (Wireframes), Marvel (Prototype)
Competitive Analysis & Research
Before even diving into the features and the overall UX for Goal Builder, I conducted a couple product competitive analyses to gain a better understanding of the goal setting apps already in the market:
After looking at the many goal setting tools and resources available to users, many of these apps were usually designed to function as checklists and task lists creation for users to set their goals. Many lacked a sense of
community within the app to share goals and goal progress with other users.
Based on the reseach found in the discovery period of the project two personas were developed, Catherine and Matthew. Designing for Catherine and Matthew helped in making informed design decisions as I had the end user always in mind.
Keeping Catherine and Matthew in mind, I mapped their user behavioral flow from setting personal goals to using a goal setting app. Understanding the users’ decision making and flow allowed me to brainstorm the necessary features and opportunities required for users to successfully navigate through Goal Builder.
Defining Content & Information Architecture
By analyzing Catherine’s and Matthew’s goal setting journey I was then able to narrow down the features via card sorting for the necessary features for Goal Builder to function. I then created a content taxonomy map, to give meaning to the defined features, and a site map to organize the pages, information, and navigation of the app.
Page Descriptions, Screen Levels & Wireframes
PAGE DESCRIPTIONS & Screen Levels
Page descriptions and screen level write ups were developed to provide clarification to what users will expect to interact with on certain screens of the app.
A progression of key screen wireframes. Iteration adjustments to the
wireframes were based on feedback received from user testing.
User Testing & Iteration
Users were given these key tasks to navigate through the app:
1. Add a goal.
2. Visit the Goal Builder Community page and visit the forum page.
3. Browse for some goal inspiration.
Testing my wireframes against key tasks with my prototype helped identify user frustrations to address how to improve the page designs. Here is some feedback and observations received from user testing:
Goal List Complete State
Even though the feature of marking the goal complete wasn’t featured in the prototype, users believed there should be a state that helps indicate that you have completed a goal.
1. When marking a goal as completed a light box type of screen would pop up to congratulate the user for completing a goal.
Search Result: Goal Add
When viewing search results in the Goal category, users wanted to immediately edit and add those goals to their goal list rather than just viewing the details of the goal.
1. Got rid of view in the goal category in search results and added a plus button so users can immediately add goals that appear in search results.
• Taking the time to empathize with users helps with understanding and identifying the context, emotions, goals, and motivations that affects a user’s interaction with a product. This is a core value that must be carried over throughout an entire project cycle from discovery to design iteration.
• Establishing a clear vision and mission statement helps ground a project and keeps focus on the development process of an app.