See Around Me

IA, UX, UI, Visual Design

sam-mockup.png
 

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

See Around Me before the redesign

nav.png

 

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.

 

 
SAM-navafter.png

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. 

 
 
 
newsfeed-options.png

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

 
IMG_7585.PNG
sam-post.gif

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?