Timeline:
Nov 2017 — Jan 2018
Role:
Product Designer
Platform:
Mobile
Team:
4 Product Designers
SeeAround.me is an iOS mobile app that brings community-generated, hyperlocal news to Bay Area users. The client wanted to increase user engagement and give the app a much-needed visual facelift, which would be a big change from his MVP designs.
As a Product Designer on this project, I worked on identifying newsfeed pain points, developing our design framework in low-fidelity, and prototyping/pixel-pushing to the polished product.
The client responded very positively to the redesign (and later approached me to work on another key part of the app).
A new and improved experience for a hybrid iOS-Android app.
Our client designed SeeAround.me himself prior to involving developers and wanted fresh UX input.
He came from a non-design background and wanted new eyes on the most crucial parts of the product, all with the goal of increasing user engagement down the line.
A previous team had conducted research, a foundation on which to kick off our own part of the project. We also did internal user testing with the team, coming to this plan of action: Freshen up the brand, and improve usability to regain user traction and drive growth.
What is seearound.me?
Hyperlocal news for the Bay
SeeAround.me is an iOS mobile app that brings community-generated, hyperlocal news to Bay Area users. We decided to restructure, redesign, and rebrand the product's core interior from wireframes to hi-fi (with user testing throughout).
The User
UX research executed by a previous team told the story of our persona, Rachel.
A tech-savvy Bay Area professional in her 30’s who...
Consumes more content than contributes
Enjoys quick access to information
Is used to sharing on other media platforms
Likes knowing and caring about current happenings
Has a certain level of expectation from current technology to aid these behaviors.
The primary obstacle Rachel encounters today is information overload. In order to know what’s going on, she oftentimes has to reference various sources for comprehensive insights into ongoing news.
Architecture 2.0
We drew out the app’s current site map to mark out existing information hierarchy and architectural gaps.
We drew out the app’s current site map to mark out existing information hierarchy and architectural holes. For example, one major flaw in the existing design was the lack of visual confirmation when important things happened, such as reporting another user.
When a user accessed the action overflow menu embedded in each post, s/he had options such as deleting a post or blocking a user – all big actions to take. However, none of them were designed to double-check a user's intentions nor confirm that an action took place. Additionally, there was no way to retract that action.
Each designer took on one section to develop stronger task flows, and then came back together to construct a streamlined site map that hit all our major checkboxes around improved visibility.
I tackled the view of an individual post, which involved two perspectives:
The view when the user is looking at his own post
The view when the user is looking at another user's post.
we clearly identified that our newsfeed needed to:
Organize info visually and structurally.
Present content in a quickly digestible way.
Have a simplified and compressed navigation system.
Designing for new
We took the approach of creating and testing 3 different lo-fi prototypes, each headed by one designer.
As one of the three designers trying her hand at a unique prototype, I envisioned a design that displays content in an intentionally structured way and encourages social interactions between users.
I focused on 3 aspects:
Profile Prominence
Large profile images put a face to the person behind the posts, bringing a human touch to news that might otherwise seem sterile.Content
Being king, content needed to capitalize on font type and size differentiation to classify text as headline or body text. I believed content consumption comes first but secondary functions — comments, voting — should still be easily accessible.
Images
Images immediately draw the eye and deserved considerable real estate. Ultimately, these were the reasons that led the client to decide that my design represented a good foundation for our team's move into mid-fi and forward.
Time for a Makeover
A total brand refresh was in order.
We worked to implement the branding keywords "pragmatic" and "playful" into various aspects of our design throughout.
Under the guidance of our Brand Lead, we worked with a mix of bright colors with trustworthy blue , rounder edges, and wider fonts to develop a new look.
Before
The original icons (left) that were used to identify the different categories needed a revamped approach.
After
So the team developed icons, discussed how the category names could change – to fit in a bar for our categories and be more recognizable– and finally selected the set below done by our project lead.
Before
We also felt that the app mascot, while approachable enough (don't mind the staring eye)...
After
... could have softened edges, curves, and two-tone colors to model the new SeeAround.me's playfulness.
The outcome
There was less friction in the experience thanks to streamlined navigational elements, visually differentiated content types, and refined features.
Led by our belief that improved usability is a surefire way to attract new adopters while keeping loyal users, we defined the most important elements that make for easy use within a visually appealing package.
↓
1) New and Improved Filters
A sticky category bar and additional filter by Most Popular, Most Recent, and Nearest to Me allow users to effortlessly and quickly whittle down to the news they want to see, regardless of the page they're on.
2) Visually Differentiated Content
Users can immediately identify if a post is text-only, text and original image by the poster, or pulled from a third party via URL embed.
3) Sensible Navigation
Users can easily toggle between features and screens that matter most: Home, Search, Post, Activity, and Account.
4) Refined Feature Sets
We scrapped a messaging feature due to rare use cases and changed the notification tab to be a full screen that automatically removes alerts from your navigation once viewed. Users can bookmark the posts they want to save for rereading later on.
Conclusion
From seamless IA to polished aesthetics that balance playful with professionalism, our deliverables met client expectations.
The prototype (which you can interact with here) is a powerful representation of the high-quality product we pushed out. As testament to that, the client approached us with hopes to continue our work on SeeAround.me. The entire design team agreed to do so, albeit with a more individualized approach.
The secondary newsfeed, dubbed Map View, is visited in this case study.
Currently, the app’s revamp is in the works with two developers in tow. We are all anticipating the day our client reports the relaunch of Seeround.me with our redesign.
Want to learn more about my time at Tradecraft?
Other companies I worked at:
Flexport
I joined Flexport’s Freight Operations organization as a senior designer in June 2022. My two featured projects helped supply chain operators transition to a new internal tool in the making.
RAISE CRE BROKERAGE
I joined Raise in August 2019 as their third designer and redesigned how Raise’s commercial real estate brokers collaborate with their clients.
