Design Process Behind Relocatly App
New application to help people with relocation issues
Relocatly is a friendly app that offers the support people need when they have to deal with a relocation. Although this app can’t make the move pain-free, it can help streamline two scenarios, when people are moving from their home, and when they arrive at a new location. In this article, I share my experience of the design process from need findings to final release.
Needfinding
Last year, in the summer of 2017, I had some friends involved in the relocation process. One friend was moving to another country and another was changing houses in his city. This particular situation made me think about this case study: How can we make relocating easier and less stressful? Can technology help people change their behaviour to solve their relocation issues? To learn from people involved in the relocation process and find opportunities for improvements, I looked to research their needs. This study was performed with interviews focused on the participants perspective, allowing the individuals the opportunity to tell their stories in their own words. To ensure that the interviews were in accordance with the research question, the interviews were guided by open-ended questions about worries, wishes, and expectations.
The interviews and transversal analysis unveiled a broad range of worries and needs, which I grouped into four categories: packing and unpacking boxes, searching help from your friends, and finding things to do in the new area. These categories were combined into two scenarios: when people are moving from home and when people arrive at a new place. The findings indicated that there was a need for technology tools in order to simplify these four categories of relocation issues. I wanted to focus on these categories by creating an application.
Ideation
For the ideation of the application, I used the analysis of interviews to brainstorm opportunities for a design innovation. I created a list of 15 insightful potential starting points defined as ‘user goals’. For example: ‘when moving, people need to create an inventory-list for sorting out items while packing’, ‘after moving, people need to search for activities in the new place (theatre, hiking, exhibitions)’… My focus wasn’t really to find immediate solutions or features but to articulate opportunities.
At this point, I asked myself, what can I learn from existing applications? I found many sources of inspiration that deal with packing or finding activities from different perspectives, but nothing was related to the problematic and stressful relocation process. It was time to come up with different design ideas to address user needs.
Prototype
Before I could create an interface for my app, I illustrated my ideas with storyboards. A storyboard is a comic-strip used to accomplish tasks in a real usage scenario, and it should demonstrate who the user is, as well as the usage situation, and it should show what the user can accomplish with the interface of the new app.
I created two different storyboards with both scenarios: ‘moving from’ and ‘arrived at new place’ to fix at the beginning the goals of my application.
For connecting the storyboards with my ideas for user needs, I made a paper prototype, hand-drawn, which showed the elements of a user interface focused on the concepts. In this phase, it was important to show the interactions, how they work in a defined flow, and find out which pieces needed to be swapped around. I wanted to be familiar with how to conduct these walkthroughs of my prototype, missing pieces or dead ends, because my goal was to conduct in-person and online evaluations in the next step.
Heuristic evaluation
This part of the design process was extremely important. It was time to receive immediate feedback and identify as many potential problems as possible. I asked my friends to evaluate these early prototypes by tapping, scrolling, and swiping through them as in a real app. I recorded with a camera the interactions and thought processes and opinions as they went.
Afterwards, I watched the video recording and mapped the evaluator’s thoughts and opinions to different Nielsen’s heuristic violations, writing as many violations for each heuristic as found in the video, and adding severity ratings between 0 and 4.
Based on these heuristic evaluations, I had to improve my prototypes with a list of concrete changes. There were some critical usability problems and I needed a deep study to evaluate them, but at the end of this phase, I was ready to review the design brief.
Plan and skeleton
I created a plan for developing the interactive prototype of my application with all the tasks needed. I used Google Sheets to provide the detailed plan and summarise all the goals. Following atomic design as methodology for creating the design system, I started to plan all the basic building blocks like buttons, inputs, form labels, but also fonts and colour palettes. From atoms of my interface, I planned to combine atoms together creating molecules. For example combining a form label with input and button, I create a form.
Afterwards, I scheduled the first groups of molecules, called organisms, ready for the first screens of my application. At the end of my plan I scheduled the templates to start seeing the layout in action, when I wrote down all the screens of the interface I was ready to proceed with the most fun part from my side, the UX design things. Nothing better than something that gives a first visual impression of the application.
Prototype Design
Once I was done with the skeleton plan, I started to design this prototype with Sketch by Bohemian Coding. Although many designers like to start immediately with the design process using high fidelity wireframes, I started with a lo-fi concept. The main purpose was user testing, so I didn’t spend much time on details but on exploring the designs. Rather than be concerned about size of text or pixels, I wanted to find the best solution for usability trying different options without confusion.
Test prototype
Here comes the important part of the project, validating the design. I used UserTesting.com to solve many doubts about the navigation and to discover how the users interact with my screens. At first, I created two versions of my prototype to analyse the interaction or reactions to my A/B screens and waited for the videos from the participants of my tests.
One of the biggest problems I noticed after these tests was the navigation of the main screen. All of the testers had problems with the button in the bottom bar of version A of the prototype, so I decided to leave the button of version B. I also received useful suggestions that I implemented for the final release.
Relocatly Visual Design
Based on the results of my tests, I completed the changes making the prototype look very appealing. I finalised the design, optimising the interface and branding the functions. You can see more details about Relocatly’s design on my Behance.
Final Words
In this article I wanted to share the design process, and how things evolved for the Relocatly application. I tried to convey my design decisions, iterations and what I learned from users during this process.
Thanks for reading! Have any comments or feedbacks? Share your thoughts in the comments or contact me via LinkedIn or Behance.
