BIPA App Redesign

Bottles
Interface Designer im Büro

1. About the Project

Team: Deborah Breton, Oskar Gahler, Simon Moos, Tabea Schwaiger, Mathilde Spitzer

Duration: 7 weeks

Tools: Pen and paper, Miro, Figma, Google Drive

 

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.

 

The Problem

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

In cooperation with the Talent Garden UX Design Bootcamp, BIPA gave a project brief 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.

 

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 them to save time and money

 
Image by UX Indonesia

Context of Use

As a starting point to our project, we formulated a Context of Use Description (CoU). Since we all are familiar with BIPA, we first did this on the basis of our assumptions in a brainstorming session. The purpose of doing that was to provide a clear reference point for comparison. We came back to this first version of the CoU later, in order to update the document with the knowledge gained from the qualitative interviews. This way we were able to validate and/or falsify our assumptions in order to arrive at a clear picture of the frame in which we were going to design our solution.

 

2. Product Definition

context-of-use.png

Fig. 1: Context of Use

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.

 

User Requirements

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. Since our goal for this project was to design one or two features for the app, we did not formulate an exhaustive list of requirements. Rather, we focussed on the most important topics in order to find the functions that would provide the most value to future users.

 

​​Examples:

  • With the BIPA app, the user shall be able to find needed/desired products.

  • With the BIPA app, the user shall be able to find discounts that apply/fit to their shopping.

  • With the BIPA app, the users shall be able to inform themselves about ratings of products.

 

User Groups

One particularly valuable insight gained from the Context of Use Description were the user groups we were able to define from it. These user groups served as a basis for constructing personas and in turn guided all of our subsequent designing of specific features for the app. The two user groups we decided to focus on for this project were:

 

  • the ​​Loyal Customers who have been shopping at BIPA for a long time. A primary motive for them is familiarity, both for the brands and products offered at BIPA as well as the BIPA brand identity

  • the Busy Working People who want to spend as little time shopping as possible. Anything that saves them time is valuable to them.

Group 136.png

Fig. 2: Value Proposition Statements

Value Propositions

In order to communicate our idea of the value, the app should provide to the users we formulated two value propositions, each of them tied to one of the user groups:

 

  • For Loyal Customers who know their needs and interests, the BIPA App is the service that enables them to streamline their shopping experience.

  • For Busy Working People who need to fit their shopping into a tight schedule, the BIPA App is the tool to integrate the experience into their day.

uxft_11-2021_gp2_potato-potato - Value Proposition Canvas.jpg

Fig. 3: Value Proposition Canvas

Image by UX Store

Research

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 using the following methods:

 

  • Competitor Analysis
    We compared different mobile app solutions within the drugstore sector as well as online shops in general.

  • PWA Analysis
    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.
     

  • Interviews
    We conducted eleven interviews with adults aged between 29 to 61, from whom seven were females and four males. Two of them had kids while nine didn't. We wanted to find answers to the following questions:

  • Why do people shop at BIPA?

  • What kind of products do they buy there?

  • How do they make the decision what to buy and when to buy it?

  • What pains and gains do they encounter regarding their shopping?
     

Our main interview takeaways were that users:

  • Want familiar products.

  • Prefer specific brands/products.

  • Don’t want to spend too much time and effort in shopping.

  • Want to know if the quality/value of the products meet their needs.

  • Want to use their shopped products immediately.

Analysis

The research served as our foundation to create personas, user stories and user journeys.

With the gained knowledge we created two user groups and two personas, each roughly corresponding to these two user groups.

 

Persona: Caroline Mayer, Clemens Markovic

Gains: Familiarity, Socializing, Living Sustainably

Pains: Mobility, Time Constraints, Limited Choices

Jobs: Find out about new offers, find out about new product, find detailed information on products, keep track of their purchases and products of need and interest

 

To build a basis for the next step, we created a user story for Caroline and a corresponding user journey map:

 

3. Research & Analysis​

Caroline found the right type of diaper for her baby and saves it as a favorite. She likes to keep things organized and therefore puts the diapers into her “Baby stuff” list.

Since having kids is expensive business, she sets the notifications on her “Baby stuff” list to not miss any special offers.

uxft_11-2021_gp2_potato-potato - Customer Journey Map - Caroline has selected several prod

Fig. 4: Caroline's Customer Journey

uxft_11-2021_gp2_potato-potato - User journey to User Flow - Caroline has selected several

Fig. 5: User Flow Chart for Caroline

Image by Marvin Meyer
 

4. Ideation

Based on our findings in our research, we started to ideate on what features might be useful for the users. The interviews we conducted as well as the competitor analysis gave us a good foundation to find solutions to the problems we uncovered.

Solution N°1 – The List Feature

The first solution we decided to flesh out and put to the test was what we called the List Feature. This feature would allow 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.

 

For this feature we built two paper prototypes that were tested with five people (see next section).

List feature.gif

Fig. 6: The List Feature

filter quiz.gif

Solution N°2  – The Personal Filter Quiz

The other solution was the Personal Filter Quiz. This feature allows the user to set preferences which influence what kind of products are being presented to them first before others, thus making the search for products easier and less time consuming.

Fig. 7: The Personal Filter Quiz

Image by UX Indonesia

5. Testing Phase I 

Usability testing with the paper prototype took place on December 2nd and 3rd 2021 at the Talent Garden Campus.

 

We tested five users and used two versions of favorite list architecture. 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.

 
IMG_20211203_130503.jpg

Fig. 8: Elements of Paper Prototype

Frame 15.png

Fig. 9: User Testing Setting

Some users struggled with the paper prototype and noted that they found the transfer from the physical paper prototype to a digital product hard to master, especially since the prototype was only in black and white and icons or certain elements they had to interact with didn’t stand out like they would on a digital prototype.

 

Apart from that, the main findings were:

  • Instant system feedback was appreciated and well understood

  • Users want to visit the product page

  • Consistency in wording, labels and icons is a must

  • Advanced list features need introduction

paperprototype-flow001.gif

Fig. 10: Paper Prototype

Image by Keila Hötzel
styleguide_font.png

6. Design

Design Principles

Prior to creating a design system, we first determined the principles on which our design was based by analyzing Nielsen’s Usability Heuristics and creating mindmaps to narrow down the keywords on which those principles are funded.

 

1. Cleanliness

The design should focus on necessary things and not confuse the user with irrelevant information.​

​​

2. Structure

The design should make it easy for the user to find their way and features.

 

3. Feedback

The design should give clear and instant feedback to allow users to feel their actions are registered.

 

4. Intuition

The design should feel effortless. It should allow users to achieve their tasks and goals through different paths.

 

5. Familiarity

The design should take the needs and preferences of different users into account and provide an informal and personalized space. The app experience should be like coming to a familiar place for a personal shopping experience.

 

Design System

Based on our selected principles, we chose Lato as our typeface because of its cleanliness, straightforwardness and symmetry. Furthermore, it comes in a very wide range of styles, making it very relatable and approachable to users.

 

Fig. 11: Font Type Style

In terms of color, we kept the original BIPA colors for familiarity and to stay within the brand guidelines.​

colors.png
styleguide_colors.png

Fig. 12: Color Style Guide

Image by Stanley Dai

7. Prototype

Below you find the high fidelity prototype we did the final user testing with (see next section).

 

Click on the images or scan the QR code to try out the prototype yourself.

 
iPhone 11 Pro.png
QR Code List Feature Prototype.png

Fig. 13: Final Prototype List Flow

iPhone 11 Pro2.png
QR Code Filter quiz Prototype.png

Fig. 14: Final Prototype Quiz Flow

Image by Mohamed Boumaiza

8. Validation

User Testing II

On December 22nd, user testing was conducted on site and remotely at Das Packhaus in Vienna. Five users tested both flows which resulted in ten user tests in total.

 
PXL_20211222_083851586.MP.jpg

Fig. 15: User Testing II

Overall, the prototype worked successfully and every task was completed without major problems. 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.

Image by Kvnga

9. 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 the Potato Potato team and we would like to work together again in the future. 🙂