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