Loop

OVERVIEW
Every single project that a company has, must reach a point where you want to turn intention into action. Making ideas a reality. This requires a tool that helps control and organize the team's collaborative efforts, creating a unified vision of goals.
‍
To achieve this, a platform called Loop was created to articulate these efforts and improve task management, considered as the central units of teamwork. Loop took the form of a mobile application adaptable to any operating system, with the intention of being able to be used by large teams.

ROLE

UX / UI Designer

Team

I was able to work on this project from start to finish as the only Product Designer from my team.

The team consisted of me as a UX Designer, a full stack developer and a product owner.

The goal of this product is to streamline the work of the company so our users were internal employees and we could perform several user tests quickly.

Metrics

The metrics we were going to use to know if the solution to the problem was successful are as follows:
  • Decrease ticket creation time
  • Onboarding time of new users
  • Decrease error rate
  • Empowering employees*

RESEARCH

One of the biggest challenges of Loop is that it is going to be used by different people with very diverse technological and  management backgrounds.  We had to present large amounts of information in a way that it was easy to understand for all users regardless of their technollogical skills. We were able to identify our target audience and arrange them on a matrix to understand  our users behavior, new opportunities and create the user personas.

RESEARCH

In order to fulfill the needs of our different sets of users, we needed to understand which information was crucial during the planning, assignment, management and evaluation of all the Tasks and Projects. This is a graphic of the core information inside the sections of Loop.

Design Process

For the creation of this project we used The Double Diamond design process. This process is really simple. It clearly shows the different stages and the following steps within it, each quadrant of the diamond represents a process of the project. The first diamond is about Discovery while the second one is about Design, this process should repeat until after many iterations you have a well defined product.
‍
We were a small team for this project so this simple Design process maked it easy for everyone to understand it. We researched the needs of the users, then we established the different sets of information within the App and with this information, and  we created a Task list of all the different screens and components.

SKETCHING & WIREFRAMES

We created user flows to determine the needs and tools that each one of our users would need, later low fidelity sketches were made in order to visualize which were the most important data and information within each one of these steps.
‍
In this process of Sketching, we started making paper sketches with the help of Post-its, this helped us to be able to iterate quickly. Once we had defined the concepts, the information and the user flow, we migrated to wireframes in order to test the usability with our target users. We also started to analyze the processes of other Apps that were solving similar problems to ours.
The process of Sketching User flow wireframes

Visualization of the information architecture

I built up the information architecture and held brainstorming workshops to be able to identify if all the user journeys were into account. This was our guideline for making the mobile prototypes, after this I started making the pixel perfect design.

User Testing

In order to test our Wireframes, we created the first interactive prototypes with the help of Origami and conducted several user test sessions. After having the results of those first user tests and making the necessary adjustments to the design and user flow, we decided to make a more realistic prototype where we could give our prototype swipe, drag, scroll, and different effects, and thus give our users a more realistic experience of what the final prototype would look like.
‍
In order to make these prototypes more real, we used the free Origami Software from Facebook. This software also gave us the possibility to record the complete interaction of the users with the prototype to be able to review it later, along with the questions of the questionnaire. This way we could polish the user flow and improve the design of Loop

HEURISTIC EVALUATION

After analyzing the webflow of all of our test subjects during this 12 tasks, I created the following table so I can more easily visualize which tasks were the easiest and which ones were tha hardest and needed more work in the flow, as well as in the design.

High fidelity prototypes

Thanks to the conclusions of User testing and heuristic evaluation we were able to improve some errors within the user flow. We went back to the design once again with which we were completely satisfied. The user testing with Origami was very valuable because we could understand the interaction between the user and the App.

Interface & Interaction Design

Once we had the screens with the final design and we had the design system and the design guide ready, we gave the programmers all this information along with the prototypes so they could perfectly understand the navigation between all the different sections and subsections of Loop.
‍
I worked closely with the development team to make sure everything would be programmed exactly the way I had created it. We also did some animations in Principle so that the programmers would know how to program those transitions.

Results

The biggest challenge of working on this project was the great amount of information we had to work with, also to be able to show all this information to a great variety of users in a simple and easy way to understand. Because every team and individual works differently, we also had to create tools that would give Loop users that flexibility to work. While we were finishing the project, several people within the company started using this software and saw an increase in their effectiveness, coordination and time management.
‍
I enjoyed working with different blocks of information such as Planners, Cards, Chat, Overviews and Budgets and I understood how all this information is interconnected with the other elements within a project.

Outcomes & learnings

We were able to deploy the MVP and the following iterations and this tool started to be used in the company to manage several of our projects.
  • The ticket creation time decreased by half*
  • Onboarding time reduced from 4 to 1 day
  • We could observe a decreased in errors by 20%**
  • Our employees felt more empowered**
* On average it took 2 days to a PM to create all tickets, with Loop it took them only 1 day
** This is just an estimation, we didn't thoroughly track this metric before
*** We got this metric by doing qualitative interviews to the employees after the release
My learning from this project is to better plan the deliverables for each iteration because without a roadmap you never finish making improvements and you can't start tracking metrics with real users.

Let's Connect

Reach out for any question, collaboration or just to say Hi!
Get in touch
2022 All rights reserved - Designed and developed by Enrique Hinzpeter