Mobile app for ANSWEAR.COM
In 2017, we had the pleasure of contributing to the development of iOS and Adroid apps for one of the biggest multibrand fashion retailers in Europe.
We’ve been very enthusiastic about this collaboration from the very beginning. We knew that it would be the perfect opportunity to learn new things and prove ourselves by designing an application that would be used by hundreds of thousands of users a month.
Challenge
ANSWEAR.com is the first Polish multibrand online store. The store offers clothes, shoes, and accessories from the world’s biggest fashion brands. Success on the Polish market prompted the brand to quickly expand to other CEE markets.
The project’s size and complexity set the bar high already at the very outset. In terms of UX and interface design, devising the platform’s information architecture and user flows also presented a considerable challenge. Some key issues that we had to solve already at this stage included designing intuitive navigation, means to filter the huge product list, and designing clear and straightforward product cards. Our most important task however, was designing the checkout process—ultimately nearly half of the time we spent on designing the application was devoted to the checkout process.
However, the above-mentioned issues were only the tip of the iceberg. So what did the process of designing such a complex e-commerce platform look like?
Kickoff meeting
A good organizational meeting is a solid foundation for the success of the project - it allows to develop a common language,setting goals, defining mutual expectations, defining what the final product of our work should be. Our kick-off meeting was also an excellent opportunity to discuss statistical data and knowledge from users' previous experience with the client's mobile website. This enabled the team, which was to work together for almost six months, to better getting to know each other.
Preparations
Before diving into any design efforts, we began compiling comprehensive research. We analyzed dozens of mobile applications released by the biggest fashion brands and online multibrand stores in search of best practices and nifty ideas. The solutions we had doubts about we later tested in a series of usability tests with users. Because the entire design process focused on user needs and user convenience (user-centered design), one of our first steps was to define our target users and develop UX personas.
Flow diagram
As we mapped out the user flows for the app, we needed to take a lot of different scenarios into account. Because designing a mobile app is markedly different from designing a website, at this stage we worked very closely with the developers, who made sure whether it was possible to implement the solutions we proposed.
Prototyping
The next step of the process involved preparing an interactive mockup of the application. At this stage, we put together a lo-fi mockup to visualize the idea and evaluate the solutions we came with in earlier stages.
User Tests
The above-mentioned tests were all performed in collaboration with users. We also ran tests at every stage of the design process—from early prototypes, through hi-fi mockups, and up to the finished product. Tests were usually performed using an app called Lookback that allows us to simultaneously monitor user behavior inside the app, record the users’ facial expressions, and interview them during app use.
Design
The app was designed using the software ecosystem outlined below. The designs were created in Sketch were later imported to Marvel, which we used to develop interactive hi-fi mockups. The final designs were then uploaded to Zeplin which exported them for use by developers and automated the drafting of detailed design documentations. Thanks to this particular workflow we were able to significantly decrease the time it took us to produce the final designs which, in turn, translated to considerable cost reductions for the Client.
Colours
Typography
Icons
The app’s design comprised over 150 individual, unique views—in order to maintain design consistency, we developed a style guide for the application, which outlined usage guidelines for typography, forms, buttons, alerts, and icons across the app.
In our design efforts, we focused primarily on making the individual elements of the interface as uninvasive as possible. Our goals was the emphasize the products and ease of use, so rather than run the show, design was ultimately subordinate to operational objectives.
Development
The development workload for the project was handled in collaboration with our friends from HoldApp. Work was arranged according to SCRUM precepts, with results demonstrated every two weeks at a demo meeting. The development portion of the project also presented us with a number of unique challenges.
Internationalization
Payments
Performance
Sync
Filtering
Checkout
Results
Within three months of the app’s launch in respective app stores, 40% of the company’s customers switched to this new channel from their previous preferred option—using the website on mobile and desktop browsers. The average value of the shopping cart in the app is over 25% higher than on the mobile website and nearly 10% than on the desktop website.
Summary
Mobile is undoubtedly the future of online commerce. ANSWEAR.com is committed to developing the channel further—it wants to invest in the application and tailor it to user needs in order to make shopping even simpler and more enjoyable. Our project was nominated for the 2017 Mobile Trends Awards in the M-Commerce category.
iOS
Android
Are you planning a new project?
Do you have questions?
Write to us
