Bipa UX Design Case Study

Mockup of Screen Design

Project Overview

BIPA is Austria’s largest drugstore with over 600 retail stores and more than 4000 employees. They also provide an online shop, accessible via the web or BIPA’s mobile app.

In cooperation with the Talent Garden UX Design Bootcamp, BIPA launched a project with the aim to create a new mobile solution based on PWA (progressive web app) technology that provides meaningful value for both the customers and the company.

Team: Deborah Breton, Oskar Gahler, Simon Moos, Tabea Schwaiger & Myself
My Role: Research, Ideation, Design, Prototyping, Testing
Client: Bipa/UX Design Bootcamp
Duration: 7 Weeks
Tools: Pen and paper, Miro, Figma

The Problem

BIPA’s mobile app is struggling with a high bounce rate and a low conversion rate (exact numbers undisclosed). It is not consistent with the newest design language and brand guidelines and doesn’t bring any additional value to the customer’s shopping experience.

BIPA’s Goals

  • Activate mobile users through additional functionality
  • Increase conversion rate
  • Use possibilities of PWA technology to improve overall user experience
  • Support users in finding the right products
  • Enabling users to save time and money

Understanding users and brand

As a starting point to our project we formulated a Context of Use Description (CoU). We used this checklist to (a) define the product we were going to design, (b) identify the potential user groups, (c) their goals and (d) tasks as well as (e) the environments in which the product will be used.

From the goals and tasks sections of the CoU we formulated user requirements which functioned to further specify the functionality that the app needs to provide in order to serve the users goals.

The user groups served as a basis for constructing personas and in turn guided all of our subsequent designing of specific features for the app. In order to communicate our idea we formulated two value propositions, each of them tied to one of the user groups.

user groups

Research & Analysis

In order to validate our initial assumptions and to provide an empirical base for the following phases, we started our process with an intensive research phase. We did a competitor analysis where we compared different mobile app solutions within the drugstore sector as well as in the general category of online shops.

In order to be aware of all possibilities and constraints of PWA apps, we looked at the technical details and best practices in this field.

We conducted 11 interviews with adults aged between 29 to 61, from whom 7 are females and 4 males and 2 have kids and 9 don’t. With the knowledge gained in our research, we created 2 personas – Caroline and Clemens – each roughly corresponding to these 2 user groups.

In a next step, we created a user story for Caroline, a corresponding customer journey map and a flow chart.

Ideation & Wireframing

Based on our findings in our research we started to ideate on what features might be useful for the users. We decided on two solutions which should tackle the main motivations of the users:

Feeling of familiarity
Saving time and money
Personalised shopping experience

Solution No. 1 – Enhanced List Feature

This feature allows the users to save and organize products they frequently buy into lists and give them a way to purchase those items with a few actions. They shall also be able to activate notifications on offers for the list items. For this feature we built two paper prototypes that were A/B tested with five people. The setup included one facilitator, one human computer that operated the prototype, one note taker and two observers that operated the camera and took pictures.

Solution No. 2 – The Personal Filter Quiz

This feature allows the user to set preferences which influences what kind of products are being presented to them first and also help them create a personal filter which can be activated with one switch in the search results. It’s an interactive feature which helps to make the app feel more personal.

Design & Prototyping

Prior to creating a design system, we determined first the principles on which our design is based by analysing Nielsen’s usability heuristics and creating mindmaps to narrow down the keywords on which those principles are funded.

Based on these principles, we choose Lato as our typeface because it’s cleanliness, straightforwardness and symmetry. Furthermore, it comes in a very wide range of styles, making it very relatable and approachable to users. In terms of color, we kept the original BIPA colors for familiarity and to stay in brand.

Solution No. 1 – Enhanced List Feature

Because Users …
… like their personal space
… want to save time and money
… tend to buy preferred/familiar products

Because Bipa …
… has a high effect solution with low effort
… increases conversion rate through notifications
… keeps users engaged
… creates an additional value for customers

Click here to test the Enhanced List Feature prototype!

animation of filter quiz feature

Solution No. 2 – The Personal Filter Quiz

Because Users …
… like the feeling of familiarity
… want to save time
… can save their preferences
… tend to buy preferred/familiar products

Because Bipa …
… has a high effect solution with medium effort
… gets to know the preferences
… can establish relationship with users
… creates an additional value for customers

Click here to test the Personal Filter Quiz prototype!

Validation

On December 22nd, user testing was conducted on site and remotely at “Das Packhaus” in Vienna. Five users tested both features, the enhanced list feature and the personal quiz feature, in two flows. This resulted in 10 user tests.

Overall, the prototype worked successfully and every task was completed without major problems and a 100% success rate. Resulting from that, some small improvements and minor design revisions were implemented to the final prototype.

As further exploration, more elaboration of the personal filter feature was determined.

on site prototype testing

Conclusion

Using all the methods and tools we learned in this UX Design Bootcamp, we feel confident that we were able to create features that are useful to the BIPA app users and bring a value to their experience using the app. Testing our assumptions was a major key in every step and enabled us to iterate the product in a better direction. Good communication was the foundation of the whole collaborative process. As a team we quickly found a good rhythm of discussing things and making decisions efficiently. That way we were able to meet all our milestones and keep within the set plan. 

It was an enriching experience to work in our team and we would like to work together in the future 😉