The Design Process Isn’t a Guessing Game
Building a product utilizing a user centric process to optimize usability.

Recommendation systems are algorithms built to be a step ahead of the user, providing content they might otherwise spend time searching for. But consider this, would you want to watch any of your recommended youtube videos a week from now?
Recommendation systems use data from recent search history, and other users history. Due to this, most recommendation algorithms feel shallow in their judgement because their source of data is always gathered recently. Meaning people’s dynamic interests make it hard for the algorithms to consistently suggest relevant content.
Recommendation systems have no way of knowing what content you are only watching temporarily and content you personally enjoy. The knowledge gap within these systems causes a lack of transparency in their operations and seems to be missing a humanizing factor; personal interaction.
You’d be more obliged to look at content recommended by a real person, would you not ?
Instead of relying on an algorithm to suggest content, what if we place recommendations in the hands of other users? Instead of blindly creating suggestions with algorithms, we make the power to suggest more efficient, natural, and personally connected.
What if we ditched computer algorithms? Making the experience and content truly user-centric.
Our intimate friend groups know our personalities, habits, and hobbies greater than any recent search history. Giving the entities of social networks the tools to recommend content efficiently creates a natural and dynamic environment. An environment in which content gets personal successfully.
Project Portr was a four month initiative between a group of three eager UX students to discover a humanistic solution for shallow recommendation systems. Using a user-centric process to optimize user experience and usability.
User Experience Based on Real Users
We used a theory in motivational psychology to model our UX framework after. To encourage usage, users need motivation to return. Portr is personal; internally felt. Naturally we began building the app around a theory that focuses on intrinsic motivation.
This is where self-determinism theory comes into play. Stating people need to fulfill three innate needs — relatedness, competence, and autonomy — to fuel optimal growth leading to self-motivation. Portr focuses on relatedness. Relatedness being the universal want to interact, be connected to, and experience caring for others.

Providing thoughtful suggestions for your intimate/close friends provides a sense of interaction, connection, and nurturing towards other users. In theory the app helps build optimal growth, motivating the user to return and repeat. Users who consistently return, increase the amount of recommendations/content and also create habitual behaviour.
Feeling good is addictive who would’ve thought?
After establishing a motivation model, We moved on to researching the potential users and social environments that we’d tailor the experience to. For starters we initiated a P.A.C.T — people, activity, context, technology — analysis. Asking the who, what, where, and when questions first to help us proceed with designing a natural user experience.

Having a P.A.C.T analysis established, We decided to create a few user personas in order to define potential users and their environments correctly. This would prove helpful for us when designing an interface and experience revolving around the correct end users.

- Liam is a 24 year old creative professional who enjoys spending his free time with his friends and colleagues. He uses Portr as a way to connect with friends and find new locations in the city.
- Lucy is a masters student and lifestyle blogger in her mid 20’s. She wants to expand her knowledge of new places around the city and find the best places to hangout with her friends, as well as places to go in the future for content on her blog.
- Nate is your average Dad and avid dad joke user, married and has 2 kids. He uses Portr with his wife for date night when they want some time away from their kids as well as uses it with their other friends for recommendations.
Just from these basic user personas we can extract features that might be important to implement. Liam might want a search/explore feature. Lucy might want a wish list feature for future locations to visit for her blog, and Nate might want a group feature for him and his wife.
However, we ran into a problem defining a specific end user when we realized Portr wouldn’t hold a niche demographic. While we tediously payed attention to defining those few basic demographics, we decided to design for the users social environments too. We were then able to anchor the design to a definable factor.
We created a survey — you can find it here — and performed 1 on 1 informal interviews with potential users to learn about their social habits and environments. This way we gathered both qualitative and quantitative data about how people behave in environments the app might be used in.
With the data from our research we created a system requirements chart. Using the MOSCOW method we sorted our chart into must have, should have , could have, and would have features. Using the MOSCOW method we were able to organize which features we would absolutely need and which ones we could ditch without loosing the essence of the product. Allowing us to design a minimal viable product without getting distracted with features low on the priority list.

Going With The Flow
During user interviews and surveys, we discovered the app’s nature of usage would occur in short bursts of activity throughout the day. Checking in and out within a small time frame would be how users predominately use Portr.
Using our list of features we narrowed the options down to a group that could support a fundamental version of our app — a minimal viable product. We then organized the must have features into an abstract app structure to help visualize the flow of navigation within Portr.
Inspired by the quick navigation within Uber, we created a user flow in which much of the functionality exists on the surface level of the app — the explore screen. Functions that users need at their finger tips all exist within one or two taps upon opening the app. Quick navigation promotes a positive mental model of the app when placed in a social setting. This develops a sense of transparency in usage. The app should appear to work naturally within the dynamic environment it’s user occupies. In short bursts of usage, the user shouldn’t have to think about navigation.

Before beginning to design lo-fidelity wireframes we put together a few user scenarios relative to the user personas. Designing for specific tasks the user will proceed through, helped direct us towards problems the user might face when using the app. Introducing the system of sending and accepting suggestions and/or invitations being one of them.

Knowing the issues of real tasks helped solve many navigational issues before user testing, saving a lot of time instead of relying on predictions.
After planning the various user flows essential to the app as a minimal viable product, we began to design descriptive lo-fi wireframes. We began to plan out proper heuristics between the features on each page/section. Using lo-fi we managed to rapidly design and describe proper feedback systems, proximity of features, and navigation for the app without getting caught up in styles and colour schematics.
User Interface Design
After a lot of iteration and alterations to the interface and navigation model, We split up as a group to explore different mood boards. Gathering UI elements, colour schemes, and interaction models, we each put together a mood board to showcase possible high fidelity looks and feels.
From there we regrouped to design the first iteration of the app’s interface. Below you can see some of the main aspects of the app.



The wide range of users meant our interface would need high contrast between the colour scheme and the typography as well as the elements. We decided to take a minimal approach using a lot of white complimented with black and hints of colour to highlight high priority elements and actions such as accepting a suggestion or invitation, and locations when exploring.
Happy User, Happy Life, Right?
The final iterations weren’t based on our biased predictions of hypothetical users. We held 3 sessions of user testing to pin point areas where real users ran into confusion or difficulty when using the app. We recorded, analyzed, and iterated from the data collected. Below you will see some changes made based on a user tap heat map, a snippet of the user analytics used.

I mentioned earlier that lo-fi descriptive wireframes helped us design for proper user experience heuristics such as interaction proximity, feedback loops, and navigation — saving time during user testing iteration. The resulting menu is a good example. As you can see the iteration after user testing (screen on far right) doesn’t change much expect for cutting a few interface details such as the map behind the user’s display picture.
Focusing on rapid iteration for user flow early on — without getting distracted with stylistic elements — helped us design a user friendly experience. Our participants confirmed a natural mental model.

User testing wasn’t all about confirming our design. It provided needed feedback in other sections.
Right from the start of user testing, there was trouble differentiating types of locations as well as which places were open and closed. Different sections like activity were also distracting users from the explore section.
Upon iteration we utilized the heat map data to make effective design decisions. Simplifying the map, creating custom iconography for different types of entertainment, food, etc., and constrained the other sections of the app in to the menu. It now made more sense to have a hamburger menu as well as simplified the app on load. Focusing the users attention on what’s important, exploring their local area.
Final Product
Upon finishing user testing analytics, we came up with a list of changes that’d help improve the user experience. Better promoting a natural mental model with design iteration according to the difficulties shown during user testing. Some iterations made were:
- Iconography to help fix location confusion
- Added feedback to friend selection when sending invites or reccomendations
- Element size / map optimization
- “Add to wishlist” button was integrated
- Optimized visibility of system status when completing actions regarding sending recommendations and/or invites
But there’s always room for improvement and this project was no exception.
Reflecting…
In retrospect there are aspects I would fix. Having the motivation model early could help build a business model for the app/product — something we failed to realize during the projects process. Therefore making this a real product may be difficult on startup.
Another shortcoming I believe the project had was our focus on the cartographic nature of Portr. The app is supposed to revolve around user’s social networks and bringing social media interaction into the major scope of the app would’ve created a stronger case for a buisiness model. Similar to a heavily monetized app like Facebook, twitter, or Instagram.
I decided to make a few revision screens of what this could look like — focusing more on the social media aspect.

UX wise we were successful and it showed in the user testing. Many details and fixes to the interface design consisted of minor comments. Throughout all our users who participated, tasks were completed almost instantly. Most sessions lasting under 10 minutes to perform most actions throughout the app. Making it safe to say we designed a successful mental model within the app, which was our goal.
In an age where AI design and complex computer algorithms are becoming evident with directing content. It’d be nice not to loose the touch of human interaction.
Thanks for reading friend ❤️

