seearound.me is not just another social media app. it's hyper-local news, delivered in real-time.
TL; DR
With an oversaturated market and new apps being introduced daily thereby causing the dreaded app fatigue among users, SeeAround.Me faces the challenge of singling itself out among many mobile news resources.
The idea seems easy enough. SeeAround.Me (S.A.M.) is an mobile app that gives users immediate news or happenings based on location. Posts are user-generated so they stay fresh. Like Twitter, Instagram, Reddit and Waze combined, the GPS-based feed shows category-based information that can be easily filtered.
My team of five product designers joined this project with a series of goals. First, help the original group define SeeAround.Me's unique value proposition (UVP), which would then give us insight on how to improve the product's user experience. We're especially excited to enhance SeeAround.Me's interface and visual design. We aim for these changes to grow user downloads, which in turn would make the community experience more dynamic and thus useful for the individual user.
ROLE: product designer / brand lead
Our transition team tackled on SeeAround.Me's product design in three cycles: (1) Onboarding, (2) Newsfeed, Posts, Profile and Settings, and (3) Rebranding.
s.a.m. cycles
SeeAround.Me's original onboarding
1. Onboarding
The initial research and usability testing showed the need to refine the current app's features. It was unclear what the app has to offer even though the initial onboarding portion attempted to explain it. The users were put off by the poorly rendered graphics and the signup felt too complex for the average user. The post categories were also confusing and often overlapped.
To fix these, we have decided to simplify the signup process and make the education portion more straight to the point with stronger supplementary graphics. We have also explored changing the categories.
It was a huge plus that our diverse team included someone with a Journalism experience! At the end of this stage, we were satisfied with the direct messaging: Get informed, stay informed, inform others. We lightly touched on the rebranding but decided to hold off on a major overhaul due to time constraints.
Satisfactorily, the subsequent user tests showed a clearer understanding of the app's features and easier signup process.
Updated onboarding with a clearer messaging and CTAs
2. Newsfeed + Posts + Profile + User Settings
Original newsfeed look
Screens reflecting redesign, round 3.
Tackling on S.AM.'s core features—newsfeed, user posts, profile and account settings—was a huge undertaking given the six-week schedule for the second cycle. However, these sections are incorporated with each other and must be addressed together to improve the app's overall user experience. My team took over from here and used insights from previous research and usability testings alongside multiple sessions exploring and devising user flows to improve the "guts" that make S.A.M.
For this round we have compared and analyzed similar apps to gain insights on current patterns that we can incorporate on the newsfeed. Since the founder has expressed the intention of going the React Native route, we opted for a cleaner, smoother format to the UI with both iOS and Android users in mind. (For one, we did away with the drawer nav to make the flow more seamless with either type of user).
Design decisions were made to make the application more intuitive, some of which were: differentiate the article posts on the newsfeed with filters and color coding, integrate bookmarking feature within the profile view, and rearrange the navigation to include the main sections a user is likely to use often. We did away with the messaging and product rating sections as they do not add value to the overall user experience.
3. Rebranding
The original SeeAround.Me logo is remarkably similar to Periscope's, however S.A.M. was actually first to use it!
The redesigned logo from round 2 connotes the user-generated aspect of the S.A.M. app.
The final proposed logo for S.A.M. takes from round 2, but is more sophisticated and streamlined for use on any mobile device.
Design guide
As Brand Lead I put together a design guide and component for use by the engineering team during the development process.
S.A.M. style tile
THE PROTOTYPE
Moving forward, we will be further refining SeeAround.Me's other features; namely: map view, gamification and updating the onboarding graphics. We are also considering a text-only newsfeed view. The application is currently scheduled to ship in early 2018 with two software engineers in tow.