March- September 2020
UX/UI Designer
THE PROJECT
I love urban photography and totally agree with the old adagio “ the best camera is the one that you have with you” therefore I am a huge fan of iPhone photography.
That's why when it was time to chose the portfolio project for my User Experience Design course I picked the " city game" project with the mobile photography twist to it.
DEFINING THE PROBLEM
All of us we have been there. We fly miles away for a city break just to discover, with a variable level of disappointment, that we are not alone. There are millions of tourists in almost every corner of the planet seeing the same places and doing what everyone else is doing. And the worse of all, we are also one of them.
You take pictures around and upload them to Instagram just to discover that there are thousands of pictures exactly like yours under the same hashtag. If you don’t believe me, you can just check this fabulous instagram account.
Welcome to one of the main problems: the homogenisation of visual content, specially the pictures we upload in our social media.
Yeah, ok, not the same leave but wait...are you really sure is not the same leave? source: instarepeat
Another problem we assessed is the over-tourism that is affecting almost every capital’s sustainability and affecting the resident’s quality of life, especially in central locations. Tourism authorities are always looking for ways to decentralised such a huge flow of tourists to different locations within cities or even within countries.
Most of the photo enthusiasts are self-taught and despite they recognise that practice makes master, it is difficult to find time to practice. Not to mention the time they need to spend browsing the internet to find good exercises online.
We also took into account the social component of photography. Now, it is kind of a “ loner” hobby but practicing with other enthusiasts can help them to learn from each other and it is a source of inspiration. Being part of a community keeps you motivated and engaged.
The mission of Unframed is to help users discovering alternative city locations while practice mobile photography through creative exercises. During their trips, users can capture hidden stories around the cities and share their unique vision with the community.
We summarised this in our problem statement:
" Our users need a social game to improve their photography skills because they are passionate about photography and discovering new locations when they travel. We will know this to be true when we see users uploading more visual and attractive pictures in instagram from decentralised locations"
THE COMPETITOR'S RESEARCH
After performing a thorough competitor’s analysis of photography, treasure and scavenger hunt’s apps, I found an app that claims to be “ the world greatest photography game”. Promising.
One of the main differences with Unframed is that they do not organise their games or challenges in routes but as separate contests and challenges where users upload their pictures. They can win different prices and be showcased in virtual exhibitions if they get enough votes from the community.
When I dig deeper into the app, it seems the votes are not the only thing that counts to make your pictures stand out. You can also unlock points or expertise levels if you pay a premium.
Basic features, like commenting in other people’s pictures, are also unlocked until you reach a certain level. If their idea is to build a community around photography, blocking the user’s participation is not ideal.
Actually, when you look at the reviews in the App Store, all the users compliment the concept but not their voting system where you can read “ rigged” “ disappointing” or a “waste of time”.
I look at their website's traffic and, despite being a fairly new platform starting in 2019, they have high traffic and a great ranking in positioning.
However, when I browse their social media accounts in more detail, I realised that no much of their audience is engaged. Their posts only get a few likes, in most cases not even 2% of their total fan base.
The tool that generates more traffic is their blog where they post tips and tricks about how to improve your photography shots.
Despite we share the “photography game” concept, I feel that I would like to differentiate as much as possible from them.
My idea is to focus more on photography as an artistic expression and build a supportive community. Their high amount of organic traffic made me think there might be a market for us too.
USER SURVEY & INTERVIEWS
A 12 question survey was sent to 34 participants to test my initial target assumptions.
The results showed that our target will be a woman in the 30-34 age range with no kids. They travel mostly for leisure or business 4 or more times a year being their favourite destination capital cities followed by beach holidays.
They tend to plan their holidays in advance and they like to take recommendations from family and friends and also check famous travel blogs. They did not use any app to check tour routes because they couldn’t find any that suits their interest which are places where the locals go. They also like to check their top-rated attractions but only if they have time left.
They love to take lots of pictures when they travel but when it comes to sharing there was a division between the ones who like to share their pics with all their contacts on Instagram and the ones that only share their pictures with a few contacts via whatsapp.
The surprising fact was that the majority consider themselves great at photography and only a small percentage though they would like to improve their pictures.
That was a shocking fact because when I first started thinking about the idea of the photo city games, I thought the main goal for the participants would be to improve their photographic skills. So I decided to go more in depth in the topic with the user interviews.
INTERVIEWS & RESEARCH
The user interviews and user research's analysis gave me plenty of insights about our audience being the most important one that their main problem was their lack of time to prepare alternative routes. They wanted to find locations which don't appear in the mainstream guides and this takes them long time browsing the internet and Instagram.
Almost all the users consider themselves street art lovers and they were sharing with me the methods they struggle with to find the nicest walls in the city. They use Instagram to find the nicest walls and spots however this was frustrating because sometimes the pictures or the locations are not accurate. Also, they tend to wander and get lost in the city but their time on the location is limited and this is a very time-consuming process which is not working 100% of the time.
All of the participants participated in photo routes in the past and they really liked it. They were very enthusiastic about the idea of having an app where they can find alternative photo routes created by other users.
However they were very clear that they were not interested in “playing” a photo game around the city, they would prefer to do the route on their own and not with friends or other users.
I was always hesitant about the idea of the “photography competition” and with these insights, it was clear that Unframed neded to be an app where you can find curated alternative city routes more than a photography city game.
USER PERSONAS
With all the insights I created two personas: the more "creative and artistic" user who are more interested in the narrative side of the photography. They are interested in capturing candid, original and authentic stories of the cities they visit. They avoid mainstream attractions and only share their pictures with a few selected contacts using whatsapp.
The other type was more of a " poser" user who wanted not to miss the most “hip-hop happening” places, together with the top rates attractions, and photograph them to let all their Instagram friends know where they have been.
MENTAL MODELS, USER JOURNEYS & USER FLOWS
After extensive research, it was time to start building our concepts arounds. We created Mental Models and User Journeys to define three more important app’s functionalities to build our prototype.
The first basic function was a route search using filters and, after checking a summary, join the journey.
The second most important was to perform one of the photography exercises within the route.
The last one was to share one of the pictures taken using a third party app.
I have identified many other opportunities as extra services but due to time constraints, I was not able to add those to my main user flows.
SITE MAP & CARD SORTING
After building my first Site Map, I have performed a closed card sorting test made of 29 concept cards and 6 categories. We used " Optimal Sort" to test our app's information structure with 6 participants.
The biggest issue I found was where to locate the picture gallery to see other user's routes pictures and challenges. Only 1 person out of 6 located the “ Gallery Location” under my profile.
Half of the participants also located the possibility of searching the challenges in the“ Search Tab”; therefore I decided to unify the searching feature for both photo challenges and routes and let the user decide what they would like to see by filtering results
SKETCHES ON PAPER
The below sketches are my first attempt to design the navigation system. One of the main components of Unframed was going to be the search bar that will be always present on top of the screen.
Another very important component would be the menu at the bottom of the screen where I will place the main's app options: home, routes, my profile and settings being always able to switch between those screens.
Because I don't want to clutter the interface with lots of options, the hamburger menu on the left side will be used for secondary options more for personalisation purposes or additional services.
After that, it was time to go to XD.
MID FIDELITY PROTOTYPE
After defining what I wanted to design, I started working in Adobe XD to build the mid fidelity designed prototype for each feature that will be used to build the first prototype and be checked in a first round of testing with users.
FIRST PROTOTYPE
After adding changes back and forth, I had ready the first prototype in high fidelity to test with real users.
USABILITY TEST
We have conducted a Moderated Remote Usability Test. Test was made to six participants in individual sessions of 10-15 minute using Zoom.
The main goal was to asses the learnability for new users interacting with the app for the first time in its mobile version. We wanted to observe and measure if users understood the though behind the app and complete our three basic initial functions.We measured the learnability of the app calculating the participant's success rate, the efficiency timing the time per task and finally the errors using Jakob Nielsen’s rating scale.
I have recorded the participants and took notes with observations, positive and negative quotes and errors that they found. Afterwards, I have sorted them out in the top level categories using post-it notes.
USABILITY TEST FINDINGS
I took note of each error and included them in the rainbow spread sheet rating the errors according to the previously mentioned Jakob Nielsen’s severity error scale and proposed solutions for each of them.
Because of time constraints, I was not able to implement all the recommendations and I chose the ones more critical to the project related to the app's main features.
The main issues found by users:
1. They couldn't find easily the routes in the map
2. They couldn't find the advanced search options
3. Uploading the picture to the system after completing an exercise was confusing due to complexity of steps
My recommendations to each issue:
1. Routes need to be placed in a list and offer the map view as a complementary option
2. Icons needed to be changed and the advanced filter option redesign making it more intuitive
3. Combine the “ review and edit” and “ send” screens and change the icons in those screens
Thanks to preference and usability tests with real users, we discovered invaluable insights and they have contributed to iterate our prototype to make it more user-centered and functional.
FINAL DESIGN
It's been a long journey since those initial sketches wireframes until we have the final design. Below a few screenshots to see the design's evolution. If you would like to see the prototype, you can click here
STYLE GUIDE & DESIGN SYSTEM
To be able for any designer to continue working in the app, I have created the design documentation with a style guide and a design system with the main elements to create or edit any app's component.
THE RESULTS
Unframed was my very first project as a full UX/UI Designer and Illustrator where I took ownership for every step of the process. It's being over 6 months of constant and hard work. It was not easy but now when I look back I feel very accomplished and I learned a lot on the process.
This app was built as part of my User Experience Design Certification where I followed 500+ hour project-based course learning the main UX processes and methodologies. I would like to thank my tutor, Paola Palencia, and my mentor, Tobias Treppmann, for their reviews, guidance and encouragement along the way.
Unframed was one of the projects I always had on the back on my mind and after all the process I still believe there is market for it. Would it be a reality? Well, I can't say it for sure what future will bring but what is sure is that after this project, it's one step closer to be real than it was before.
If you make it till here, WOW! Thanks a lot for following along!
