CitysocializeriOS 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.

citysocializer Cover Image
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.

citysocializer Wireframe 01
Connector
citysocializer Wireframe 02
Connector
citysocializer Wireframe 03
citysocializer Wireframe 04
Connector
citysocializer Wireframe 05
Connector
citysocializer Wireframe 06
citysocializer Wireframe 07
Connector
citysocializer Wireframe 08
Connector
citysocializer Wireframe 09
Design systems

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.

Following the completion of colour, type and iconography I was then able to build a flexible and tangible UI component library in excess of 150+ responsive modules. This enabled me to create a system which was incredibly adaptable to various devices and screen sizes, including iPhone 5, 6 and iPads.

Grid System
4 columns | 55px width | 20px Gutter, Margin | 8px Baseline
citysocializer Columns
citysocializer Baseline
Colour
All colours used for the project
citysocializer Primary Colours
citysocializer Secondary Colours
Typography
All typefaces used for the project
citysocializer Typography 01
citysocializer Typography 02
citysocializer Typography 03
citysocializer Typography 04
Iconography
24px grid system, Solid Glyph
citysocializer Iconography 01
citysocializer Iconography 02
citysocializer Iconography 03
UI Components
Atomic design system
citysocializer UI Components
citysocializer Device 01
Final UI

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.

citysocializer Device 02
citysocializer screen 01
citysocializer screen 02
citysocializer screen 03
citysocializer screen 04
citysocializer screen 05
citysocializer screen 06
citysocializer screen 07
citysocializer screen 08
citysocializer screen 09