21.02.2015
Goodwin

Goodwin is the mobile service of visual search of goods that allows you to find and order any product simply by photographing it through an app.

Inputs

With the development, Goodwin began to turn into the catalog of goods. Focus has shifted from scanning to the e-commerce. The team wanted to extend the scope of the application and to avoid being an ordinary catalog. Within the new strategy, scanning is more than the format of e-commerce.

First of all, Goodwin is about the latest technologies of visual pattern recognition and new opportunities of consumption of goods, services and information, and augmented reality .

Goodwin team turned to the NewIdols for assistance in the implementation of a new vision. Our first task was to improve the existing scanning experience by redefining user scenarios. It was necessary to return the user focus on the visual recognition, to make it more convenient and easier. The second big challenge was to create a model of consumption of advertising content and augmented reality.

Process

First Step

We started with an analysis of the shortcomings of the current version of the mobile application. We have already had the working scanner in our hands, and we began to carefully study the experience of visual recognition.

The application had two main problems: the lack of control over the scanner and the lack of help.

The user did not always understand what was happening because the visual recognition began suddenly, without user's action or consent. Since the visual recognition is not usual experience such as text search, for example, it requires a lot more self-explanatory and clear scenarios. Meanwhile, in the application, tips appeared unexpectedly and sometimes more hindered than helped. People did not have enough information about the scanning process and the application itself with all the capabilities.
We were well aware that control is one of the basic needs of the user. Based on this understanding, it was necessary to design the interaction so that users would be always able to control their decisions and results.

Paper Skeleton

So, we have fixed goals and objectives and have continued to work with the paper sketches. At this stage we have created the basic information structure of the service. This preliminary draft enabled us fast enough to create a structure and navigation of the application, to highlight the key screens and to form product specifications.

Wireframes for iOS

Interactive Muscles

Interactive prototype is a logical continuation of the paper sketches, with more detailed approach to an application development. We thoroughly worked out the mechanics of the application and tested different user scenarios.

The first working version was the version for iOS. We've also made ​​a prototype for Android devices. Interactive prototype was the basis for the parallel development of two versions of the application.

Good design documentation is always converted to the specification for the further work of the development team.
Wireframes for Android

Instructions for use

So, after a lot of brain-storm, meetings and discussions we had both paper sketches and interactive prototypes on hand. What could be clearer than a prototype? But in practice, if several teams work on a project, there is always a room for some issues.

This problem popped up during one of the presentations of the prototype. We carefully answered every question and to clarify all the details , until we realized that we needed more system approach. Therefore we have created a document that describes all user scenarios in detail, represents all the goals and objectives of each screen and the suggested solutions. This approach has led all the teams to a new level of understanding of the product.

Graphic Skin

As the legacy of the previous version we had got a lot of green and white colours. We've decided to develop the given style. There was lot's of space in the graphic interface, but there were absolutely no other colors, needed to create the system of accents. That's how the purple colour appreared in the application. A little later, the blue colour was added, as the strongest accent.

Despite the fact that we have introduced several additional colors, the most important thing for us was the content. Visual design turned out simple and concise, built around the content.

Solutions

The First Acquaintance

Onbording had been undeservedly forgotten in the first version of the application. But it is a story about the new service that allows new user to quickly orientate themselves in the application. We made acquaintance with the service not very visible and intrusive, in order not to abuse the user.

Acquaintance with the service is just one element within a complex solution to the problem of hints and help shortage. Other elements are onboarding, context clues and online support.

Floating Button

The main function of the application is scanning. We used a floating button to focus a person's attention and to enable quick access to the scanner. And the rest of the navigation we've put in the hamburger menu.

Floating buttons have appeared long before the 5th version of Android. The most famous example is Foursquare, that brought floating button to the mass market. In our solution floating button perfectly fits the new Android guidelines and is pretty common thing for iOS.

Events Feed

The most important screen after the help is the events feed. In the feed you can see scanning suggestions, current promotions and other interesting things. This screen is a help of sorts and it motivates the use the service.

Scanner

The new version of the scanning begins only with the user's consent, after pressing the button. We have provided the opportunity to turn the flash on, along with the recognition of photographs from the photo gallery. In addition, the scanner screen has interactive hints, that are displayed by one at a time, without overloading the user with information.

Interface Icons

Scanning Results

Scanning results can be not only products, but also other kinds of content, such as video or augmented reality. Each type of results is equipped with the icon for the sake of easier identification.

Scanning results are opened in a modal window, that on the one hand holds a person in the action stream and provides a maximum amount of information and features, on the other hand. You can watch a video or buy goods without leaving the scanner.

Support

We have made support a separate menu item to facilitate user access to it. But still the main use case is when an unplanned situations appear. In our case, a vulnerable point are the scanning results. We placed the supoprt entry point directly on the scanner screen, so it's available until the goods are recognized. It displays a context and provides a simple and bright chat.

Shopping Cart

We included registration and login in the checkout process in order to simplify shopping.