ifwe_coverifwe_cover

Helping if(we) grow social networks Tagged and Hi5 while looking for new market opportunities to create the next big social product to build meaningful connections for people.

ifwe.co  ·  Tagged  ·  Hi5  ·  Nod

YEAR          2014 - Current
ROLE          Creative Direction, UI, UX, IA

I joined the company after seeing a challenge, but huge opportunity, to transform one of the biggest social networks in the world from being a primarily desktop product, into a mobile era by re-designing both Tagged and Hi5 for handheld devices. 

After 10 profitable years, Tagged and Hi5 had gathered sizable amounts of tech and design debt. My main challenge was to simplify an out-of-date UI & improve UX to make it easier for people to connect, while not interrupting ~2m daily active users.

Adopting Standards

My first project was to modernize Android user profiles, re-think hiearchy, and shift focus from profile content to user-to-user interaction. Lack of design consistency had been an issue, so I recommended we'd adopt the (then) newly released Material Design guidelines for Android. This widened the scope for this particular feature, but has helped us to keep a standard for how we design and work with engineering. 

Tagged on iOS

The previous Tagged iOS app felt pre-historic. It was using old design conventions, ancient code-base, confusing navigational hierarchy and was an overall slow experience. Additionally, the branding needed an upgrade.

Redesigning Tagged for iOS

Update Branding

I replaced the pretty Illegible font 'Signika' with the friendlier 'Proxima Nova'. The Android Tagged app used a purple tone for call-to-action colors we called 'Plum'. I wanted to bring the plum color over to the new iOS platform together with a new, bright, complementing tone. We named it 'Mint'.

Simplify Product Hierarchy

The iOS navigational hierachy was flat, with 9 first-tier features presented as a grid of icons. Instead of letting you engage with features, you had to think where to go. Not good. I chose a more straight-forward and well-established route with a tab bar of 5 main features (with sub-features within).

Flow charts & Wireframes

With updated branding and a simplified hierarcy, it was time to create some low definiton mockups with clearly defined clickable elements. 

portfolio_work_ifwe_ios_wireframesportfolio_work_ifwe_ios_wireframes

Chat with emotion

Another project I was a part of at if(we) was a messaging app called Nod. I believe messaging should feel like a face-to-face conversation, and that's what is missing from other messaging apps on the market today. Design your personal avatar on Nod, and react with animated emotions to what your friends are saying.

Download Nod

YEAR          2015
ROLE          Branding, UX