Selfless

Selfless is a mobile sharing and gifting app I designed for Justin Higgins. The idea behind the app is to allow people to share their favorite things with people in their community. My role was to do the initial branding and product design (visual and UX), as well as a good amount of ideation and feature specification.

 

Brand book

The purpose of the Selfless brand book is to serve as a style guide for all the elements of the product. This includes concrete branding parameters like colors, logo and logotype, typefaces, and text sizing, but also includes intangibles like brand personality and messaging. Lastly, it shows examples of UI elements, as well as examples of the 3 primary building blocks of the product: people, groups, and objects. These serve to establish visual and verbal consistency, but also makes sure that everything coming from Selfless rings true to Selfless.

 
 
 

These are my notes and sketches relating to branding. The logo of the earth rise was something the founder, Justin Higgins, had specified prior to all other brand work, but I worked around that idea to develop the other visual elements.

This first scan shows my exploration of the pros and cons of different typefaces and the criteria by which I was choosing (legibility for multiple devices, flexibility in terms of weight choice and true italics/bolds, cost and attribution, and level of friendliness or trustworthiness). The final draft of the brand book further explicates the choice of Open Sans for the mobile body typeface, Exo 2 for the display typeface, and Georgia for the web body typeface.

 
 
 

Here I was playing around with different ways to display UI elements, such as lower-level tabs, card representations of the 3 core "blocks" of the app (people, groups, and objects), and hybrid views that include displaying a person with a part of their collection on Selfless. The square frame for objects and circular frame for people is based on a UX pattern users may have picked up given the current design paradigm. The groups are displayed as rectangles to represent both the horizontal nature of grouping, as well as to leave room for longer community names.

 
 
 

This third sketch informed the visual language of the app's icons. I wanted to instill a certain liveliness and jubilance in these small symbols, something that echoed the kind of awe a child feels before opening a birthday gift. The resulting icon language has rounded, bubble-like forms.

 
   

 

 

 

Selfless's founder also wanted some topic pages through which people could find groups and items relevant to them. Here are my v1 and v2 designs of these icons. The first iteration was much more complex, as a result of trying to represent categories that encompassed dual subjects, like sports and outdoors or photography and film-making. The final draft is much simpler and more stylized.

 
 
 
 
 

Navigation

These sketches show my thinking regarding the app's navigation. I wrote down the debate between having a hamburger menu and having tabs on the bottom for this specific app, and decided to go with tabs on the bottom in order to make each part of the app more accessible, and to flatten the overall information architecture. This prioritizes exploration of features over absorbed content consumption in a single, emphasized page. 

 
 
 

I also thought about adding native gestures and hidden "cabinets" that swipe out from the left or right of the main screen. I decided against this, preferring to save the right-swipe gesture for the always useful back function and leaving the left-swipe gesture empty for some stability.

 
 
 

First Time User Experience

These are sketches outlining the experience for a first time user. I designed it around getting the user to engage with the app on a basic level. 

 

One challenge was finding an appealing way for users join their first group, a challenge I grappled with below. The sketch shows two very different ways of navigating this process, a community map and "Madlibs". The community map would cluster similar groups together and rely on a user's knowledge of map interfaces, where dragging moves the view around and pinching/double-tapping act as zoom functions. The "Madlibs" approach is a zanier way to make text input less laborious by essentially making it into a fun, personal statement.

 
 
 

This is the first time user flow that I presented:

Some of the key input needed from the user to complete a profile is choosing a username and password, entering an email address, and uploading a profile picture. I was on the fence about this last requirement, but felt that this was crucial, given the startup's mission of creating a trusting community space. Justin and I decided to leave the specific experience for adding groups (shown in the sketch above) until there would be enough groups to populate any such scheme. As such, the list of groups presented to the user are based largely on geography for now. 

The final step in the on-boarding process is to share something the user loves with the larger community. This reflects the key give-and-take concept behind the product. Something I did not consider at the time was that the good the user added might not necessarily be appropriate for the group they had just added. If I were to iterate on this first-time experience, I would not require that step in the "add a good" process. 

 

More Sketching

This first sketch is my breakdown of Selfless's goals and the user's goals, and mapping them to features in the app. It was also good to have this on hand to look at throughout the design process to make sure that I am always keeping these core ideas in mind. 

This sketch works out three possibilities for how search results are displayed. I decided to combine the second and third. There would be tabs that break down results by category, but also an All tab that shows a mix of users, groups, and goods. 

The second sketch is working out how the feed can be filtered or broken down. It also features some initial sketching of where each tab of the lower navigation leads. 

 

This sketch works out the "All" tab of the search results in greater detail. I tried to balance between the busier display results, which showed more information, and the cleaner, more-streamlined view. 

 

User Flow Map

This comprehensive flow map details the different pages of the app, as well as various click and hover states. Right-click > Open Image in New Tab to see the details.

 

WEB

I also designed a web experience that was a pared down version of the mobile app, largely based on the building blocks for various users, groups, and goods. The main goal for the web pages was to drive engagement to the mobile app.