TRYANGLE
"Try another angle"
is a one-stop shop collaboration app for generating urban ideas by residents, councils and developers.
A digital canvas to foster public participation in city development for the community.
Role:
UX Strategist, UX Researcher,
UX Designer, UI Designer​
Duration:
8 weeks
Tools:
Figma, Adobe PS, Adobe AI
TRYANGLE is my capstone project done during a bootcamp at the BrainStation school.
The challenge was to find a digital solution for an existing problem and develop it end-to-end following the principles of UX Design.
PUBLIC PARTICIPATION IN URBAN DEVELOPMENT
THE PROBLEM
Being an architect passionate about urban design and city planning, I've investigated the limited opportunities for people to participate in shaping their neighbourhoods.
-
Public consultations lack participation due to distrust in the process, as residents believe developers and councils prioritize their interests.
-
Individuals can voice their concerns during the approval stages of planning applications, but unfortunately, they rarely receive any feedback or the timeline for responses.
-
The current bottom-up approach allows people to initiate urban development discussions, but these processes tend to be complex and unfamiliar to residents with numerous requirements that must be fulfilled before any meaningful engagement can take place.
-
I believe people are genuinely interested in contributing to the development of their cities, through a simple and engaging platform to express their opinions. I decided to investigate it and looked for validation.
RESEARCH
I researched the current landscape of public participation in city development in the UK and gathered evidence of:
I have also interviewed homeowners in London and Lisbon who also have an active role in their communities volunteering in residents' associations.
Moreover, I have interviewed two academics in London and Melbourne who gave me an extra layer of knowledge about the problem.
AFFINITY MAP & INSIGHTS
INSIGHTS FROM INTERVIEWS
1
Communication with the council is difficult.
Residents are often not informed about developments happening in their areas of residence and rarely receive feedback when they participate in consultations or surveys, generating a sense of distrust by feeling their views are not important.
2
Bad accessibility/clarity of information/time constraints.
Residents found it hard to browse and interpret the proposals as time constraints and lack of legislation and technical knowledge were also deterrent factors to their involvement.
3
Genuine interest to contribute.
There is real interest in being involved in discussions around city development if the tools and processes are clear and available.
The insights from the academic world also confirmed the willingness of people to participate in the city development mentioning experiments with gaming and informal whiteboard ideas for developers in places like Chile and Australia, supported by local authorities.
Equally, councils welcome input from the public in places like Kuwait by way of gamified surveys. Co-design initiatives are also very common with residents' co-operatives in Northern Europe. As it's been proved, residents embrace opportunities to actively participate in their city development when given a chance.
INSIGHTS FROM ACADEMICS
DEFINING THE USER
To help me empathise with a potential user of my digital solution, I have created a persona deeply interested in creating good public spaces for a more sustainable and fair city for everyone.
This persona, inspired by my cohort of interviewees, believes in the power of discussing and sharing ideas with others to build a much better city but she’s taken aback by the bureaucratic official processes.
From this stage onwards,
I had Susan in mind when I needed to make design decisions.
Looking at Susan’s goals, motivations and frustrations made me think of a question that guided me through the design process:
How can we help Susan engage more with her neighbourhood and city by letting her express and share her ideas about urban development with the wider community?
DESIGN OPPORTUNITIES
Looking at the current experience, Susan has a hard time finding how to initiate a participatory project for her community.
When she performs an online search on Google, she is redirected from the Government website to MyCommunity website and then to Neighbourhoodplanning.com just to find a series of convoluted procedures she has to go to before being able to initiate any project.
EXPERIENCE MAP
I have identified design opportunities to help Susan overcome these pain points which can be included in my app by way of features or functionalities.
The app will allow Susan to connect with the wider community by sharing her ideas in a simple and straightforward manner and conversely allow Susan to participate in other people’s generated ideas.
The app will help go past technical and legal issues as the focus is on the spontaneity of idea generation. It can equally be used by developers and councils in an informal way to gather residents feedback on emerging ideas.
Technical and legal issues can be addressed at a later stage should the idea gain momentum and people want to implement it.
TASK SELECTION & FLOWS
To provide Susan with a better experience, the app will allow her to create an idea on the spot and share it with others for instant feedback and it will equally allow Susan to browse other people’s ideas and give her feedback on the spot.
This way, Susan doesn’t need to go through convoluted council websites and can give her feedback straight away.
I have illustrated the three main flows in the 3 diagrams below.
TASK 1 - INITIATING & SHARING AN IDEA
TASK 2 - CONTRIBUTING TO A FOLLOWED IDEA
TASK 3 - VIEWING THE LEADERBOARD
SKETCHING & IDEATING A SOLUTION
I have translated the task flows above into low-fidelity hand sketches of all the necessary screens to perform those tasks.
I have explored three options of screen flows and have selected the ones below for each task.
The app will focus on two main tasks - create an idea and comment on existing ideas in a visual way.
To help generate more interest, I have also introduced a gamification feature connected to the amount of the user’s engagement with the app.
FROM ANALOG TO DIGITAL & USER TESTING
After selecting the solution sketches for the screens needed to complete the two main tasks and the gamification feature, I have designed mid-fidelity greyscale wireframes which I have tested with 5 users and gathered feedback.
After incorporating the initial feedback into an iterated prototype, I re-tested it with 5 other different users.
Ultimately and with the feedback from this last session, I have iterated the prototype a third time and started to develop the visual design.
V1
V2
V3
The images above show usability issues flagged by user testers, such as the location of the "+" button on the screen which was not consistent and the copy on the homepage which was not very clear. The back arrow indicating points was also mistaken for a back button.
The screen for adding comments in different ways was also improved, separating the themes and the "add photos" screen increased guidance provision to the user. A vector library has also been added to the collage screen.
BRANDING & VISUAL DESIGN
WHY "TRYANGLE" ?
The triangle exists and is very real. The idea for an app called “The triangle” originated in a conversation with a friend, when she mentioned there is a triangular square at the end of her road in a prominent position where nothing happens.
The triangular shape is the residual space left by the intersection of 3 roads and it’s merely a standing platform without activity.
Due to the lack of proper public spaces in the area, this would be a prime opportunity to develop an active urban space.
This is a standard problem cities face and it seems to be a good fit for an app that wants to foster a neighbourly collaboration to come up with urban design solutions by referencing a real situation with the help of the most simple geometric shape.
To emphasize the collaborative nature of the app, and using the the chosen name as a base point, I played with the words and came up with:
Triangle
Try another angle
Tryangle
I have developed an inspirational mood board and studied options for a logo and a wordmark, as well as the main brand colour.
The colour I chose was ORANGE #F25C2A
Orange is a fun and energetic colour with positive associations with:
collaboration, confidence, warmth, innovation, friendliness and energy.
APP COLOUR SCHEME
Due to the Tryangle app's sharing nature, with the content being mostly user-generated visual content, I've picked a neutral colour palette for the primary and secondary colours.
I have used the brand accent colour for the main interactions such as the call-to-action buttons and other residual accent colours have been used to illustrate the ideas and the user's points
#FFFFFF
Primary
#24363A
Secondary
#F25C2A
Primary Accent
#0199CC
Secondary Accent
#E41978
Tertiary Accent
COLOUR ACCESSIBILITY
The text-to-background contrast ratio complies with the AA standard of Web Content Accessibility Guidelines.
Almost the entire app has a dark neutral text on top of a white background providing an excellent contrast.
In the few instances where text is written using the primary and secondary colours on top of the primary accent colour or vice-versa, it still complies with the AA standard as the text is always written using a size above 14pt and in bold.
LOGOMARK
I have developed the logo taking inspiration from the location of the trees on the existing triangular square with the circles representing people's different ideas.
​
​
From here the concept evolved to a more simplified and recognisable shape related to the widely recognisable "share" symbol in the digital world, but including an extra connection between the circles to emphasise the collaborative nature of the app and the triangular shape.
WORD MARK & TYPOGRAPHY
The wordmark is all in caps with a wide kerning using the Inter typeface which is widely familiar to mobile users and communicates in a neutral tone.
Aa Inter
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789
The body text uses Bahnschrift typeface. It's a geometric and crisp font with high readability, functional yet stylish.
Aa Bahnschrift
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789
HIGH-FIDELITY MOCKUPS
Once the branding colours, typefaces and images had been selected, I developed a high-fidelity prototype based on the greyscale wireframes and refined the full experience by redesigning screens and including small animations.
1. CREATE AN IDEA & SHARE WITH THE COMMUNITY
Susan can create an idea to share with others on the spot, on a site she’s walking past, by locating it on the map, giving it a catchy name, uploading photos and writing a small description.
1
2
She can select how sustainable she thinks the idea will be.
Once she’s happy with the inputs, she can preview how it’ll look to others and post it.
From that moment everyone who finds Susan’s idea can contribute with their vision too.
​TAP PLAY TO ANIMATE
2. COMMENT IN AN EXISTING FOLLOWED IDEA
​TAP PLAY TO ANIMATE
Susan browses ideas, follows a few and decides to comment on a specific one
1
2
3
She has 3 options: she can upload a reference photo of an inspiration of an existing project.
She can post a comment with text only; she can use the app's built-in editor that allows her to do a collage using scalable vectors on top of a background photo she uploads from her phone photo albums.
She captions her reference photos or collages, and she posts them.
3. CHECK THE LEADERBOARD & MEANING OF POINTS
The app wants people to participate and rewards them with points according to their participation amount.
1
2
3
Equally, ideas have points based on how much people like them.
Both - people and ideas - have a leaderboard that shows the top contributors and liked ideas.
This light gamification process does not aim to distract users from the main purpose but informs on how certain ideas generate more interest than others.
​TAP PLAY TO ANIMATE
PRODUCT MARKETING SITE
I have designed a responsive marketing website for desktop and mobile with the intent of having potential users interested in what the app can do and download it.
​TAP PLAY TO ANIMATE
-
I have shown the most interesting feature as a hero image, portraying an empowered user suggesting his vision for the city and followed by showing interesting ideas that turn into projects with the help of the app.
-
This ties together with testimonials and follows with the list of the app's main features.
​
-
It ends with an FAQ feature and links to social media in the footer.
MULTI-PLATFORM PRODUCT
Tryangle has been conceived to be a mobile app. It matches the needs of the urban explorer to spot a suitable site and share an idea about it on the go.
One of the most interesting features of the app is the built-in editor which allows the user to produce quick collages using a background photo and dropping scalable images found in the app’s visual library on top of it.
-
However, the small size of a mobile phone can have some limitations when the user wants to create more detailed collages, and this feature would work better on a desktop or tablet allowing the introduction of more complex features.
-
On the desktop version, we can take advantage of the larger screens for additional space, enabling a bigger canvas for graphic editing and introducing 3D primitive forms that can complement the collage and allow the user to produce more detailed and interesting images.
DESIGN IMPACT
-
The Tryangle app is a digital solution for a bottom-up approach to imagining city development.
​
-
It empowers people to suggest ideas for derelict or vacant sites in their areas of residence or work, that will serve the community and give more purpose and fulfilment to city living sustainably.
​
-
It relies on local people's knowledge and aspirations to come up with improvements to the public space.
-
It can equally be extremely useful for developers and municipalities as it can be used as a tool to enquire and include local people in the very early stages of the process of urban development and provide opportunities for co-designing.
​
-
This engagement helps the urban development process to proceed with less friction and deliver to the wishes of all parties involved.
UX METRICS
Despite Tryangle being an academic project, I have thought of how the success of the app can be measured should it be implemented.
​
​
-
number of ideas submitted to the app
-
number of app downloads
-
user rating of the app above 4 stars
-
being adopted by citizens, councils and developers
