Get Friend Recommendations

Sircles is a social app that helps you find businesses based on friend recommendations. Looking for an awesome sushi restaurant or a reliable auto mechanic? Find it on Sircles with the help of your friends.

Why friend recommendations? Because you’re more likely to trust friends and people you know rather than strangers who you’ve never met before.

Architecture

Before starting the redesign, I wanted to understand the structure and layout of the navigation so that everything can be accounted for.

The Challenge

The Sircles team needed a redesign of their current app because it was outdated and difficult to navigate. Everything from font, colors, layout and the structure of the app design needed to change. Also, users were confused when navigating through the app… certain elements led users to unexpected pages and certain elements did nothing at all. The app was lacking general consistency and coherency.

Wireframes

Wireframes were created to establish the groundwork for the redesign. I did not worry about typography, color or style at this point; only the layout and distribution of all the elements.

The layout was in desperate need of a redesign. I removed some of the clutter, repositioned some elements, and combined others. For example, the bottom navigation was cluttered and hard on the eyes. I moved both the back button and menu button up for more breathing room. Also, the logo on the home page wasn’t serving a purpose so I replaced it with a search bar. Now users can find any business quickly and right from the home page.

The Redesign

I wanted to move away from the outdated 3D design and instead go with a more modern and flat design. Light gradients and slight shadows were added to make the design more dynamic but still retain the flat design. The updated typography was changed to a more friendly and lighter one. The color palette was changed to be more pleasing and consistent throughout the app. The flat/wire icons were replaced the outdated ones and custom icons were created for the bottom navigation.