Midweight UI Designer. London 2014
Citysocializer was already an established app and brand when I joined the team, however, the app was fragmented and lacked refinement and users were declining fast. I joined Citysocializer to redesign the iOS app, improving the user experience, design language and reigniting the excitement for this social app.
My first challenge at Citysocializer was to understand where the problems were and decide how I could solve them. It didn’t take long to identify huge problems with the experience in the app, and also the outdated and unpolished visual language throughout.
I often spoke with active members of Citysocializer at the social events which they hosted, so I could get a much better understanding of what they wanted from the app. They mentioned often the app didn’t look or feel very professional, and users found it difficult doing simple tasks within the app.
I mapped out the entire app to see where potential problems occurred and how I might solve them. It also helped to identify the scale of components that I would need to build for the new design system I would be creating.
Once the low fidelity prototypes got
Citysocializer already used yellow within the branding, and so I took that further and include this within the UI components as the colour exhibits psychologic qualities and
I then experimented with various typefaces, and decided I wanted a primary and secondary typeface which could would be 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 icons were outlines whilst others were solid or glyph form. I designed 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.
Having mapped out the entire app and user flows I could build out a flexible and consistent UI component library in Sketch. This made it very efficient for other designers on the team to build screens but also made the work flow from design to development for efficient.
Several months, many iterations and lots of user testing with citysocializer members, we finally released the updated app. I redesigned Citysocializer from the ground up including a change in user experience which made it easier to achieve the desired actions. The UI is clean, modern, refreshing and on brand and reflects a fun, young and innovative company.