Branding Web Design December 19, 2020

Ella Ant

Task

Product design for an AI-based coupon-searching platform for anyone looking for affordable products online

  • Strategy

    UX Research, UX Strategy

  • Design

    User Interface Design

  • Client

    Ella Ant

  • Design Technology

    AdobeXD

  • Duration

    1 Month

In late November 2020, I did my routine post of some random cool animated UI application on LinkedIn and to date, it became my most viewed post with lots of likes, comments, and shares and it in fact got the attention of a young visionary who in his own words had always wanted to create a service and request that I come along with him to build this “Next-big thing the world has never seen before.”

 

I was really excited about this notion and all my life, I had always wanted to be a part of a big thing and who doesn’t want to change the world for the best via a viable solution that solves problems?

 

The idea was to create a platform that makes shopping far simpler and extremely cheaper. The name of this young man is…let’s call him Jon Doe (for privacy reasons) and resides in Europe (not specifying for privacy reasons).

 

The idea that he thought off after realizing the issues shoppers have to go through especially in low-income communities made him wonder if it’s ever possible to build a platform that can solve this problem with the tap of a button.

 

Hence Ella Ant was conceived. An exciting project which would be the remedy the entire world had been seeking forever. Soon, we soon start gathering the team to build this next-generation solution.

 

We had a designer from North Africa and another team of Engineers in South East Asia and together, we began sharing different ideas about how things will be built – what to build first, how to scale it, and the next version features.

 

Even though the major focus was on the MVP which can be pitched to potential investors because we needed something to showcase to them and with a good product, we should get funding.

 

I was the lead product designer and part of my tasks included gathering a team of engineers that I can work with as well as integrate seamlessly with the business management guys and data analysts on how well the business will fare when it was launched.

 

We had a really short period to work because, by January of 2021, we were supposed to have created the first version of Ella Ant and get it ready for pitch when Mr. Jon Doe will be pitching to investors and incubators.

 

However, Ella Ant died even before it was born and this is the story of the great idea that was supposed to change low-income shoppers’ experience forever.

 

For privacy reasons, I will intentionally omit some core business plans and models to be used by the startup but focus on my own part as the Product designer.

 

Ella Ant in a nutshell

If you’ve ever used Honey, the price discount browsing extension for e-commerce services, Ella Ant was supposed to be one of its rivals. The concept was to allow users to get the lowest price for a given product at a given store.

 

Then they can also get a certain percentage of cashback on whatever item they purchase on the service which will use AI to surf through the database to gather important data that the end-users are seeking.

 

So see this an e-commerce on steroids because of some really fancy technology it’s going to be built with.

 

In the case of Honey, the service helps you search for the best discount and promo code on its database whenever you’re at the checkout page of a product but Ella Ant’s approach is slightly different which is why the experience is meant to be far more seamless.

 

First of all, we wanted this to be a full-blown application on its own which therefore requires some strategies in terms of how to get users to directly make purchases through us.

Entry froms copy

 

Onboarding forms on the mock-up for Ella Ant

My Role

I was brought onboard to help create the experience and the user interface of the so-called “futuristic” product that will change how low-income earners shop forever.

That in itself sounds ambitious and exciting.

 

I was the primary designer handling the user interface’s design and also worked on Product Strategy, User Research, Interaction, Visual design, Prototyping & Testing, Information Architecture, and Marketing.

 

The design was supposed to be cross-platform even though there was a need to create individual designs for both popular mobile operating systems such as Android and iOS while the web version can be accessed via web browsers.

 

Our target was January of 2021 which means that we needed to work super fast and the responsibility lies on my shoulder considering the fact that I was the main point person whose task could make or break the entire development process.

 

Some of the important things I worked on to realize this ambition in order to pass on the baton to the next developmental phase include the following:

 

Customer Insights & Ideation

I partnered with three project managers and one other data analyst to uncover insights and translate concepts into features that address customer behaviors and motivations.

 

Experience Strategy & Vision

I created frameworks and prototypes to share the vision, design principles, and content strategy. This helped to evangelize ideas, gain alignment and drive decision-making.

 

Planning & Scope Definition

I defined the product with my project manager partners. I evangelized customer goals and balanced business goals both of which were key to achieving a successful business as well as creating a brilliant product that truly solves problems. I prioritized and negotiated features for launch and beyond.

 

Design Execution & Validation

I designed it on Android and iOS. I executed journeys, wireframes, prototypes, and design specs.

 

Leadership

I designed up and presented works to gain buy‐in from executives, senior stakeholders, and many other Ella Ant’s teams throughout the project lifecycle.

Carousel UI for Ella ANT

 

WEB HOMEPAGE: We used carousel views instead of the conventional list or grid views because we wanted to limit the options of the customers and how many items they can see at a time (users can still toggle their views from carousel to grid)

The Challenge

Create Deeper Relationships with Customers

That was the main plan and the essence of the project in the first place. Considering the fact that the majority of users nowadays find it too hard to visit multiple coupon hunting sites to look for coupon codes which they then enter during the check-out process.

 

Also, the reach of traditional practices is on the decline due to the fast-paced social media influence on people and that is why there is a need to come up with an ideal solution that can bring back cheap product sales to the end users while also helping companies make as much profit as possible.

 

For Ella Ant, this signaled a rapid change in product shopping and purchase habits, especially for our target audience of low-income consumers across the board.

 

Our challenge was to evolve with customers and enter the highly competitive on‐demand e-commerce segment in the U.K., U.S., and Canada.

 

There were also plans to globalize the product and take it to high-demand nations like India, Nigeria, South Africa, and so forth.

Mobile Home Option 1

 

MOBILE HOMEPAGE: We used carousel views instead of the conventional list or grid views because we wanted to limit the options of the customers and how many items they can see at a time. Users can still toggle their views in settings.

 

The Approach

Good, Fast and Cheap

In order to speed things up, the team had to collaborate using Monday and Trello with the latter proving to be much more useful and efficient.

 

Also, I followed the old rules which are learning from the best which is why I had to utilize a number of existing platforms with great architecture in order to achieve my overall task. With this move, things went faster and less risky.

 

The assumption was simple—millions of customers make purchases every day across multiple e-commerce platforms’ target markets. So the plan was to acquire and manage a conceptual model that customers were familiar with and leverage the existing infrastructure to get to market sooner and cheaper.

 

This early architectural decision had a major impact on the quality of the customer experience we could both create and reconcile.

Mobile Single Poduct

 

A single product page for mobile UI (still maintains the grid format)

Chasing Waterfalls

In order to speed things up, there was no need to be through with the entire high-fidelity graphical user interface representation before the back-end software engineers kick off their own side of the task.

 

Being the lead product designer for the project, I decided to break down each of the features/modules into series starting with really comprehensive documentation ridden with the users’ persona, the site maps, and also the user-journey map.

 

That aided the design of the wireframe which helped the engineers understand the structural development of the system and how it should function.

Ella Ant Site maps

 

A basic schematics of the system (The journey ends at the Affiliate store where the user makes the final purchase. )

The main purpose of the Hi-Fi UI design was partly to be presented as part of our pitching document on the look and feel as well as the functionality of the application – basically a mock-up of functionality which includes the animations and so forth.

 

With that, each division could carry on with their jobs without anyone holding back. I also oversaw the branding aspect to some level however, we brought in a professional visual designer from Egypt who created the Ella Ant logo and the model which would be used on different marketing verticals as well as other branding elements for the business – she was wonderful.

 

I followed by working with platform designers to translate product features for their platform’s context.

 

Concurrently, I would design the next feature in the pipeline, whilst also working with my own platform engineering teams to execute the current feature through to completion.

 

“The combination of a fixed launch date and aggressive scope created an intense environment with many coordination and time challenges.”

Working backward from fixed launch date, meant that design was subsumed into an engineering‐driven process. Sign‐off milestones were driven by engineering estimates and time to create the right design was the time left over.

 

The combination of a fixed launch date and aggressive scope created an intense environment with many coordination and time challenges.

Wishlist

 

Wishlist for web UI

Customer Insights

We conducted customer and market research to drive our planning phase.
These are the key insights that defined the launch version of the product:

  • The regular e-Shopper: The primary segments are customers that just want to make purchases at a relatively cheaper price point – especially those from low-income regions in our target market.
  • Personalized shopping experience: This was important in order to allow the end users to have a much more personalized experience on the platform which includes creating profiles, saving their search history, bookmarking products, filing complaints about stores, and so forth.
  • E-Wallet: Buy points or get points the more you use the platform with which you can convert into a gift card that can be used on any platform of those we’ve partnered with.
  • AI-Driven product recommendation: This is the soul of the product itself with a powerful AI doing the majority of the back-lifting based on the user’s profile: demographics, likes, and dislikes, hobby, family history, earning capacity, and so forth.

Users Persona

It wasn’t so hard to realize that our customers fall into two parts and those include the low-earners who shop periodically for really important products to help their life. And then there are the mid-level earners who are interested in quick shopping and pay a lower price for something.

 

Thorough market research was however required in order to come up with a user-centric profile that really addresses these two markets.

 

In doing so, I took a good look at Amazon as an example, innumerable options end-users face sometimes affects their purchasing ability and one other thing you’ll soon notice is the fact that there are usually products that are sold cheaper but not always labeled with the right name.

 

A good example is “Samsung Galaxy S21 Ultra – Black” Any user that sees this knows what they’re in to buy but there are situations whereby a user randomly stumbles across “Samsung Smartphone 6.9-inch display 5G – Black” with the only thing that points to the product being the former will be the product image.

 

That in itself can lead to serious decision problems with the end users and that is what I was trying to solve especially with the development of the AI system that was supposed to do the recommendation of products.

Web Single Product 1 copy

 

Single product on the web

Users only get very limited choices to choose from whenever they make a search on a given product and that gives them the choice to purchase whatever it is they are in to buy.

The first option they get will be the cheapest product from whatever store that we found to be cheaper and then the second option might not be the cheapest but it will be the closest store to their location via the map/geolocation system built within the application and then the third option will be based on public opinion/reviews from older buyers while the last option will be based on our in-house recommendation system.

The Product Vision

With Ella Ant, we were trying to restructure the e-commerce market and make products much more available to everyone no matter how much they earn per year.

 

We focused on three key areas in order to get on with what we were trying to achieve in the first place.

 

The key focus we held on to was becoming the top-tier and the go-to place with the business plan that can place us right next to other bigger brands like Amazon and AliExpress.

 

We did not want to offer an exhaustive catalog of products like the general-purpose e-commerce stores across the web but rather wanted to focus on helping customers discover products they’ll love at a relatively cheaper price point based on different criteria with the most obvious being their search history.

 

Our customers expect and trust us to know them. We envisioned the future of the eCommerce service to be deeply personalized to customers’ purchase tastes and financial capacity.

Introducing Ella Ant

Ella Ant is a coupon and products price-discounting system that allows anyone to get the best e-shopping experience with the little they have.

 

This service is a no-disparity platform whereby anyone and everyone are welcome and they get what they can afford.

 

The system works to bring in the top four most valuable products based on the users’ search query and with that, they can get the best results and make a better purchase.

 

We’re trying to not leave anyone out of the market and to not bombard people with innumerable options that they end up not buying anything.

 

The experience is personalized and we bring brands much closer to their end customers just like that.

 

Geo-Location experience

Customers can search for the nearest stores to them or just leave the system to take care of looking up their location via the map and then recommending the nearest store where they can make purchases directly online from the same application all in one click.

 

Personalize shopping experience

By creating a profile and entering personal details, the system can use all this information to retarget the user with the most relevant product recommendation.

 

The search system is powerful enough to get users to make the best decision when trying to make purchases online via the system.

 

Cheaper for everyone

Literally, anyone and everyone can use the platform because of how affordable it is. Since its a system that automatically recognizes each individual’s economy, it is easier to purchase products and services with one click.

 

Designing the platform

The idea of using an overly simplified approach when dealing with search results brought about the usage of a carousel design to list out search results for the main query users’ requests on Ella Ant.

 

The reason for this “Weird” move as you may think of it is because we basically wanted a fancy design that looks pretty new and different from all others on the internet – just like that.

 

With the wireframe already figured out, it was time to move on to the high-fidelity design which includes the full-scale mock-up.

 

Based on the features to be built within the application, it was important that we make the designs based on this.

 

In an attempt to lower the number of pages or layouts users will have to go through I came up with the idea that we’d be better off using things like Toasts (pop-ups) as they’re called on the web and collapsible for individual products.

 

Take, for instance, when a user clicks on an item that they want to buy, they will see a list of stores that also sells that item with their prices.

 

Basically, a mini-comparison table right beneath individual products will give the end user the ability to select whichever store is best for them based on criteria like Price (cheapest to highest), geo-location (nearness to the customer), and also General reviews (from 1 to 5 stars) all which will determine and guide the end-users judgment.

 

Below are some of the layouts and page elements designed for Ella Ant to be used along with the product pitch during our incubation process.

42d915119477067.609e3b56192fa

ad74aa119477067.609e3b5619861

Then what?

In the early hours of December 22nd, I got a message from my partner (the founder/idealist of the business) that we will no longer be continuing with the execution and that we needed to cut things off where they are.

 

It was very hard news for me to process considering the amount of excitement and interest I’ve poured into the project. We would chat until later in the night and pick it up the next morning.

 

Things seem to have been going great until that day and it was a very sad announcement.

 

One of the reasons we had to kill the project was because of finances and that’s because we were unable to get funded or at least the other gave up his dream or maybe he was just using me as “a free consultant” because of the potentials and the fact that I was going to become a co-founder of “the next big thing” gave me that interest of collaborating and wanting to give my all to the project.

 

But that never affected me a bit. I only got disappointed that someone would give up such a brilliant masterpiece or maybe it’s not a masterpiece after all. But however it is, Ella Ant died before it was born.

 

Lesson learned

COLLABORATION! That is the biggest takeaway from me. Being able to create an emotional bond with the rest of the team despite the fact that we have never met.

Our first meeting was virtual and it was back in October.

 

I mean I reside in Nigeria and my ex-partner resides in the United Kingdom which sets us apart. With that, the majority of the work to be done needed to be processed and executed remotely.

 

With modern and advanced tools, it was easy for us to organize things and put tasks in order.

 

For example, highlighting the level of completion as well as commenting on sections for each individual engineer to understand where they’re supposed to pick off on their own ends as well as delivering media assets used in the UI design in order to maintain the same design aesthetics presented during the MVP outreach.

Back

We use cookies to give you the best experience. Disclaimer

Cookie Policy