SEEAROUND.ME: ONBOARDING

QUEST IN A NUTSHELL

The new SAM logo was the work of the talented Shei Reyes.

NEWS AT A GLANCE

The SeeAround.me app was created to help people with finding news that is both relevant and local to Bay Area natives. SeeAround.me crowdsources news from its users, allowing them to see updates such as the development of new buildings or the opening of local festivals in real time.

As part of the Onboarding team, we focused on defining a new experience that would be simple, engaging, and informative. To do this, we validated the new onboarding flow with rapid user testing and tested many different concepts.

Role

UX and Visual Designer

Party Size

8 total members

Quest Duration

5 weeks

!
Help SeeAround.me redesign their onboarding flow with new visuals, icons, and copy.

QUEST LOG

PREQUEL: THE ONBOARDING PROJECT

Before I transitioned to leading the newsfeed experience, I had joined the onboarding team during it's last leg. Prior, the existing team had performed all of the foundational user research that informed the direction of the project. As a result, my role in this team was more visually based. Our group of eight split the work to diversify our exploration of visual ideas along with copy content. We also performed rapid user testing to identify gaps in understanding and confusion.

A screenshot of the existing SeeAround.me app map view.

OUT WITH THE OLD

As a team, we decided to create new icons to align with updating the onboarding visuals. The old icon styles featured colors that were more subtle, and naturally toned.

We wanted to make sure that the colors used for the new icons were more vibrant than the current ones, with a more dynamic, friendlier style.

I put the icons I designed against a map for a contextual understanding of how these colors would appear in their native element on the map view. It was important that they stand out from each other and the map colors itself. And boy were there a ton of colors to choose from.

In the exploratory phase, I designed more loosely in terms of dimensions. Here we wanted to get ideas flowing and not worry about pixel perfection yet.

The handful of icons I tested colors and combinations with. Certain sets have different vibes associated with them and differ in vibrance and energy.

After we selected the styles that seemed to fit best as a collection, I optimized them from the smallest dimensions we were to use them at (24px) and balanced the visual weight accordingly.

VISUAL EXPLORATIONS

Our team of designers individually explored concepts for the onboarding graphics. This happened in tandem with the design of the new icons. These are some of my personal visual explorations, which I had a great time coming up with.

REWARDS

Pixel Wizard

+ Visual Design
+ Icon Design

Badge of Leadership

+ Leadership confidence
+ Team satisfaction

Architect

+ Information Architecture
+ Decision-making in ambiguity

DELVE DEEPER