The Citizen Project
Case Study
The Citizen Project works to improve the lives of Roosevelt Island residents by utilizing technology to foster relationships between residents and local businesses and organizations.
UX/UI Design, User Research
Role:
Timeline:
One Month
Figma, Asana
Tools:
Project Overview
Upon joining The Citizen Project, my top priority was developing a feature for users to explore different walking paths on the island. This month-long project involved collaborating with project managers, developers, and other product designers to research, design, and prototype the feature.
Current Challenge
The Citizen Project needs a feature that allows users to navigate certain walking paths throughout the island.
Task
Create a user friendly walking path feature in-line with The Citizen Projects current style guidelines.
Process
Research
Understand how the feature addition is going to be used and it’s role within the overall application.
Determine the technical limitions of The Citizen Project and Mapbox.
Understand the functionality and features of other similar products currently on the market.
Gain a better understanding of the potential users and their needs.
Research Goals
I initially began my research process by having several conversations with the project manager about what should be prioritized with this feature, how the feature was going to be used, and any additional use cases he wanted me to explore with the designs.
Following these discussions I sat down and determined what research would be necessary to complete the feature addition. In addition to this project I was assigned several other tasks to work on simultaneously so despite my month-long timeline for the project, I knew I was going to need to prioritize focused research into potential users, competitor offerings, and research on Roosevelt Island as a whole.
Research Plan
Once I had established a clear plan for my research, I began the process of looking into similar products on the market.
Competitive Analysis
User Exploration
For this project I explored the offerings of two different mobile applications, Strava and AllTrails.
Strava is a popular fitness app that allows users to track runs, bike rides, and other activities, while also connecting them to a community of athletes. Strava serves as a mix of both workout tracker and social media platform. Users can log workouts, share them with friends, and compare their workout stats on specific routes through leaderboards.
AllTrails on the other hand is an app focused much more on serving users who explore the outdoors. AllTrails offers users a collection of hiking, biking, and running trails throughout the world. AllTrails features a collection of trail maps with detailed descriptions, user reviews, and difficulty ratings, making it easy for users to find their next adventure.
Beyond my initial research into these two apps, I explored what certain user flows look like for each application. For example, I followed how users navigate finding hiking trails near them in both the map and list view in the AllTrails app.
After conducting research into similar products I decided to have a conversation with the product manager about the possible limitations of the development team and how these limitations would influence the design. In addition to this discussion I conducted research into the limitations of the API we were using for the feature, Mapbox.
Given certain time and project constraints, I was unable to meet with users to understand their perspective on the feature and its uses. In place of this, I relied on the project manager to give me a better understanding of the target audience for the feature. This allowed me to better empathize with the user and focus the design of the feature on their needs.
Empathize
With the insights gained through research, I put together two user personas to help guide my design and continue to keep the project focused on user needs.
User Personas
In addition to these personas, I explored what the user’s journey would look like from both the perspective of a visitor to the island, looking to explore via a walking path and also the perspective of a resident, who frequents the walking path’s but likes to track their progress.
User Flow
After putting together a user flow I felt like I had a better understanding of the user journey and the screens a user would have to navigate in order to use the walking path feature. With these screens in mind, I began to review the brand guidelines and previous design decisions so I could be sure my designs fit in well with the rest of the application.
Unfortunately, there was a bit of disorganization across The Citizen Project, and therefore they did not have a design system for me to refer to while designing this feature. In order to streamline my own design process I quickly put together a style guide based on the UI decisions I could see were consistent throughout the wireframes. This helped me maintain consistency between not only my screens but between the feature and the remainder of the application.
After spending much time setting myself up for success in the wireframing process, I was ready to begin designing. I used Figma to put together my initial wireframes, and got to a point where I felt the overall fidelity of the designs were advanced enough to convey the design decisions and the future of the design to the project manager. I then set up a meeting with the project manager to present the wireframes and get his thoughts.
One thing I struggled with throughout my time working on this project, and other projects at The Citizen Project, was the prioritization of a map view over a list view. Despite finding that the list view for each feature was easier to navigate than map view in initial testing, the end client was steady in their decision to subtly push users to primarily use the map view of the application, therefore creating hurdles when designing features for the application. This issue was one I primarily addressed in my initial presentation and iterations as I wanted to be sure the project manager understood the implications of this design decision.
Following the initial presentation, I took to finding the easiest way for users to navigate the walking path’s by looking only at the map.
After a few rounds of iterations and feedback, I had developed a product that not only made me and the end client happy, but also was going to benefit users in the long-run. I went ahead and began to prototype the feature using my wireframes and the user flows I had put together.
I had also been putting some time into my prototyping skills leading up to this project so I was excited to put those skills to the test and see how close I could get to mimicking the user experience.
Design
Initial Iterations
Brand Guideline Review
Wireframing
Deliver
Prototyping
After I had spent time trying to get as close as possible to the user experience, it was time to present the feature to the project manager as well as the development team to gather their thoughts. Overall the feedback I got from this presentation was mostly positive, with a few additional ideas to explore to see if it could improve the user experience and overall feel of the feature.
Presentation
Final Iterations
I used the feedback I got from my presentation to go through one more final round of iterations. This final round really brought the feature to life, and made me more confident in my designs and the ability to implement them from a development perspective. After wrapping up on final iterations, it was time to deliver the feature to the rest of the team.
Implementation
To be honest, the delivery of this project was somewhat lackluster. I had been working on the project in a separate Figma file and the overall delivery consisted of moving it from one file to another. In addition to this I had expected the implementation of the feature to be somewhat quick given my short timeline for the project and overall sense of urgency from the project manager to wrap the feature design up. Despite this, it was several weeks before the development team began to implement this feature. While I was waiting for implementation I was growing increasingly anxious that there were going to be questions I had to answer for the development team that I would not confidently have an answer to given the time gap between design and implementation. Thankfully, there were very few questions about its implementation and The Citizen Project was successfully able to use this feature in their initial Alpha launch.
Outcomes
As the application develops and continues into its Beta phase and eventually its public launch, I’m looking forward to seeing how this feature develops and how different designers approach the feature design. While I would have loved to continue with The Citizen Project to see my own work develop, the disorganization between teams led to this project being much more of a time commitment than I had initially agreed to. Therefore, after finishing the other projects I had been assigned, I took a step back from the organization and increased my workload with the other company I had been working with, Ritz Carlton.
Want to see more projects?