PhillyRow: An app for Philadelphia rowhome owners
Art Director: Abby Guido
Art Director: Bryan Satalino
PhillyRow is a collaboration between three Tyler school of Art and Architecture professors, who want to bring attention, respect , and understanding to rowhome style buildings found throughout Philadelphia. I was hired as a UX/UI intern for PhillyRow and my role was to collaborate with the PhillyRow creators and a few architecture students to brainstorm and prototype a digital experience for Philly rowhome owners.
The idea behind the digital experience was to create a resource for rowhome owners to learn more about their unique rowhome. It will give them access to tips for specific maintenance, common fixes, and improvements shared by other rowhome owners.
Research
Brainstorming
The first step was to brainstorm with the PhillyRow creators on what we thought would be the most beneficial to rowhome owners. We decided on a mobile site similar to a forum, where owners can create accounts and post projects that they are tackling in their rowhome. This would create a community for rowhome owners to share, learn, and explore what they could do to improve their rowhome. We figured a mobile site would be the best place to start because it will allow users to access PhillyRow at any place and time and it also is the easiest way to take and share photos to the site.
Competitor Research
Once our goal for the digital experience was decided, I began researching similar apps and sites that already exist to find out what can make PhillyRow’s site unique and what some best practices are. I collected a lot of research from home improvement apps, task tracking apps, and social forums.
Wireframes
After solid research was collected, I began site mapping and sketching wireframes. After every stage, I met with the creators to present progress and receive feedback. After the sketching phase and receiving feedback, I began making low-fidelity wireframing in XD to get more accurate sizing and layouts.
Hamburger Menu slide out Interface
Once the low-fidelity wireframes were finalized and approved, I began implementing PhillyRow’s existing branding into the high-fidelity screens. As a team, we decided to maintain the block, grid-like structure that their existing branding had. That style was challenging to maintain while trying to ensure a functional user-friendly interface. I struggled with making sure everything had enough clickable space and that the information was organized and not overwhelming.
Create an Account
All users will need to create an account specific to themselves and their homes. They will input their information, identify their rowhome, choose a profile picture, select interests, review the information, and create the account.
Home
The home screen of PhillyRow is where you can see all the projects users that you follow are posting. You can see a photo of the project, a brief summary, the location, and the date of the post. You can like the post to share your appreciation for the project or you can save the post if you want to be able to reference it later.
Each post expands to see more details and pictures from the project. If the post owner added updates to the project they will be each be expandable within the main post. You can also add comments to the post if you have questions for the post owner.
All the general feed posts are color-coded in green to differentiate them from other types of posts throughout PhillyRow.
Explore
The Explore section of PhillyRow allows you to search for projects in specific categories and see projects that might not be on your feed.
The page is organized with a search box on top if you are looking for something specific, a top projects section, and a project category section. The top projects section shows you the most liked projects on the app at the moment. The project categories organize projects into general project types, so you can browse in the general category you are interested in.
Posts found in the Explore section are color-coded in orange to differentiate them from other types of posts throughout PhillyRow.
Projects
The Project section is where you can see and edit your existing projects and create new posts. If you are creating a new post, you can either post a new project or update an existing one. If you don’t have a project to post or update, you can answer “this Week’s Prompt”.
When creating a new project, you add a project title, start and finish dates, project description, before photos, and tags. When all the information is added, you can review the project and post.
Profile
Your Profile consists of your username, the general location your rowhome is located, your followers and following, and the type of rowhome you have. In your profile, you can also see your saved posts and your projects.
Other users can view your profile to learn more about you and your rowhome. You can view other users’ profiles and message them if you have questions about their rowhome or one of their projects.
Learn
The Learn section provides resources for you to learn more about your rowhome and learn more about common improvements and fixes that are necessary for rowhomes.
The page is organized with a search box on top if you are looking to learn something specific, a section to learn about commonly done improvements that users might want to learn more about, and common fixes that many might need guidance with. There is also a Philly Rowhouse manual that acts as a resource to learn more about the history and unique characteristics of your rowhome. There is Also a renovation calculator that is a tool that can help you estimate how much your renovation or fix might cost. All you have to do is answer a few questions about your project and an estimated cost will be calculated.
Conclusion
Working on the PhillyRow app with the PhillyRow creators was a very exciting, but also new experience for me. This project prepared me to work in a professional environment by strengthening my ability to communicate and present my work and ideas in a clear and effective way. It also helped to improve my ability to take and implement feedback into my work. One of the main things I learned was how to implement and expand existing branding into a new digital interface. I am very happy with what I was able to accomplish and learn during this internship and I can’t wait to see how PhillyRow grows.
