Citysocializer

iOS Social App

The Challenge

Citysocializer was already established when I joined the team, however the app was fragmented and lacked refinement and users were declining fast. I joined Citysocializer with the intention of redesigning the iOS app, improving user experience, the design language and essentially increasing the number of users.

I completed an initial review of the app, combined with user feedback which proved that the app was missing fundamental elements, such as: functionality, poor user experience and a design language which had no consistency and lacked form and order.

It was agreed that I needed to start from the ground up, redesigning the user experience, testing and including valuable functionality and features. I needed to create a design language which was flexible, strong and consistent throughout.

Timeline
Jun 2014 - Sep 2014
Role
Junior UI Designer
Project Type
iOS Social App

The Solution

I started the redesign by firstly creating a document of all the essential functionalities a Social app required, such as messaging users which the existing app lacked.

Once I had compiled a list, I then began conceptualising ideas and possible user flows. It was then I transformed these rough sketches into low fidelity wireframes which would be used on basic prototypes for user testing sessions at Citysocializer HQ.

The user testing feedback was invaluable and proved that some of my flows worked well, and some needed refinement and adjusting which was easily achieved, and this allowed me to then begin developing a design language.

Design System

Once the low fidelity prototypes were approved, I then began to develop a tangible and sophisticated design system. Due to the release of iOS 7, the introduction of flat design and the removal of skeuomorphism I wanted to create a language that would adapt to Apple's ecosystem.

Citysocializer already used yellow within the branding, and so I decided to take that further and include this within the UI components as the colour exhibits psychologic qualities and is perceived as warm, friendly and positive. This was complemented with a rich navy blue as its a tertiary colour to the yellow, but also indicates qualities of trust, strength and communication.

I then experimented with various typefaces, and decided I wanted a primary and secondary typeface which could be used for details, headers and titles. I chose Brandon Grotesque for the primary as it's clean, sharp, minimal and legible for devices. I complemented this with Rooney which is a serif typeface with similar x-height to Brandon grotesque which looks visually appealing.

The current app was using iconography throughout, however there was no conformity in style and some of the icons were outlines whilst others were solid or glyph form. I decided to design an icon set for the app in a consistent form using a 24px base grid, and 2px corner radius which gave the icons a sociable and helpful demeanour.

Grid System

4 columns | 55px width | 20px Gutter, Margin | 8px Baseline

320

320

4 Columns

8 Pixel Baseline

Typography

Citysocializer Brand Typeface

Brandon Grotesque

Rooney Bold

Colour

Citysocializer primary colour palette

#FDB814

#566DD6

#D4D4D4

#EFEFEF

Iconography

Custom glyph iconography set

UI Components

Atomic components

Interaction Design

I wanted to add motion and interaction to the Citysocializer app which reflected the personality of the company, bold, fun and energetic. I designed the screen and CTA transitions to be as smooth as possible and to feel natural and fluid to a user.

Browse Socials

I wanted to ensure that browsing for social events was simple. After observing users within user testing I noticed that discovery was a one handed task therefore wanted the user to be able to navigate with one hand with scroll and swipe gestures.

Join Socials

Joining social events couldn't be easier, and our user testing showed us that people were mostly interested in the time of the event and location, therefore making it easy to access all the vital details.

Host Socials

Hosting event was created in as little steps as possible so users could host an event easily. Using motion and interactions to enhance every step of the experience.

Final Screens

The redesign was a success, and I had transformed the Social app into a professional, elegant and enjoyable experience which its users approved and adopted to quickly. I was able to improve functionality throughout the app and overall experience, by ensuring features were kept simple and easy to operate.

The body copy and flows were updated to allow the users to get from A to B in the most efficient and logical way. The use of colour, type and iconography were all updated to a fresh, bold and slick form. This enhanced the app and experience, transforming it into a mature and solid app serving 400,000 users worldwide.