2011

eCommerce Mobile App for 3 Platforms

In early 2011 Grupa Nokaut trusted me with one of the most exciting projects of my career – creation of a mobile platform for 3 operating systems (Windows Mobile, iOS, Android).

Innovative product idea, high strategic value, business partnership with Microsoft and simultaneous work in 3 different design languages – this project was as challenging as it was satisfying.

read this story

Context

Web products of Grupa Nokaut had been dominant (2.5 million unique visitors per month in 2011), but the company didn't have much success on the mobile market. Nokaut's mobile offering, at the time, was limited to a dated mobile version of the core service built for old cell phones. This service was highly popular couple of years earlier, but with the growing popularity of smartphones, users expected "richer" experiences.

In 2011 the company decided to increase investment into the mobile eCommerce market. I had been asked to lead the R&D and User Experience efforts. The idea was that Nokaut should build an app connecting online and offline shopping experiences. The user could quickly compare prices in brick-and-mortar stores with those listed online on thousands of eCommerce website.

Due to the strategic partnership with Microsoft, the first target platform had to be Windows Mobile (the precursor to Windows Phone). Windows Mobile was pre–installed on some of the most memorable smartphones of that era – including HTC Diamond. Microsoft's mobile OS followed a paradigm of the pre-iPhone mobility. The system offered a scaled–down version of the desktop operating system. Most of the Windows Mobile devices had to be operated with a stylus. Interactive elements were typically small. Lots of actions had to be performed from the contextual menu (the equivalent of the right–click menu on desktop) and of course there was the notorious start menu.

Limitations of the native design language had to be respected. We had to comply with the existing standards to create a comfortable experience for our users. Unfortunately, the user interface and experience guidelines for Windows Mobile, at that time, were very basic. To understand the platform, we had to document and catalog design patterns from the operating system and the most popular apps on the platform.

Windows Mobile had also certain technical limitations. The platform was not ready for all the advanced features that our early market research proved essential. Most notably–the key feature of our planned experience – the scanner of product bar-codes.

To ease the pain of comparing prices offline and online, we wanted to build into our mobile app a scanner that would allow users to quickly scan bar-codes of physical products and browse through prices listed online. Thanks to the scanner users could quickly find what they were looking for without any typing. Our app supposed to be used in physical stores, so everything that would limit the typing was a much desired accessibility feature.

Bar-code scanner–the key feature of the app had to be removed from the Windows Mobile version. We felt disappointed, but also accepting of the reality. Once the Windows Mobile app moved to development (development has been done with an external partner), our team started to work on iOS and Android versions simultaneously. Thanks to the superb documentation of design languages for both platforms, design work was significantly more comfortable and faster. Reaching the desired level of an engaging experience that felt "native" to both Android and iOS users, took less time than R&D and design work for Windows Mobile.

Android and iOS didn't have the technical limitations of Windows Mobile, and we were able to add the much–desired scanner feature. We were finally able to fulfill our vision.

First tests, showed that users love the scanner and treat it as the main way to interact with the search engine. We've adapted our designs accordingly, and the scanner took the central place in our interface. We've also decided to change the name of the app to Nokaut Skaner to emphasize the core value.

After months of work, the app entered the market to much applause. However, our job was not done. We've started to analyze the data and optimize the experience until we've met all of the business objectives. After several iterations and making all the details right, the app became quite popular. However the impact on revenue was smaller than expected. The CPC (cost per click) business model wasn't the right fit for the mobile market at that time. Very few stores, that Nokaut Skaner redirected users to, were mobile ready. Our app was used as a tool to check prices in the store, but the purchases were done at home.

Screenshot of Nokaut Skaner application
Nokaut Skaner with a central position of the scanner button ("skanuj" means "scan it" in Polish)

The Process

The chart below represents the process for this project. It's an accurate representation of how my team and I used to run design and product work at Grupa Nokaut at that time. An important, and unique, part of this particular process are the field tests in local supermarkets. The goal was to observe user behavior in the real environment. These studies informed many of our design decisions.

Chart showing the process used in the project

Results

  • The app quickly became popular among Grupa Nokaut users and became the top 5 eCommerce mobile app in Central and Eastern Europe.
  • The app didn't contribute significantly to the revenue generation for the business. The CPC business model didn't fit into the mobile experience.
In mobile design – context is king. You can't design a great mobile app that will be used 'everywhere' by sitting in front of a computer in the office.

Lessons Learned

  1. Products built just for the sake of a business partnership are challenging to turn into success (Windows Mobile 6.5 app had barely any usage).
  2. Mobile design requires an extreme focus on the overall context of use (we've learned a lot by observing users scanning codes of products with their phones in real stores).
  3. Working with platform constraints can lead to creative solutions (e.g., we've enlarged the primary action button using the padding of the tab bar).
  4. Not every business model fits every use case (CPC business model wasn't a match to the mobile eCommerce use case).
  5. Working with the external development partners requires clear documentation, frequent check-ins, and a great deal of relationship building.

Tools

  • Axure (wireframing, prototyping)
  • Notable (comments on visual design)
  • Photoshop (visual design)
  • MixPanel Flow
  • Google Analytics

More Projects?

Ready for more of stories? Choose the next project below.
2009

Conversion Optimization

In 2009 I was trusted with the optimization of critical elements of the Nokaut.pl product page. Together with the engineering team, we've worked out a series of hypotheses based on factors affecting human attention (contrast, color, movement, pattern...) and we've performed a series of multivariable split tests. The result? 24% increase in the conversion rate.

read this story
2010

Paper Prototyping Redesigned

The story of the notepad that changed my life

read this story
2011

Homepage for 2.5M People

In 2011 I led the process of the redesign of Nokaut.pl Homepage. At that time, Nokaut.pl was attracting 2.5 million users a month and the owner of Nokaut.pl – Grupa Nokaut was preparing their IPO. An intense project!

2011

eCommerce Video Portal

For over two years I worked in the R&D Group at Grupa Nokaut. We were tasked with coming up with new product ideas that address the most critical strategic problems of the business. One of the projects that we realized in 2011 was Nokaut.tv – the eCommerce Video Portal that quickly attracted over 100,000 viewers. I had a pleasure to lead the design and product development process.

read this story
2015

The New Design Editor

In 2015 UXPin was an established design tool serving over two thousand companies. We've just raised our Series A (led by True Ventures and Jeff Veen – former VP of Design at Adobe).

We knew that this is not enough. We knew that we have to do even more to realize our mission and help the design tools industry move forward. Soon, we've started a design process that changed the entire industry.

2018

The Open Source Adventure

Since 2012 I'm operating as a full–time CEO of a growing startup – UXPin (over 50 employees, profitable). Despite that, I've never stopped being a designer, coder, and a product person. To relax and contribute to UXPin and the overall design and engineering community, I tend to take on side projects.

In 2017, after talking to a bunch of friends working on design systems, I decided to devote my weekends to the creation of an open source repository of analyzed design systems.

For two subsequent weekends in January 2018, I designed and coded (React.js and Node.js) the repository. The popularity of this project exceeded my most optimistic expectations.

read this story
2019

Designing for yourself is tough

I've spent way over a decade designing all sorts of products, but hardly ever – brand identities. Nevertheless, I have a deep affection for the very special connection between art and storytelling always present in great brand design.

When I decided to build my personal website, I knew that this is a great opportunity to define my brand – my story, aesthetics and message with a holistic design process.

I quickly became my own most demanding client and yet... I thoroughly enjoyed the process of designing Treder Design brand.

read this story