Baneasa Gift Card
The UX and UI design behind a digital adventure into the depth of retail innovation.
Baneasa Shopping City is the premium shopping destination in Romania having 1.4M monthly foot-traffic. In 2015, we built and launched CITY iLOVE, Baneasa's loyalty app for iOS and Android.
With over 25k active users in less than 1 year, CITY iLOVE won numerous prizes in the fields of digital, emerging technology and innovation in retail like "2016 ICSC Solal Marketing Awards: Silver Award for EMERGING TECHNOLOGY, Berlin, Germany".
How can we mix the offline shopping experience with online super powers to create customer excitement?
Project Gift Card: Allow customers to buy Gift Cards from Baneasa's website, iOS and Android app.
Our goal for the project was to make the checkout process fast and easy. More so, our ambitions were to provide a 360° user experience by offering a smart way of checking transactions after each use.
Our high-level goals were to:
- Make the checkout fast and easy for everyone, everywhere.
- Give customers full control over their spendings.
- Create a new benefit to driving new app installs.
Deadline: 3 months from 0 to launch.
I led the UX/UI design & UI development. This was a team effort between Kinecto Isobar and eAD Interactive. In addition, I worked alongside a Product Manager, Project Manager, iOS developer, Android developer, and 2 backend developers.
To comply with my non-disclosure agreement, I have omitted and obfuscated confidential information in this case study. All information is my own and does not necessarily reflect the views of Baneasa Shopping City, Kinecto Isobar or eAD Interactive.
The difference between assumptions and reality.
I began with 3 stakeholders interviews to understand the business requirements, prioritise features and define key performance indicators (KPIs).
I started to research who are the customers and why do they buy gift cards. I conducted customer and market research to drive the planning phase.
First, I used all the quantitative data available to define customer profiles and calculate the average value of an order.
TIP 1: the output is as accurate as the input
However, I couldn't move forward without having one key insight, the user's online shopping behavior, so I conducted 2 qualitative research sessions inside the shopping mall being assisted by the Product Manager.
TIP 2: avoid asking questions that can be answered with YES/NO
Interesting finding: 1 of 8 people has a cracked screen. Make those buttons bigger on phones!
From this research, I developed several use-cases that we used to evaluate design decisions throughout the wireframing process, to map the user journey and initial user acquisition channels.
The following are the key insights that defined our customer profiles:
- +450€ order value, buys for company’s employees.
- Multiple legal documents required.
- Recommended channel: offline assisted by the Sales Dept.
- 100€ order value, buys for gifting a family member or a friend.
- Standard checkout process.
- Recommended channel: online, mostly desktop, via SEO, AdWords and FB ads
- ~300€ order value, loyal shopper, buys for personal use or for her kids.
- Standard checkout process.
- Recommended channel: online, mobile user, via social media and the native app
Be empirical, Be specific.
Feeling confident about the user profiles we found, we were ready to proceed to the next phase. I informed the rest of the development team about the findings and started to work on the user journey.
User journey map, API based architecture
Being in a cross-functional team, I engaged developers very early in the design process. We worked side by side to map the user journey and API architecture. By collaborating so early, we made sure that everybody was confident enough to take ownership and the relationship between design & code was flawless.
TIP 3: I highly recommend User Flow template for Sketch by Greg Dlubacz
The journey map highlighted how the front-end and back-end work together and provided the opportunity to discover and fix bottlenecks very early in the process. This research created a deeper empathy amongst the team.
I designed 4 iterations through the wireframing process conducting usability testing, also receiving continuously feedback from the stakeholders and development team. I kept the process as lean as possible, it was important to be able to iterate very quickly working with such a tight deadline.
One of our high-level goals was to make it easy to order online for everyone, everywhere. That meant that the checkout process had to be easily accessible from desktop to mobile, on the website and native apps. More so, it had to be accessible cross-devices. The customer could start the order from the mobile, in the app, and finish it later from the desktop on the website.
Remember when I said that I engaged developers early in the process and worked side by side to map the user journey? Smart decision: we were able to research together all the use-cases and the advantages/disadvantages of having 3 platforms to support (web, iOS and Android), taking in consideration the time required for development, and choose wisely the right solution.
We decided to build the full feature on the website. For the iOS and Android app was enough to implement only the first step of the checkout process to be accessible cross-devices.
Fluid and Responsive.
Validating the UX assumptions in the wireframe phase, having the information architecture ready and knowing that the main focus is on the web, I was ready to start the UI design and development.
Using the style guide created a year before as a starting point, I moved to the design phase. I used Sketch for art direction and designed most of the components directly in the browser.
Main principles that informed my design
Making long forms friendly is always a tricky challenge. In order to design a successful cross-browser solution, I chose to:
- Broke the checkout process in 4 easy steps.
- Extensively use the browser autocomplete feature in HTML5.
- Adopted the best practices and patterns for form design.
I created new molecules using the living atoms and expanded the design system to accommodate the new functions.
Putting them together
The stack I used for front-end was HTML5, CSS3 and JS. Gulp for automating Sass and building the assets. Git for versioning and code deliverables. BEM and OOCSS as naming conventions.
Communication and project management
We've worked from 3 different cities: Barcelona, Bucharest and Iasi. Being remote and having a tight deadline made us implement an always-on communication channel, doubled by bi-weekly standups. Most importantly, to use flexible project management tools and embrace ownership and accountability.
We used Skype for standups, Slack for public and private chats, Asana for tasks and documentation.
Beta stage and much more to do.
It’s still early days for the product, yet first results have exceeded our expectations. We rolled a Beta launch on 10% of web visitors. We use Hotjar for collecting quantitative data besides what we know already from Google Analytics.
We see an average completion rate of 57%, the checkout process runs smoothly. The development team plans to decrease the loading speed and move to React. That means CSS transitions between the steps, hardly wait!