Achieve

Goal Achievement through
a customizable Social Experience

Desktop PrototypeMobile Prototype

Summary

The world today can feel very fast-paced. It is easy for a person to lose track of themselves to them and get caught in the shuffle. I realized organization is the key and tasked myself with helping people stick to their goals. With an app for almost everything, why isn’t there accountability or goal-achievement apps that stand out?

The Problem

The problem for the individual is needing more time or motivation to complete a goal that they would like to achieve. People constantly set goals that can be achieved but need to be more focused.

The Solution

After conducting extensive research Achieve was born. The Achieve experience varies from user to user because of its variety of features. Some people require a social experience with support groups and a goalkeeper to stay on task. Others need a simple interface to keep track of their goals and statistics. Achieve is adaptable and focuses on each user’s needs.

Responsibilities

  • User Research
  • Competitive Analysis
  • Content Strategy
  • Wireframing & HiFi Mockups
  • Branding
  • User Testing
  • Web Development

Research and Analysis

I created a user survey asking the necessary questions to gain information about user experience with goal setting and achievement.
A sample of the questions asked were:
Motivation Poll
Sticking to goal graph
Interesting Discoveries:

User Interviews

After analyzing the survey results and seeing the diversity in answers, I decided to conduct interviews.
Some of the questions asked were:

User Personas

User Personas were created from the information gathered in the research conducted

Tim O.

The Busy Family Man
42 | Male | St. Paul, MN

“I feel like there’s a better way to motivate myself to hit my goals”

Goals:
  • Get back to the gym a few times a week
  • Quit smoking
  • To live a healthier life overall
Frustrations:
  • He doesn’t feel motivated to try
  • He doesn’t know where to start
  • The habit forming apps he’s tried are either too complicated or too time consuming

Kara F.

The Community Seeker
28 | Female | Winter Park, Fl

“I love being a part of a group of people that support eachother in a common goal”

Goals:
  • Find an online or in-person weight loss group to help her stick to her goals
  • Learn Spanish to communicate better with her clients
  • Keep track of her progress
Frustrations:
  • She might switch jobs in the future, and doesn’t want to have to start all over again
  • Apps she’s used in the past don’t have charts or graphs that show progress
  • She doesn’t know where to look

Nikki M

The Forgetful Artist
26 | Female | Philadelphia, PA

“I like to let my art speak for me, but I need to finish a project if I want to let it speak.”

Goals:
  • Complete her work without falling behind
  • Find a way to write her goals down, without losing it
  • Getting reminders about what she has to do
Frustrations:
  • She’s has personal assistants in the past, but she likes her space when she creates
  • She has tried post its, check lists, and even writing on her hands but still loses her lists

Competitive Analysis

Competitive analysis was conducted to research what goal achievement apps are currently in the market and why they aren’t as widely used. Opportunities for Achieve were discovered to be:

StickK

Analysis of SticK
Strengths:
  • Free
  • Monetary loss as a consequence
  • Option to have someone hold you accountable
  • Suggested goals
  • Can set check in frequency
  • Phone UI is decent
Weaknesses
  • Desktop UI is awkward
  • Wording is inconsistent, which can be confusing
  • No progress charts
  • Very bland
  • No positive reinforcement
Opportunities
  • Better UI
  • Editable goals
  • More consistency
  • Charts
Threats
  • More enticing apps
  • Apps with positive reinforcement
  • More in-depth apps
  • Better check-in abilities
  • People getting bored of the apps monotony

Lifetick

Analysis of Lifetick
Strengths:
  • Dashboard is east to read
  • SMART goal process
  • Can create sub-goals
  • Reports
Weaknesses
  • Desktop only
  • Free plan is limited
  • Visual design feels dated
  • No real feel of community
  • based on honor system
Opportunities
  • Mobile app
  • More free options
  • Better visual design
  • Better accountability
Threats
  • Free apps
  • Apps with mobile component
  • Might be more work than help
  • App with rewards or consequences

Habitica (formerly HabitRPG)

Analysis of Habitica
Strengths:
  • Gamification
  • Mobile App is easy to use and understand
  • Categories
  • Challenges to join
  • Points add up to rewards
  • Groups
Weaknesses
  • Very time consuming
  • Desktop version can feel overwhelming
  • Can spend real money instead of completing tasks
  • Easy to manipulate
  • No reports or stats
  • Some may not like the video game feel
Opportunities
  • less of a game feel, more of a goal completion feel
  • Take out monetary component
  • Better accountability
  • Simplify app
Threats
  • Those who don't like video games
  • Apps with better real life rewards
  • Cheating yourself by manipulating app
  • People losing interest
  • Less time consuming apps

High Priority User Stories

After gaining a better understanding of the user's needs and the strengths and weaknesses of the current market, user stories were conceived. The following list is items that were deemed high priority and used to create user flows:
As a new user I want to...
  • create an account, so I can use the app
  • set my first goal, so I can improve myself
  • find someone to hold me acconutable, so I can stay on track
As a returning user I want to...
  • log in with a user name and password, so I can access the app
  • set a new goal or habit, so I can improve myself
  • confirm information for someone else goal, so I can hold them accountable
As an admin I want to...
  • reset passwords, so users can log in
  • fix bugs, so the app functions properly
  • access user info, so I can make updates as needed

Wireframes and Content Strategy

Wireframe sketches were created to get the basic ideas and fundamentals on the project onto paper.
Homepage sketch
Homepage
Dashboard sketch
User Home
My next task was to produce the content that would fill in my sketches and help guide the user stories and flows I created. Sticking to goals and habits can be hard work, so I wanted to ensure the user experience was positive. This is where my first realization of brand characteristics came in. I liked the text to be conversational and light-hearted; too much rigidity would make it more work than help.
Once the sketches were complete, they were turned into Digital Wireframes. Digital Wireframes were created in 4 sizes: desktop, small screen, tablet, and mobile. My goal was to ensure the app felt native on each screen size and would not be a compromised experience.
Homepage wireframe
Desktop Homepage
Dashboard Wireframe
Desktop Dashboard
mobile home wireframe
Mobile Homepage
Mobile Dash Wireframe
Mobile Dashboard

Visual Branding

Visual Branding List
Mind Mapping
By discovering my brand characteristics, I created word lists and mind maps to assist in finding a brand name.

After several variations, I realized the name Achieve would be perfect. It was simple enough to convey the message of the user’s experience, achieving their goals. I continued the idea of playfulness and positivity through my logo sketches. After a few basic sketches, I sought inspiration to complete the brand feel.

Logo Sketches

With the basic sketches and word association in mind, a mood board was created to complete the character of our product. I gravitated towards bright, bold colors that felt on target with positivity. I also wanted to keep on brand with the idea of simplicity. With the name Achieve being so positive, I found images and designs that made me feel like there was something to gain.

Moodboard

After reviewing the mood board, the colors that stood out were mainly pastels of blue and yellow. These colors lined up with the idea of playfulness, but I wanted to have contrast to make CTA buttons and necessary information pop. I chose a darker purple which evokes the feeling of harmony and ambition, two words that complimented the characteristics of Achieve. The light gray would fill in nicely in areas that needed something different from a white background.

Colors

Pacifico was chosen for headlines because its rounded letters and handwriting-esque script feel conversational and playful. Open Sans was selected for the body, links, and other text. Its large variety of weights gives diversity to the text leading to a better hierarchy. It also was chosen because of its humanist detail and readability. This allows the user to scan information and creates a stress-free environment. Combining the two typefaces lets the user see the hierarchy clearly and make decisions rapidly.

Typography

When refining the logo, positivity, playfulness, and simplicity came back into play. I added an exclamation point to the name to give it more pop. This also gave some spark for logo variation. Ultimately I decided not to add the exclamation point but play with the letting in the word. I saw the opportunity to use the v as a checkmark, but I could not do that with the script typeface of Pacifico. Open Sans also didn’t feel right, so I looked back at other typefaces I had considered for Headlines. I found Fredoka One, which was my initial choice but was too close to OpenSans, leading to some layout confusion. Although it was not the right fit for my headline text, It was perfect for the logo. The brand has a rounded-edged feel, and the purple put into the checkmark completes the look.

Logo Iterations

Style Guide and Mockups

Style Guide
With all branding information near completion, a style guide was created for future reference. All rules, from logos and iconography to colors and typeface, were presented with key examples to give future designers the proper tools to succeed. In addition, principles and Achieve’s vision are detailed in front of the guide to inform the designer of the feel of the product.
Homepage wireframe
Hifi Homepage
Dashboard Wireframe
Dashboard Hifi
The style guide was used as the instrument to paint the details of the wireframe template. I shared my mockups with other designers to get their opinions and the initial flaws and correct the necessary information. I reflected on the original sketches when needed to find inspiration for prototype modifications. The desktop prototype was created first and used as a model for the other sizes. I ensured each version was a watered-down, bare-minimum adaptation and a fully-functional experience. My goal was for the user to feel as comfortable using the mobile app as the desktop.

User Testing and Prototypes

Usability tests were conducted to test both desktop and mobile prototypes. I included a few participants that said they were not “great with technology” to see how the average user might interact with the application. More edits were made based on tests and my observation of the experience. The vision of Achieve is to continuously evolve to the needs of the user. Never will a user HAVE to use certain features to get a whole feeling experience with the app.
Desktop PrototypeTablet PrototypeMobile Prototype
Dashboard Hifi
Version one
Dash Update
Version two with modified spacing, and adjusted color hierarchy
Dash Update
Version three with more color hierarchy as well as made adjustments to contrast
Version two of the dashboard modified the spacing between the three main elements of Targets, Check-ins, and Progress and better set the hierarchy of the check-in buttons. The recent community cards were changed to have a similar feel to others in the app. Version three focused on the progress bars and making them feel more complete. The light blue color can blend with the white background, especially if the user is color blind. I decided to make the gray of the bar a bit thicker to go around the blue, allowing progress to be visible to those with visual impairments.
Goals V1
Version one
Goals V2
Version two made similar modifications as the dashboard
The goals page was similarly modified to give the check circle more visual hierarchy than the x. The progress bar colors were reversed to show blue as progress, and the gray bar was again made thicker to help make it more visually compelling. Arrows were added next to Targets and Info to show that the element can be opened to reveal more information. An edit button was also added to allow users to edit their goals after creation.
Communities V1
Version one
Communities V2
Version two with easily readable categories
Categories on the Communities pages were modified to allow for an easier reading experience.
Modal 1
Version one
Modal 2
Version two with updated color scheme
The creation elements were modified to allow for a better visual hierarchy. Although the purple showed the passive tab can be clicked, it made the user feel that it was the active tab. The gray can be clicked while not drawing too much attention. A passive state was also given to the CTA buttons to show when the user could move on to the next step.
Mobile v1
Version one
Mobile V2
Version two with enlarged add button,
and updated spacing
After seeing a bit of hesitation during my mobile test from a few users, I enlarged the new button (+ on the button on the page) and gave more space around it to ensure it pops. I also changed the spacing of the tabs on the bottom bar. When I moved the add new button, it changed the bar's layout, making it feel inconsistent in spacing. I moved the tabs closer together and up a few pixels so that the curvature of the iPhone does not cut off any text. Finally, the Achieve logo was removed from the top and replaced with the page name. This gives the user a better understanding of where they are, and they will not need the redundancy of the logo.
Mobile Communities Page v2
Version one
Mobile Goals v2
Version two with updated text
and features
I decided to modify the closed-element layout. Initially, I had the end date, Goal keeper’s name, and how far the user is into the goal out of the total length of the plan. I left only the due date, which is the most critical information. The user can see if they are the keeper depending on the checkboxes on that goal. This also gave me space to put in a down arrow to represent more information that can be seen and an edit button for consistency with the Desktop and Tablet designs. I moved the info I took out and added it to the additional information section in case the user wants to see it.
Mobile Add
Version one
Mobile Add V2
Version two with updated spacing
and new button
Mobile Add v3
Version three with updated link text size
For version two, the "add" modal page was changed for mobile to update the new button size and the spacing of tabs with the rest of the pages. Version three modified the size of the links to make it feel less overwhelming. The larger size was easy to read but almost felt like individual letters instead of words.
Mobile Goal Creation
Version one
Mobile Goal Creation v2
Version two with updated CTA sizing
Mobile Call-to-action buttons were also modified to become more visually pleasing. However, the larger text size was too overwhelming and took away from other fields on the page.

Final Thoughts

While building Achieve, I realized it evolved into a better app than I initially anticipated. Throughout my research and interaction with users, I discovered that Achieve is a goal-seeking app and a social experience. What helps many people stick to their goals is the feeling of community or relatability; others need a bit of competition or someone there to help remind them to keep on task. Taking the better parts of social media and combining it with a person’s drive and determination to complete a goal will make Achieve successfully and the user.

The most critical aspect of Achieve is its flexibility. There have not been many successful goal achievement apps in the market because the creators have not been able to adapt the experience to the user. Achieve allows users to take advantage of the aspects they like without compromising the fulfilled experience.

Avoiding scope creep was a bit of a struggle at times, but when re-evaluating and remembering Pareto’s Principle helped streamline the project to be a success. All of the information I learned helped me become a better designer. The experience of allowing an idea to evolve past my thoughts into something greater will help mold my designs in the future. Allowing myself not to dictate the discovery, but letting the research and experience guide me, gave me a chance to produce a better app.
Back to top button