Legados — Interaction Design Capstone Project
In September 2015, I signed up for the Coursera’s Interaction Design Specialization by the University of California, San Diego. After completing all the courses, I am now sharing with the world the results of the Capstone Project in which all the skills learned were put into practice. On this post I will show how the design evolved over time, the process, and the features that make this solution unique.
Presenting Legados final Prototype:
Need Finding
For the final Capstone project I focused on the design brief of “Change”. This was given to us from three optional briefs. The mission was to Design an interface that facilitates personal or social behavior change. The first step of the process was to interview and observe different people. I focused on the following questions:
- How can technology help monitor personal growth?
- How can we plan or make resolutions to achieve goals or dreams in a more effective way?
- How can we recognize when change needs to occur and determine appropriate goals?
The main objective during need finding was observing what kind of methods people use to achieve and monitor their goals. During this step I asked three participants the following questions while observing them:
- How do you plan or make resolutions to achieve goals or dreams?
- Can you show me and walk me through some of the methods you currently use to monitor your success and growth?
- How do you keep track of the things you need to do to achieve your goals? Do you use any apps or electronic solutions?
- Which methods have been the most effective for you?
- What are the main obstacles or reasons you have when you don’t complete your goals?
The main breakdowns identified during the need finding process were as follow:
- Not staying motivated to be consistent and accomplish goals
- Loosing track of priorities
- Electronic solutions too scattered and complicated
- Tendency to plan goals related to career and work and forgetting about other important areas of life
Ideation and Inspiration
With the breakdowns and observation findings in hand it was now the time to brainstorm and generate as many ideas as possible as well as to find inspiration from existing solutions and other designs.
To start, I needed to define the opportunity area through a well stated point of view. The main challenge in this part of the process was to connect the user needs with insights that could lead to a good solution.
Point of View
A lack of vision leads to procrastination and lack of commitment, but achieving goals should be exciting, fun and driven by a mission statement
Inspiration Cloud
Inspiration Board
During the Inspiration step, I stumbled across a website named The Science of People. It contained a post about the Science of Goals. The method on this website provided solutions for the main breakdowns found during my observations. I decided to incorporate some of these ideas on the design.
Storyboards & Paper Prototypes
By creating storyboards I was able to see the big picture for two different solutions. A storyboard helps to clearly identify the user, the situation and the motivation for using a solution. Below are the two storyboards created based on the ideation and inspiration outcomes.
Paper Prototypes
Creating paper prototypes was an invaluable step that help me pictured the idea on a medium that was cheap and easy to throw away. I used construction paper to build a fake screen and some reusable components. This was useful at first but I quickly realized there were too many moving parts. Seeing other paper prototypes and examples from the class videos, I was able to get the paper prototypes simpler and easier to move around during testing.
In person tests and Heuristic Evaluations
With the paper prototypes in place, it was now time for early feedback and to conduct Heuristic Evaluations.
In Person Test
For this step I recorded two people while they interacted with the paper prototype. This was a fun and an eye opener experience. To conduct a test with a paper prototype, one has to switch the moving pieces as the user tells you the next action. I faced my first obstacle due to the many moving pieces I had created. This made me go back and redo parts of the prototype. I decided to create bigger and simpler components that could be easily switch as the users navigate through the app.
After the tests, my task was to review the videos and identify the usability heuristic violations that the users faced when they were stucked, had questions or didn’t know what to do.
The following are the 10 Usability Heuristics used for this evaluation:
This are the violations I recorded based on the feedback.
Online Heuristic Evaluations
The class provided us with an online system that helped us coordinate a google hangout with two other classmates. During the meeting we conducted heuristic evaluations on each others prototypes and collected the feedback to be used for changes. Below are some of the heuristic violations found by the other two people on the online test:
List of Top Heuristic Evaluation Violations from all Tests
I found the heuristics evaluations process very useful to identify consistency problems as well as major issues that could be overlooked due to deadlines and technical minded solutions. It is great to have a checklist of things to look at even before a line of code is in place. This is not a very good tool for finding domain specific issues with requirements implemented.
List of Changes based on Heuristic evaluations
- Divide main actions in 5 different and very clear sections:
- Tasks & Progress
- Self-Evaluation
- Priorities In life & Intentions
- Mission & Legacy
- Growth
2. Add instructions before each possible user task.
3. Add status of completed and pending task for the week or month.
4. Add the proper flow between main tasks.
- Add “Next” section button
First Version of Digital Prototype
To create the digital prototype I used two online tools that are free. To build the screens I used Gravit.io, and to connect the screens and make it interactive I used Marvel. Both are very easy to use and helped me to complete the task very efficiently considering that I am not a graphic designer. One of the advantages from these two tools was that I only needed a browser to get the work done.
User Testing
We were asked to do two types of testing for the digital prototype.
- In Person Testing
- Online Testing with A/B versions of one specific feature
In Person Tests
For the in person tests, a testing protocol had to be written so that each test was consistent.
Below are some of the comments recorded during testing:
Online Testing with A/B versions of one specific feature
I selected the call to action and chart on the main screen to be my subject under test for the A/B test. Below you can see the two versions:
For the online testing we were given credit to use UserTesting.com and set up four different online tests for the A/B versions. This was a great experience and at first I was not expecting the level of feedback I received. In addition, we were given a template that helped put the test in place in a matter of minutes. Once the tests were in place, I had four different videos ready to review, and in less than 2 hours. I was amazed at the speed and quality of the tests. I highly recommend this service for anyone that wants honest and quality feedback. I was able to realized that the quality of the questions affect the results and could generate incorrect feedback or user error that is not expected or would not happen during an in person test.
Here are some screenshots of the service:
Results
After reviewing each test, it was very clear that Version B did not solve the issues previously found. Version A had detailed steps of how to use the app and a message of the purpose of the app. Version A had a clear and short call to action and testers like that. Removing the instructions and changing the call to action made Version B testers be completely lost. At the same time, having the empty chart without instructions made it feel more cluttered.
Version A had too much writing and one tester didn’t feel good about that. She thought all the content at the top of the main screen will not be something people want to spend much time reading, but it also helped her understand what the app was about.
It was clear that the steps are helpful but only for first time users. It was also clear that the chart was confusing and a new concept had to be design for keeping track of self-evaluations over time. The main screen has also two sections that are useless and needed to be removed. None of the users interacted or had a need to use the main navigation at the bottom screens. The use of stock photography failed. In addition all testers confirmed that the app looked outdated.
I also received very honest and quality feedback from the rest of the app and not only the A/B feature. Below are the changes proposed after reviewing the tests.
This feedback was very valuable and helped me start from scratch and redesign the app in a much cleaner and simpler way. I realized I needed to use more common controls and short labels on call to actions, better colors and a new way to present data.
Conclusion
On this post I hope I was able to walk you through the interaction design process and how it evolved over time. This is the result of one year of hard work and many learning experiences that concluded on a 10 week capstone project.
I have come to realized that Human Centered Design is extremely valuable for the creation of solutions that are truly solving real needs. Starting from empathizing with the problems people are facing and going through an iterative process where those same users give you feedback, puts every solution at the hands of those that are benefiting the most. I have come to embraced and respect this process and hope to use the skills learned in the future.
