Redesigning SeeAround.me
Leading a team of designers to revamp a hyperlocal news app
--
There have been times where I’ve walked outside, seen some helicopter in the air, and wondered what it was doing there. I come from a small town in the South Bay, so when there is special news or something happening, people are curious to know what it is. SeeAround.me is the app that fills this need for quick, relevant access to local news.
The app was founded by Andrew Jones, a previous Tradecraft alum now Head of Product for The Cole Group. We were fortunate enough to have been given a large amount of freedom over the design process for the project because of his flexibility. Armed with a team of four other designers, I led the redesign for the existing mobile app newsfeed experience (50+ screens!) in order to improve its overall usability, while helping add a new splash of color as well.
Feeding locals news
My team was lucky to have tagged along at the tail end of a separately led project focusing on designing an onboarding experience for the SeeAround.me app. As the second wave, we were excited to start working on a bigger piece of the pie — the core app experience.
In framing the problem we wanted to solve for, we used the previous team’s user research to inform areas of importance. My team came to the conclusion that the newsfeed, central to the news app experience, was something we felt passionate to redesign. As our work progressed, I kept Andrew looped in at various stages of the project to ensure we were still building towards his vision for the app.
Our first initiative was to improve overall usability of the app. We did this by restructuring the navigation, making content more accessible, and adding in certain requested user features to make them feel more at home.
Our secondary focus was to re-skin the look and feel to reflect a more visually appealing interface, enhancing the credibility of the app. As a team, we spent a surprising amount of time dedicated to just deciding the color palette which became a complex visual problem due to the nature of the app.
User research informed us that app users valued quick consumption and finding news relevant to them. Our designs were therefore centered around prioritizing the right kind of content within the newsfeed, and making user flows as intuitive as possible to cut down on time spent navigating the app.
Refining new flows
We started with whiteboarding flow diagrams of the app’s navigation to zone in on where users had issues. After adding our additional comments on the structure, these were digitized and the work was split between four main flows: the main newsfeed screen, the user post, the accounts view, and the actual navigation bar.
The low fidelity stage boiled down to an information architecture restructure, adding in holes where certain options were missing and reducing redundancies in the navigation. As the most exploratory phase for what could be, the team spent quite a few hours discussing what would make sense, taking the time to collaborate for final buy-in on the resulting solutions.
We tested feature integration during a mid-fidelity stage, merging three different mock-ups into one centralized design. Working in an agile environment, the team worked to get rapid user feedback to more quickly inform our design decisions before we moved forward. This middle stage allowed us to finalize what content would be removed, and what we wanted to introduce.
By the high fidelity stage, we were able to focus on the visual design of the app and constructing the mobile components. We were careful about what colors we wanted to introduce to the app, as it would define its character in the first moments of user impression.
This became an interesting problem because we wanted to use colors to help visually define each category for the app, but still have an accent color to represent SeeAround.me as an app. We simultaneously had to consider how certain designs would look on simpler screens such as the New Post screen versus the Map Feed, which we envisioned as sprinkled in color.
I personally found this part of the project the most fun as we put to trial various different color schemes all brought forth by our different styles as individual designers.
With this, we imagined a new SeeAround.me, a modern news app with sleek design and that was powerfully informative.
A New Newsfeed
SeeAround.me highlights content through its mix of categories, helping you find what you are looking for more quickly. Color strips on the left hand side provide visual cues on the category while adding a splash of personality to the feed.
You can easily distinguish between user-generated posts and article posts by looking for embedded links. This post type allows you to contribute your own thoughts while sharing the source of your news.
The colors of the categories offset the more professional teal accent while still maintaining a serious, but vibrant tone.
Post Cards
At-a-glance information is easier than ever while scrolling through the newsfeed, with important details at the top of the post and interactions at the bottom. You can easily tap into each card to open up a more detailed view without only relying on the comments button.
Bookmarking also enables you to save posts to reference in the future, facilitating social sharing and giving yourself content to read as you commute home.
Quicker Posting
To increase post engagement SeeAround.me offers a faster way of creating posts, allowing you to focus on content that matters with optional formats.
Your current location is set by default, allowing you to change categories with a quick tap, and queueing up your photo library without an additional screen.
A Streamlined Profile
To focus on the content delivery nature of the app, messaging was removed and the profile page content was reduced. That way you can prioritize the information you care about without the app being too bloated.
The newly designed user profile page houses all of your settings and acts as the destination of the new bookmarking feature, meaning that you don’t have to worry about losing important posts.
One Button Away
Navigation is simpler with a five-option tab bar at the bottom, making it clear which view you are engaging in. The map feed is one tap away at the top, a quick toggle to the other side for a more visual, location-based experience.
Notifications, the newly improved Alerts, tell you the action that triggered the it with clear iconography.
Search lives on a separate page to prevent interruption of the browsing experience when you are looking for specific content, making potential room to search for users and locations, not just posts.
Reflection
Overall, Andrew was very satisfied with the new, cleaner approach to the newsfeed. We were able to cut down on certain features that allowed it to take shape as a content-focused app. He even asked the team to stay on and continue revamping other parts of the app, which we were happy to say yes to.
Propelled by our common passion to improve the newsfeed, my team was able to organize quickly as the project’s scope turned out to be increasingly larger than we had expected. Setting proper expectations helped tremendously in speeding us along, ensuring that our time spent together in one room was productive. Our meetings finished early, and the work output continued to remain high.
Because three of our designers had specific visions for the newsfeed, we started with three mockups and tested them individually. From there, testing informed the best features to incorporate with Andrew deciding the foundation to build upon. While this type of approach is not as viable in business settings, it did allow the designers to fully explore different options and settle on one final vision together.
The mid-fidelity stage was unplanned for, but came to be invaluable in leading the project forward with certainty. Armed with user confidence in our decision-making, we were able to produce a collaborative final design. Stay tuned on more news about the shipped version!
Thanks for reading this study on SeeAround.me. If you’re interested in playing with the interactive prototype, head over to my project page here.
