Top
An image of a stylized logo of text that reads "Go.Milestone", in a green color, with a grey background. To the right of the image is a pink flower plant with a green plant rising out of the top.
An animated gif of several screens from the mobile app design, showing pages titled "Milestones", "Results", and "Milestone Roadmap". Each screen is moved through quickly in a short overview type approach.

Go.Milestone is an app to help people discover, plan for, and achieve their milestones. It helps people sort through school, careers, housing, finances, travel, and even custom personalized goals to be tailored to each user.

I worked on the project during my graduate studies at Brandeis University with a team where we worked through ten weeks of iterative progress through rigorous research, testing, and designing.

My Roles:

A light blue avatar icon of a person.
A black icon of a pencil crossed with a ruler.
A dark blue icon of a person's head in profile, with a white gear inside of the head.

Research

Interface Design

User Testing

Process:

1. Research

*Note: this project was initially titled "Life Milestone Planner", so some early artifacts will reflect that title.

Questionnaires and interviews were conducted to gain insights into the target population (18-35 year olds)
‍
Results showed that of participants surveyed, a significant amount of the population lacked consistent guidance in milestone / goal planning, and would utilize technology to aid them in this if something was available.

A circular pie chart graph that displays 86% in a dark blue and 14% in a dark orange. There is text above that reads "86% of participants "have at times felt frustrated when planning life goals"."
A circular pie chart graph that displays 83% in a dark blue and 17% in a light orange. There is text above that reads "83% of participants "do not currently have guidance for life goals and would use a life goal app"."

2. Artifact Creation

Triangulating user insights via a multi-method approach allowed us to make inferences about the technology straight from potential users and feel confident that the data wouldn't be missing anything or result in gaps. After the interviews and questionnaires were completed, we cleaned the data and aimed to turn it into artifacts that would further aid designing.

User Storyboards and Journey Maps facilitate empathy in the design team for users at every and any step in the design process.

An image of two design artifacts. Each one has a title atop of the graphic, with the first reading "Career Change" and the second "Owning a Home". Underneath the title are small digital sticky-notes that say various steps in a user story of a person using this tech to solve a need.
An image of three hand drawn designs of a user story. The designs are screens of the proposed experience.

3. Design, Test, Iterate

We first started with low fidelity hand-drawn wireframes; focusing on a minimum viable product in a Lean type workflow which allowed for a fast iterative process. Then some quick user testing sessions, then iterating on the designs and aligning them more to users needs; this refined the product in a sequential basis and moved closer to a fully realized design.

Hand drawn wireframes, each one specifically in a thumbnail - type fidelity level, with basic layout variations.

Interface design continued at various fidelity levels, with user testing ocurring throughout the versions.

An image of four paper wireframes. The leftmost one is a basic login screen, next is a screen that reads "Choose Your Milestones:" with a horizontal scrollable element that reads "Housing" with a house logo. The next to the right is a wireframe that displays results, such as "medical, military, transportation, and technology", and the final wireframe shows a set of boxes that are milestones that a depict small icons such as a graduation cap, a check mark, and a dollar sign.

With user feedback, designs were further iterated using wireflows and userflows to plan out the next versions

A wireflow; it is multiple drawn screens of the proposed experience. The purpose of this artifact is red colored lines that link up the experience and show how the user would move through screens.
A user flow; this image shows small bubble tasks that a user would take to get through the experience, such as "registering", "creating a profile", "inputting user preferences", "searching for milestone directions".
Wireframes in mid fidelity, showing the experience with onboarding / login screens, profile screens, user choosing milestone type screens, results, and finally a visual roadmap showing boxes of information that allows users to accomplish a goal.

User testing continued throughout and valuable user feedback further molded the designs until a higher fidelity version was complete that met user and stakeholder goals

A final high fidelity wireframe with the same designs as the middle fidelity but in a final iteration and more of the experience fleshed out.
Top