Teambuy

E-commerce App

Redesign and Relaunch of E-commerce Mobile App

- The Problem

The overall design needed an update both structurally and visually. The backend would often stall and the app would crash on its loading screen.

- The Inference

A complete overhaul would be vital in order to meet the growing use of ecommerce applications.

- The Method

The app was redesigned, from user experience, to user interface, to visual aspects. The backend was built to support the new design. In the interim, the current app was tweaked so that it could be operational.

- The Result

The new app design increased mobile app sales by over 230%. Within 2 years of the new application launch, 61% of all sales were processed through the app instead of on the website.

Client /

Teambuy

Industry /

Ecommerce

Duration /

5 months

My Role /

Research

UX Design

UI + Visual Design

Team /

Design, Direction: Jen Sepso

PM, CEO: Ghassan Halazon

Lead Dev: Ben Mulligan

The Problem

Overview

The Teambuy mobile application, in its initial form, was essentially unusable. It would either stall upon loading or crash (usually both). On the rare occasion when the app did load, the dated design was confusing and only allowed for one function— to view purchased deals. In order to purchase a new deal, the user would be led back to the company's website on an available browser to complete the full check out process. All transactions were made on the website.

The app was clunky, poorly designed, relied on the website for functionality, and had a 30% chance of actually working. The user interface was not intuitive and also did not reflect the new design of the website.

The Teambuy app left many users dissatisfied as it fell flat in regard to its competitors’ applications. But when changes were implemented, they were usually minor bug fixes. I recognized that e-commerce was soon going to be mostly mobile, based on recent studies documenting the rise of smartphone usage. I believed that a working app would be imperative for Teambuy but a brand new one would be ideal.

The Inference

Project Scope

Prior to coming aboard the project, planned work outlined more superficial changes to the facade of the app that had been currently in use. But as user numbers fell and customers voiced their disappointment with their mobile experience, it became clear that the app needed to be rebuilt from the ground up.

Around this period, Teambuy had acquired two new subsidiaries that they were in the process of integrating into the company. I had been hired to lead the branding and design of these new acquisitions, but as my workflow slowed, I turned my attention to the mobile app.

I created a proposal for the elements that I believed would be beneficial for the application. I presented a 3 phase timeline which broke down the design + development project scope into three main phases;

Applying immediate tweaks to the current application as is, specifically UI/Visual related in order to improve as much usability as possible. And if possible, the developer would par down the code and troubleshoot in addition to making the tweaks.
Design an entirely new application, with a new user experience blueprint to adapt interactions that would be discussed upon. The app would also be reskined to match the company's current branding.
The development of the app and its subsequent launch.

It should be noted that although the tech team generally applied the agile method to the main site, this comprehensive application overhaul was a new venture for both the management and tech. This is why I proposed a more traditional Design Thinking process. It was a method that most closely resembled the means by which elements were shipped out already, so there would be no learning curve. As well, since we were a small team (as in, myself and the dev, Ben), we didn't have the resources or time to do extensive and constant testing.

Before the Redesign

AFTER the Redesign

Target Audience / Users

The target audience was the same audience as website users, but also slightly younger. Research complied for site development indicated that parents were a significant part of the consumer audience. The demographic was also inclusive of younger patrons based on the items up for sale. Ideally, Teambuy would have liked to hit a general audience but also wanted to appeal to social media users, so as to increase social media traffic. And, of course, they wanted to attract customers who were currently patrons of Teambuy's competitors, including Groupon and Living Social.

Research

Teambuy dedicated much care and resources to monitoring the company's audience, via the sales team and the customer service department. This close study often dictated the direction of the types of goods offered on the site as well as partnerships with local vendors.

The research I conducted was focused on finding patterns in IA/UX/UI in popular, existing apps. I looked at other group buying apps including Gilt and Groupon as well as some Canadian ones. I also looked closely at the Amazon application and used it as a model for best practices. I looked at mobile sales patterns and e-commerce sales patterns, researched press releases and news articles. I also referred to online design blogs such as pttrns.com for guidance and inspiration.

I sat with the developers who led the website e-commerce component and mapped out a user flow of its process. I then adapted the user flow, applying similar steps, especially the transactional stages, to create one for the app. I also integrated my findings from my research when applicable.

My visual design research resources included dribbble.com and researching the work of notable Toronto based agencies such as Sid Lee.

The Method

Process

Understanding Teambuy's user engagement was an integral part of the design process. In order to create the most intuitive and user-friendly product, the process began with identifying several major objectives that a user may have when interacting with the application. These objectives were defined through mapping in-bound flow patterns of users in the previous app, studying user flows architected in competing ecommerce applications and reviewing customer feedback. Due to Teambuy's commitment to customer support via a 24 hour phone line, social media and email, feedback was plentiful!

Instead of designing individual pages and interactions, which would have essentially been less of a structural change and more of a facelift, I approached the project by designing custom user flows in order to optimize the existing user experience. These flows were determined by both the needs of the user and the company, which, curiously enough, once aligned, were not all that different from one another.

I began with a rough sketch of the various user flows / a user journey of the customer. From there, I developed wireframes based on every screen in each flow/journey in illustrator. I consulted with the developer on functionality and sought feedback on the visual design with website's art director. When transitioning over to the visual design phase, I implemented the branding that I had developed for the company's website.

In the interim, the smaller tweaks to the current app included general content simplification, adding visual cues to bring attention to deals or specials, and using color, spacing and typography to create more of a visual hierarchy.

Throughout the project, I worked closely with the company's in-house development team to ensure cohesiveness between the planning, design and build-out phases.

The Results

Teambuy's mobile application redesign project involving a massive overhaul of the previous application was hugely successful. The new e-commerce application provided Teambuy customers with a virtually seamless shopping experience akin to making transactions via desktop computer. Sales on the mobile application were speculated to have increased in transactions by 89.4%. As the marketplace pivoted to e-commerce via mobile, Teambuy was able to provide a viable application that would maintain its usability at the convenience of its customers.

New elements/Updates in V.02

Geolocation fixed and updated
Gift giving
All transactions stages on app only (previously would lead to website)
Collection of all purchases buys, categorized by used/expired/etc
Comprehensive filtering option
Intelligent Searching
Sliding menus (hamburger menu update)
visual design matches current company and site brand

Troubleshooting Challenges + Constraints

The greatest challenge that I came across during this project was the fact that I was the only one person on the team who had experience with mobile applications and responsive web applications. The mobile developer who had been hired had mobile gaming experience and was used to building gaming apps based on storyboards, not wireframes. As you can imagine, there was a was a learning curve that had to be overcome. As well, I did not have any other support in regard to designing for functionality and usability— my art director and all upper management did not have any experience designing and shipping a product. Where did the initial application originate? I was told that it had been outsourced over two years ago to a company who had placed an intern as the project lead. At the time, it was functional, though it was not the prettiest app in town. But as more updates were made to the IPhone IOS and other smartphones were joining the fold, the app began to crack because there was no one to support it. This is why it took so long for any sort of update to be applied to the application.

Over the course of the project, I took on several responsibilities in addition to designing the product. These included researching mobile e-commerce patterns and integrating best practices into the final product as well as establishing the framework of the app with numerous wireframe sketches and storyboards.

My methodology of user testing was completely organic. I shared the designs and prototype in-house, as well as amongst a few other people outside of the company. Much later, I found out that this is called "guerilla testing." (Who knew?) The feedback I received helped to fine-tune the functionality and visual design of the application. Once the app had been shipped out, we relied on user feedback in the app store and social media to address any outstanding issues.

Key Takeaways (and a life lesson!)

Teambuy's mobile application redesign project involved a massive overhaul of the previous application. The new ecommerce application provided Teambuy customers with a virtually seamless shopping experience akin to making transactions via desktop computer.

This was my first project in terms of leading and spearheading a product project. I was brought on to rebrand the website, and also do a second rebrand phase when an acquisition was made public. I found myself making considerations of the application overall design when I was asked to make some minor tweaks (creating buttons, etc) and this was the catalyst to the application’s redesign. During this time, around 2012–13, apps and product design were still in their infantile stages. This explains why the Teambuy's e-commerce app was left on the back burner.

In this wild, wild west of product design, I improvised a lot, a.k.a. flew by the seat of my pants! My experience in interactive design, experiential design and experiential marketing were what guided me through the process of the project. I thought of building out the app in the abstract, akin to world building. The wireframes and the user flows were like maps, creating context for the user as well as gently guiding him along the way. In retrospect, with the resources available now and with all that I have learned since, I definitely would have approached the project with a more agile-lean hybrid process. Also, the phase that took the most time for me was actually all the meticulous wireframing! I had hundreds upon hundreds of artboards in a folder full of illustrator files. My version of high fidelity prototyping was gesturing wildly and finding examples of interactions from other sources. If programs like Sketch or Adobe XD existed then, it would have probably taken half the time during the design process phase. Managing the product deployment from an upper management standpoint would also likely have been much different, and likely the development phase would have been too. Again, I know I am not alone when I say that this was a learning experience for everyone involved.

Unfortunately, since the design and development of the app and its success, Teambuy declared bankruptcy and closed several years later. But regardless, I would say that this experience was one that I'm quite proud of. In addition to taking on the leadership role, I adapted a self-disciplined program of learning the fundamentals of product design, including development and shipping out a product. I was also able to reflect upon how the wealth of my work and educational experience up until that point, through the tutelage of former managers, employers, teachers and peers, all of whom contributed to the success of this project. I think that with this project, I can attest to the fact that every job is kinda like paying it forward to yourself....which is actually pretty cool.