See Around Me
IA, UX, UI, Visual Design
Company:
See Around Me is a location-based user-generated news app that allows users to post happenings around their neighborhood.
Role:
Product Designer -- I worked on the navigation restructuring and feed view, exploring layout options in low-fidelity and final pixel-perfect design.
Objective:
See Around Me's has known usability issues that are leading to low engagement. Overhaul the entire app, from IA to visual design to address usability and create a more playful, approachable product.
Background
At the start of this project, we were lucky to have testing insights from a previous research team. The major usability issues were focused around the navigation and newsfeed, with the posting function as a secondary priority.
Design
Where am i?
The navigation included both a drawer and a top navigation bar. Some elements -- like map view -- were repeated between the two navigations.
See Around Me before the redesign
Because the founder wanted to re-build the app natively, we focused on iOS, and redesigned the navigation as a tab bar.
The biggest challenge was reducing and combining the number of menu items while still ensuring everything is easy to find. As the designer in charge of navigation, I first whiteboarded a simplified organization.
Key navigation decisions:
Axe the messaging function, as it wasn't central to the main purpose of the app.
Nest profile and settings into account.
Keep the map view/list view toggle at the top right.
During testing, users were able to successfully navigate through the app, although our initial choice of a cog wheel for the account section gave 2/6 users pause.
Because of this confusion, we swapped the cog wheel for the person icon in the final version.
What's the news?
The core functionality of the app is the newsfeed.
The newsfeed has three post types:
Text
Text & photo (the tallest post type)
Embedded links.
The main issues we wanted to fix was the scale and readability of posts with photos or links. To find a solution, I designed three possible lo-fi layouts, with the extreme case of a feed with three photo posts consecutively.
During feedback, the majority of respondents gravitated to the third option - title, text and then photo. This option balanced scanability with photo size, so users could quickly read posts and gauge interest.
S.A.M. or it didn't happen
We put redesign of the new post feature as a secondary priority because most users are consumers, not content creators. Even so, we wanted to allow streamlined posting...after all, this is supposed to be super-current, hyper-local news.
During research, it was clear that the the Add Location and Add Category buttons needed to be improved. After a group design discussion, I created a design concept with the following:
Location: Default to current location, and allow users to adjust if needed.
Category: I came up with the idea to use the category icons so that users could visually select the category quickly.
Before & After
I was wary of using icons without labels (until clicking), but we found that having landed on the newsfeed and seeing the icons, tested users did not have issues understanding the icons on the new post screen.
Final Thoughts
Validation testing and the feedback from the founder was positive. After the re-build is complete (est. 3-5 months), I look forward to getting more data in how users interact with the product.
In particular, I am most interested in the size of the touch points and typography scale. Throughout this project, I was the touchpoint crusader - always ensuring we reality-checked ourselves (as younger humans) about the scale of the design. While the target demographic is young professionals in their 20s and 30s, I would be interested in a larger-scale usability study to ensure our design is inclusive.
Want to learn more about this project?