Catchup — an all in one app to make well informed plans with your loved ones.
My pursuit of learning Interaction Design started in September 2016. Today, I reached a big milestone by completing Interaction Design Specialisation on Coursera by UC San Diego.
This exercise of making/doing things practically (as we go through in the course) instead of reading long articles and blogs was the better way to learn in my opinion.
It doesn’t take this much time to complete the course, but I had to put it on hold for some time due to Job schedules, also Course 7 (most incomplete part of the specialization) was like a boss fight that you must go through in a game to reach the next level.
Coming back to the topic, In the last course of specialisation I built a prototype of my application (a.k.a Capstone Project) following complete design process. So, this is how it started:
Brief: You are provided with three brief options related to Time, Change and Glance respectively:
Option 1: Redesign the way we experience or interact with time.
Option 2: Design an interface that facilitates personal or social behavior change.
Option 3: Find people and design a personal dashboard tailored to their needs.
My observation was around the design brief “Change”. I wanted to make the process of planning a getaway or get together with friends, family or loved ones easier.
Need finding: To start with, I began making plans with my friends and I was not surprised when it didn’t work out. So, interviewed some people, asked them to make dummy plans with their different friends few times with changing some constraints each time to see how they reacted. All this was in order to learn insights on what are the key things that are valuable while making plan. During this time, I came across many breakdowns and pain points which people go through while doing the chosen activity. I came across a friend who had a plan pending for more than few months, he shared his story and it also gave me many pointers on how making a big plan like “long holidays” is different from smaller plans like going to movies with some friends.
After collecting enough data on the activity, I was ready to jump to next phase which was Ideation.
Ideation included Brainstorming, POV & Inspiration board.
In this phase, you start coming up with opportunities for design innovation. First, putting all the ideas you have on paper without judgement and then later eliminate to most insightful opportunities. After this making a precise point of view of what the opportunity or problem is.
With the insights that I collected from the observations and the interviews, it became clear that people like to have freedom to choose and put their views forward in deciding the venue, time and other factors of the meet, instead of being implied for a particular venue. So, my POV was with good ways of presenting options where everyone can put their preferred choice forward and mutual decisions can be made faster and more sound.
Don’t reinvent the wheel, learn from what’s out there! In design, the world is your library.
Inspiration Board started from 5–10 words and then few inspirational designs that related to my design idea or point of view. Inspiration can be existing applications, artifacts, products, services, or anything that relates to your POV. (I already knew this method as I usually followed it during my job as a Designer. At first It was little confusing for me because I used to think if I look at other designs then my work will not be purely my idea. Later I learned it the hard way that if you design without inspiration it rarely produced great work and also this method helps in getting a sense of what is out there which is directly or indirectly related to your POV)
Now that a user need is identified, should we make the app & become the Silicon Valley giants?
Wait! Identifying a user need may mean that we need to design a solution to the problem, it doesn’t mean you should jump to development or even sketching the interface of the app.
First you need to see the scenarios your app might fit, the interactions that may involve using the app, when and where a user might feel the need of using your app & what a user can accomplish using your app. To do all this you need to do something called Storyboarding.
A storyboard is a comic-strip-like set of drawings about what your interface does and how it is used to accomplish tasks in a real usage scenario. For a storyboard including an app screen, the details of the screen are not relevant, but what those screens enable you to accomplish is.
Another thing to remember while storyboarding is you don’t need to be great at sketching to make a storyboard. Even Stick figure can be used to show a storyboard.
So here is my Storyboard:
After this we move to Paper Prototyping.
We need to make paper prototype that facilitates the scenario in the storyboard. So that’s what I did.
The first thing that we do while making plans with multiple friends is we try to use a communication medium where they all can converse. So, in this prototype, I start with the screen where the user has to set up the group and add friends to it.
Then after this the big question is “If they will be free when I am free” i.e., will our free time coincide?
This inspired me to make an interaction where all the users will be putting their availability in the app.
Now that we know when their free time is coinciding, how can my solution use this information in the best way possible.
What will make this solution stand out?
I came up with idea that my solution can give suggestions to the users in which they might be interested in. But how can we be sure that these suggestions are not useless. So, here comes the insight — this solution will have access to their social media account where they have their likes available.
and the solution will not just suggest the users for different activities or places, but users will be able to read information about that place.
Now going one step further, How can we make this interaction more useful. If users can compare these places without having to leave the app, that will be great.
While making these prototypes, a vivid image of how the process will follow in the application starts forming in the mind. The best thing about doing this is, it’s fun and if you come up with a better alternative later in the process you can always revise these prototypes, it doesn’t take more than few minutes.
Now that we have a little image of how our solution will work and solve problem, but to get a better perspective we need to see someone use this prototype (a.k.a In-Person Evaluation).
But even when we see someone use our prototype like a regular app, how will we put our findings into a meaningful problem. For this there are few principles or heuristics.
Heuristics are great at giving well defined face to a problem and organising the problems in such a way that they can be tackled in an efficient way.
Watching someone else using your prototype really gives important feedbacks that might include from small flow error to big Usability issues like a screen being completely redundant that you thought before as a good idea.
What I learned after going through this whole process is that I need to make only those elements which are paramount for that specific scenario. (This help in preventing the user from getting sidetracked while walking through your prototype)
So we further go down this long path of make, test and repeat.
Now comes
Low Fidelity Wireframes: it provides the main details about the layout of a screen and the information it holds but leaves out smaller details and styling.
Though I try to leave styling and smaller details but being a designer there is not much I can do to completely eliminate the urge to save them for later.
This wireframe of the homepage consists of the content which I initially thought is the most useful for a user who is using this app regularly.
After this, the real hustle starts. First, we make a comprehensive plan for the coming weeks. Then we need to make all the screens and again get it tested in person by more people.
During all this time it was important to revisit the brief (as many times as I can) and keep my point of view focused as well as updated and also check that I have not deflected in the path to my major goal for smaller features.
After getting the design updated and refined from what I learned by observing people while they were using my prototype, I moved further to AB Experiment.
In AB testing, I made two versions of the same design with slight difference in the element and decided to test and see which performs better. This test can be for placement of a button or colour of an element or a completely different screen.
I think this step’s result were like big revelations for me. When you see someone use your prototype, see how they are reacting to some screens you put usability in on priority and see major flaws in your prototype that were hidden for so long. After this iteration I think all the people who participated in my AB Experiment will be really happy with the interface.
Here is a video if you want to see how it works. (If you want to test it before that then you can find prototype link below)
Now I also want to see how other users might feel while using this prototype. Here is the link to the prototype. Let me know if you have any feedback on it. I am all ears.
Though the course has ended and it’s a great point that I have reached in learning interaction design (thanks to the course), but the designers are never satisfied.
“The way to enjoy life best is to wrap up one goal and start right on the next one. Don’t linger too long at the table of success, the only way to enjoy another meal is to get hungry.” — Jim Rohn
See you next time at the end of some other milestone. Later.
