BSFS APP REDESIGN

Research & App assessment

Before thinking about any redesign, research was important to get to know the business behind the app and how they communicate themselves as a brand, so, I could build a redesign with the same identity, look and feel. I went through their website, company advertisings and social media and I noticed a professional language with blue #45AEE4 as the main colour.

In the next step, I carefully inspected the current app design trying to understand the user flow, how it works and the intention behind each decision.

Personas

I created two personas of a typical BSFS app user. This helps me avoid generalisation keeping my focus on the target users.

Identifying key problem areas

Based on the collected data, I looked back into the app identifying key problem areas.

Finding improvement opportunities

With the identified problems in mind, I brainstormed ideas and came up with some improvement opportunities.

I also identified improvement opportunities in the main user flows: adding a product to the cart and editing a product from the cart. Both could be simplified into two steps less making the experience more efficient.

Wireframes

To ensure a smooth user experience, the wireframes and prototypes were thoroughly tested.

The app redesign

While building the redesign I thought a lot about the personas Suzana and Marcos and how the app experiences could bring benefits to them.

As an example, the new browsing experience on the home screen could be good for both of them. It would save Suzana’s time by letting her quick shop by her business specialty or by searching for an item straight from the home screen. In addition, I am confident that Marcos would love to browse first for the brands he trust.

Change 1

Problem: Different brand look & feel

The predominant colour in the BSFS app is green which is very different from the logo’s blue colour largely used on the website. This could deviate customers that are already familiarised with the company’s look & feel.

Solution: Restoring brand identity by replacing the green with the BSFS’s blue

The colour green was replaced with the blue from the company’s logo to restore brand identity.

Side note: Products details including illustration, values, and types were made up to showcase the experience and are not related to real BSFS products

Change 3

Problem: Home is not engaging or inviting

In the BSFS app, the home screen is not part of any primary user experience. It exists just to show advertising and the navigation menu which also appears on the lateral navigation in the other screens.

Solution: Engaging interface & new inviting browsing experience

In the redesign, the home combined advertisements with a products overview showcasing products categories, brands and specialties creating an inviting interface. This gives the user a new experience of browsing and choosing their own path from the start. Also, a search bar was added to the home screen allowing users to start a search right away avoiding extra unnecessary steps.
The advertisements, considered important for the company to promote products or brands, were kept at the top.

Change 4

Problem: Too many perceived options in a lateral menu

In the BSFS app, filters are found in a lateral menu that covers about ⅔ of the screen. It contains not only eight filter options but also seven navigation icons. When selected, each filter opens up a list of refined options in different overlays.
Having too many perceived options in a lateral menu followed by a lot of steps of opening and closing new overlays can be overwhelming for the user and even make them give up before accomplishing the goal.

Solution: Filters access were placed visibly at the top and info related to settings, account and logout were taken out of the main navigation and placed on the top left of the home screen

All filters were transferred to a single overlay that slides from the bottom covering the entire screen and providing a more seamless filtering experience. In other words, it is easier to navigate to different filter groups and to find out what to select.

Change 5

Problem: Confusing product options

Depending on the product in the BSFS app, the 'Adding to cart' was a confusing experience for my friends. This happens every time an item has more than one option to be added, like the diced bacon example.

The title indicating the size (3kg) and the options 'Each' and 'Cartoon' not relating to the title could confuse the user at making a decision. Questions could come up in the users head, such as:

• Is it 3Kg related to 'Each' or 'Cartoon'?

• If 3Kg is 'Each', how many Kg comes in 'Cartoon'?

• If 3Kg is 'Cartoon', how many Kg comes in 'Each'?

Also, the use of each and cartoon in inconsistent ways to represent the same kind of product and size can make it even more difficult for the user. An example of cottonseed oil 20 litres of different brands.

Solution: Product weight took out of the title and placed along with the types

To solve this problem, I left the title without weight or any measure. The specific sizes were placed in front of their correlated options 'Packet - 5Kg' and 'Cartoon - 12Kg', leaving out the option 'Each'.
Also, it is possible to manage product quantity or type by scrolling up and down on an overlay at the bottom before adding it to the cart.
This way is easier for the user to understand what's being added to the cart.

Change 6

Problem: Frustrating experience of editing an order

Another problem is that active orders are hardly editable in the BSFS app cart. Once clicked on the edit button, it takes the user to the product search. It means that in order to change the quantity or remove a product from the order, the user needs to search for it again and then make the change. This experience is not very user-friendly and takes a lot of unnecessary time and effort from the user which could lead them to frustration.

Solution: Implemented option to remove and edit items from the cart

The redesigned app allows editing items directly from the cart.
This change saves a lot of time and effort for the user and makes the ordering experience a lot more user-friendly and intuitive avoiding unnecessary frustrations.

Change 7

Problem: Mixed orders hierarchy

In the BSFS app, 'Orders' is a place to find active, confirmed, and past orders, all in one long list sorted by date of creation. Because of that, sometimes an active order could be lost between confirmed or past ones.

Solution: Active and past orders were separated into ‘Current’ and ‘History’

In the redesign, ORDERS is a place only for confirmed and past orders which are separated into different lists ('Current' and 'History') and also sorted by creation. In 'Current' the user will find recent orders with the status submitted, processed, and shipped. Once an order is delivered, it automatically goes from 'Current' to 'History'.
Designing by visual hierarchy makes the interface more organized and clearer for the user to find information.
So, ORDERS became a place not only to check for order details but also to track order status.
Active orders, on the other hand, were relocated to CART which, by convention, is a place where the user is already expecting to find them.

Usability testing

The success of the app redesign was evaluated by a usability test where I got the same users from the observation to perform a similar test. The difference is that this time they went through a clickable prototype which I hide the hotspots to not create bias. These were the performed tasks:

1. Add to the cart 12kg of brown rice

2. Go to only Asian products and add any item from there

3. Delete an item from the cart

4. Finalise an order and check order status

 The results were very positive revealing a 100% completion rate compared to 67% from the user observation results. In addition, the time spent to complete all tasks was reduced by an average of 70%. I am sure that busy Suzana, one of this case study’s persona, would be very happy about this. Furthermore, the usability test showed fewer errors and an overall better user reaction without any reported confusion.