The making of an app
A long path in 8 steps.
9 months ago I started a challenging but rewarding specialization in Interaction Design on Coursera.
Week after week, I learned how to discover needs, convey my idea through storyboarding techniques, validate it with the help of more and more refined mockups and test a full functioning interactive prototype with real users.
This is the whole story…
Step 1 — Needfinding
Looking for ideas, I interviewed 3 students with rather busy lives.
I discovered that all three used online calendars but still had some problems in planning when to study and they all three were quite frustrated about how they managed their time.
I came up with the idea of a calendar-based app able to help busy student manage their time to study.
Step 2 — Storyboarding
This is one of several possibilities I sketched starting from my very vague idea.
It was a good way to give shape to my thoughts.
This is actually the one I decided to work on but, at that time, it was just a rough idea among others.
Storyboarding proved to be a useful technique and helped me focusing in a more coherent way on my ideas, as well as on the user’s needs and perspective.
In this case, I shaped the idea of a calendar-based app able to notify users when to study, based on personal preferences and previously scheduled activities.
Step 3 — Prototyping
Then, I tried to sketch something that could embody in a more tangible way my app.
This helped me pointing out the very basic elements of the pages and giving me a glimpse over possible usability fluxes.
After that, my humble paper prototype became something a bit less vague and more refined when it turned into a digital mockup.
I created a very simple one with PowerPoint, but it was effective enough to make me reflect over UI problems and elements disposition, since I really wanted this app to be simple, clean and very easy to use.
Step 4 — Heuristics
Before moving further on, my idea and its usage flux had to be tested with real users.
I used paper prototype to cover all sections.
I had two colleagues of mine testing the interface: whether it was clear or not and whether there were any pain points using it..
I got huge help from this phase. We all worked using Nielsen’s heuristics: I was able to get some extremely insightful feedback and, in return, I gave some help to my colleagues too (since they were also working on something similar).
Step 5 — A plan and a skeleton
After validating my idea and its basic interface, I was ready to work harder, heading to creating an interactive prototype.
Before doing so, however, I planned all the actions I had to cover in the next following weeks in order to have full control over my schedule.
After that, I was able to start working on my prototype on proto.io
proto.io is the perfect web applications to create fully functioning digital prototypes.
I worked hard on creating all pages and the correct transitions between all elements.
Once my prototype was ready and fully usable, I planned a face-to-face test with some real users.
Step 6 — Testing
I asked to some colleagues and friends to test my prototype.
I developed a protocol and I asked them to perform specific tasks using my digital interactive prototype.
They were also invited to comment out loud everything they were doing or expecting, giving voice to all their feelings such as frustration, happiness or or bewilderment.
This testing phase was eye-opening.
I discovered many aspects I was taking for granted: users could not fully understand how to use the app and they did not get that it was calendar-based.
As a result I worked on redesign, focusing on the login section.
Step 7 — A|B test
I made a copy of my prototype and I redesigned it following the feedback I got from users.
I was sure about some aspect, I had some doubts and hypothesis about others.
To solve my doubts, I ran an A|B test using the crowdsourcing platform usertesting.com.
I got answers to my questions and I also got extra feedback.
With all that, I was able to improve and embellish my app.
Step 8 — Fit and finishing
I spend some other couple of days creating a perfectly polished prototype.
Then, I tried to make a video to explain my project app: Easy Study Schedule, a a calendar-based app which help students with busy schedule get smarter notifications when they have some time they could/should dedicate to study sessions.
In case you are curious and willing to learn some more, here are all the details from this Coursera Specialization:
Interaction Design — University of California, San Diego.
https://www.coursera.org/specializations/interaction-design