Fujie Design
Visual | UX | Experience
milestoneArtboard 2.png

Milestone | iOS app



Building sense of agency for Youth and Young Adults

milestoneArtboard 2.png

Project background

Milestone is an iOS app that focuses on enhancing the relationship between participants (youths at risk)and their case manager by facilitating goal-planning, appointment scheduling, direct messaging to Wraparound service providers. 

My role 

I volunteered with the team in the summer of 2017, then was hired as external contractor to develop MVP for future fund-raising. 

My responsibility was to act as sole-contributor of the service-provider user side of the mobile app and to collaborate with the team's in-house designer who was responsible for young-adult user side of the app. I was solely responsible for research, insight, wireframe and visual design.

I divided my 7-week contract into the following schedule:

  • Phase One - Week 1 and 2: Field research and user interview; 
  • Phase Two - Week 3-4: Insight writing, analyzing, affinitizing and user journey mapping; low-fidelity prototyping; 1st user testing;
  • Phase Three - Week 5-6: mid-fidelity clickable prototyping; 2nd user testing; reflecting; 
  • Phase Four - Week 7: Iterated mid-to-high fidelity clickable prototyping; 3rd user testing; preparation for presentation and deliverable.

Phase 1: Field research and user interview

This project was initially piloted by Artefact with research based off interviews of young adults who have experienced homelessness and difficult life situations. After accepting the proposal of Artefact's research, I concluded three main assumptions for further validation to be the foundation of this phase of development.

Open speech_insight areas.png

Assumptions from previous research:

  • Does having a sense of agency mean better actions and decisions for young adults?

  • What motivates and empowers the youth?

  • Does working with a service provider enhance the sense of agency ?


Primary research - Field Research:

Intercept interview - Week 1, 4 hours.

To verify assumptions from previous research, my teammate and I decided to visit a career fair hosted by youth assistance NGOs to meet with both service providers and young adults. Conducting intercept interview allowed us to obtain a wide sample of users in relatively short amount of time.

Intercept interview report card 3.jpg

Intercept interview report card

Summary of user interview categorized to analyze patterns of user behaviors.


User Behavior Study and Analysis as results of intercept interview (What have I learned)

Insight from field notes of intercept interview. To analyze patterns of behaviors about

Use and coverage of technology:

Almost 100% of interviewees have access to smart phones.

Motivation and inspiration:

Instant rewards and short-term goals are most appealing to majority of interviewees.

Attitude towards case management

Agreed that a positive-minded, patient and proactive service provider is the key in building trust and a  transparent relationship.

Entry of referral to service:

Referred by parents and school conselors.

Field Research_Pattern of behavior.png
Field Research_Pattern of behavior_CM.png

|User Journey Map

Reflected on interview notes, we mapped out flows of several user scenarios with quick ideation of screen for functionality.

Reflected on interview notes, we mapped out flows of several user scenarios with quick ideation of screen for functionality.


Phase two: Paper Prototype and 1st User Testing

Method and Process

We wrote test scripts with scenarios and gave testers tasks to complete. For example, we asked case manager to "create a new goal and assign it to a participant".  We asked our testers to verbalize their thoughts as they navigated through the paper prototypes. 

IMG_0857 (1).JPG
IMG_0861 (1).JPG

Result and feedback

Utilizing feedback grid, I organized user feedbacks from notes and recordings and arranged them into a squadron. Feedbacks are categorized into "worked"; "to change"; "questions" and "new ideas". This grid map showed priorities of the feedbacks that I could utilize, knowing which feedback could have more potential values to the solution. 

For "questions we still have", I carefully crafted them into small design tweaks and marked them out in the notes, so that I would pay extra attention to users' reaction during the next testing session.

feedback grid.png

Phase three: Wireframe, IA and wireframe testing

Starting from week 4, utilizing prioritized feedbacks, I started to iterate wireframes from paper prototype. I spent one week on translating paper prototype into mid-fidelity, clickable prototype, using Adobe XD. 


Clickable digital prototype and interview script

With the help of clickable prototype, our second user test was able to focus on completing given task according to pre-written scripts. I designed the scripts to assign certain tasks to users to complete.

You can view and play with this prototype here. 

Example script:

me: "Imagine you as a service provider, just received a notification from one of your participant, Ti'Anna. It's a request that needs your response both in words and in actions, as described in the request details. Please navigate and click around to respond. During the process, please be verbal about any thoughts, confusion, ideas and suggestions you have. If you get stucked, or simply don't see the suitable content on the screen, please point it out to our team member.



Phase four: Feedback, initial visual design and presentation

I approached visual design with several starting points.

Information Readability

I imagined a very busy service provider who has heavy case load with 20-25 participants. (maximum amount of participants allowed in most organizations, thus this could be considered as an "extreme case" for a "heavy user".

Started to address the most innovative part of the app.

Notification has become the core functionality of the app because it incorporated with participants' status, request for help, resource sharing and messaging between service providers and participants. Notification was a condensed portal that has access to every other functionalities, and will be referenced heavily from other interactions. Also, it plays a critical role in providing non-instant communication between the two types of users. How users utilize the notifications to get the most out of it, was both my core focus and the main body of the application.

Fun avatar for testers

This is the fun piece I'd like to add to determine the tone of a digital product. Conversations flow easier when people can put a face in front of the voice. Product speaks for itself better when it has some characteristics and personalities. I illustrated four avatars for two participants and two service providers. 

You can try the user flow of "answering participant's request" with the digital prototype here. 



Conclusion and stakeholder presentation

project Impact

  • How can Milestone deliver actual help to youth at risk?
  • How can future impact being measured?
  • What are potential metrics to evaluate a succeed user cycle?


impact map.jpg