Mobile iOS & Responsive Web
UX & UI Strategy

The Challenge

Mark Bartels, the CEO of StumbleUpon, had a clear vision and lofty goals for a different type of app. He wanted to provide a way for people to send positive energy, love, and good wishes to locations all over the world - from their smartphone. The question he posed to us: how can we use a digital platform to sincerely and authentically connect to the physical world?

The Manifesto

The Solution

Together, the Find & Form team designed a mobile app that met Mark’s vision. The Collective allows people to offer energy to a physical location and connect with others through the act of giving. While this app has social network characteristics, the concept of “following” or “liking” is not an integral part of the process. Rather, The Collective instills the importance of taking time to stop, to ground one’s self, and to focus on sending positive energy to a specific location.

The Process

After our kickoff, Stephen (our product strategy director), led the team in coming up with three different user personas for the targeted audience. Here is a basic summary:

Self-quantifying Sam
App Explorer, Life Improver - Innovator/Early Adopter Phase
Strategic importance: evangelist, help things go viral, potential to convert into regular, loyal users.

Spiritual Sabrina
Early Majority Phase
Strategic importance: this app has potential to play a part of their day-to-day life and spiritual practice.

Event-driven Edith
Early-Late Majority Phase
Strategic importance: represents large number of potential users, likely to use in post-v1.0 functionality.

Information Architecture

IA & Wireframes & Design Iterations

During the IA & wireframes phase, I thought about ways to make the experience better including the onboarding experience.

Location Priming Notification Wireframes Two Different Explorative Options

Final Designs

Along with creative direction from Jon, Jenny and I nailed down the design. We then applied it to the native app as well as responsive web site to view offerings on desktop or from email that’s been shared by social media.

One thing I learned: Customized maps would be a project in iteself and we ended up using Apple Maps for it’s useful icons that would provide context to users on the native app. For responsive, we ended up using Google maps.

Native vs Responsive Offerings

Additional Assets for Dev & QA

For this project, Jenny and I provided style guides and animations. Animations were essential to how people give offerings. We needed to give a sense of taking a moment to “charge” up your thoughts. To convey the experience to the developers, I ended up using After Effects to mock up the desired effect.

Offering Animation UI Elements
Data Trends
User activity increases during major events

Role

Senior Product Designer

A Collaboration Between

Design
Development & QA
Project Management
Product

Design Deliverables

IA & User Flows
Wireframes & Designs
Motion Graphics

Tools

Illustrator & Photoshop
After Effects
InDesign & InVision

Download Link

Download for iOS

© ∞ Yifan Frances

Work