How we redesigned Foursquare.

We have recently released the latest edition of Foursquare, which is an important milestone. In order to complete this version of the app, we carefully polished, attentively designed, accelerated development, now you can download. This development experience is very rare, for this reason I will be the redesign and development of the process of all recorded down to share to everyone.

Earlier this year, we began to re-examine what we have achieved, and the impressive technological build-up. Foursquare let friends keep in touch to meet, help users find the destination, for this we have to do everything possible to cater to these two user needs, so that the function of complementarity. However, with the passage of time, the user's needs have changed, we look forward to a better personalized search experience, where all the check-in has been outdated, in the privacy and personalized environment more and more users do not have the past so willing to share the location.

After careful consideration, we think it's time to take the next step, separate the existing products in a step-by-step manner, according to brand characteristics, marketing, feature sets and interfaces, to break down the current foursquare into separate applications that can assume different requirements.

So we list all the problems and solutions and name the project "Batman and Robin," which will be the internal code for the next two different apps. The Foursquare code for the Future is "Batman (Batman)", and the new application swarm's internal code is "Robin".

New Foursquare original Whiteboard sketch

Analysis, wireframe, prototypes, and reports

While our research and development teams are exploring and studying with external participants, the design team is also observing and analyzing where to do well, which parts are not mature enough to do better, and to start setting a new style for Foursquare. In the early stages of exploring the design style, we tagged the desired features of the app to the Moodboard. In our settings, the new version of Foursquare should be intelligent and practical, magical and full of fun, trustworthy. So the design team tried to make some more interesting attempts on the color scheme and laid the groundwork for the app's navigation patterns and information architecture.

In the first days, we spent a lot of time discussing, drawing new Foursquare sketches, adjusting wireframes and prototypes. We meet regularly with interest-related organizations to showcase the new version of the design progress and adjustment details, refine the idea, in the collision as much as possible into the ideas and feelings. In the endless trade-offs, we will streamline the 90% of ideas, the vast majority of ideas will not be long-term retention.

Sometimes, such things are difficult to accept. We carefully design, explore, many ideas have been repeated scrutiny, but ultimately only the best ideas can break the layers of barriers, preserved.

Our first big project was to quickly build a usable Android version of the app prototype. We all think this is a very good direction, even if the prototype is still relatively rough, still need to be polished. Let users interact with this interactive early prototype, and the data and experience we gain from it are invaluable. In the process, we found the problems lurking in the new features and user experience design, looking for answers, evaluating the effectiveness of different solutions, and perfecting this early prototype.

We will use the results of the research and our preliminary design and assumptions combined, through multiple iterations, gradually improved. In the process, the design team also uses tools such as sketch and Keynote,web versions to showcase all the features of the product to all employees, research participants, and to explore the best solutions together. We've been doing this a lot of times until we get the whole app running to the top. After the release of the product, we will continue to such meetings, grinding products. Think of doing it, and we will never let the idea just stay in the brain and discuss.

Fsbatmanwatermeloncolor, Fsbatmannavycolor

Brand Remodeling

At first we were going to change the name for Foursquare, but as the product improved and the application changed, it didn't. However, in this process, Foursquare has a new logo, the old logo used the location sign symbol, and the simple character logo as if it was a relic of the previous era, so the new logo will combine the characteristics of both intuitive and rich meaning. After the new logo design, also let us cheer up. The process of designing new logos with the help of moodboard on the walls of the office is very interesting and rewarding.

Early visual design and user feedback convenience stickers

A never-ending vision Design quest

Here, experts specializing in information architecture, user experience designers, graphic designers, brand promotion experts, visual designers, interaction designers and other fields of designers and experts in order to work together for the new Foursquare, the team is remarkable. In the process of exploration, we try to explore a wider and uninhibited visual design, in a sufficiently rich probability, and then gradually shrink, and to a more easily accepted by the public and love the visual image. This can take a lot of time, and in the process, many versions will be spawned.

This is an incredibly fulfilling visual design process.

Once we finalize a new feature, or soften a complex chunk, we begin to design a visual system for them. This design process starts with the previous style guide, which covers almost all aspects, including color, image, style, usage specification of the picture, and how buttons and components are used. On this solid basis, the design of the visual system will not get out of control, the pace will be consistent, and different designers will be more coordinated and efficient when dealing with different parts of the app.

When we started designing the whole app color, the color scheme we designed for the brand started to glow. After a simple collision, we all fall in love with the watermelon powder this color, at the same time, we have tried to collect the data also come in handy, they can help designers to circumvent the hidden problems and improve the design, the new version of Foursquare style taste is so. Since then, users in the setting of taste and personalized when there are enough unique choice of options, and can quickly complete the match. Why can users quickly find what they want? Because the solution is tailor-made for them!

A big project like this will have a pain in the final stage, and you'll feel excited, anxious, nervous, and excited. We've all been through these emotions. In order for Android and iOS version of the client to be online on time, we spent a lot of effort to focus on product details. We poured all our effort and soul into the two-version client, which is almost the culmination of our team collaboration.

The past 8 months of experience, now looking back seems to be very memorable, extremely fun. Each of us poured into the effort, and finally achieved the product, and transformed into a tangible benefit. I have to say, this is the new beginning of Foursquare.

At the company's regular meeting on December 10 last year, we showed a PPT. In the PPT, we said that if the new product can not let us suppress the excitement, it will not release, do not need to go online. Today we are finally able to use it, and our entire team is excited and confident that it will succeed.