Surplus Apps Improvement Homepage Design

Denny Sutanto
3 min readJun 14, 2020

The following case study is part of my own personal learning process. I am in no way affiliated to making the Real Apps.

Introduction

Surplus is an apps which is a Food Rescue Apps from food-retailers who have Excess food and the Customers can also buy the Excess Food from Food-Retailers that sell with half price of the Product.

This apps is an Environmental Friendly apps that helps people not to waste their Food, Instead, they can buy the Excess of the food from the retailers.

Analyze The Problem

Last week, I started to look the entire functions and Interface of this Apps especially in Homepage. I saw that the Homepage was too plain and not telling Informations about “My Badge” and “Food Saved”. They did it, but it was placed in “PROFILE” page. Despite too plain, the information about “Badge” and “Food Saved” it’s really important for me to look up the importance information and raising my awareness so that I would not change to another page again.

It was not a good experience for me.

Later on the 2 next days in the Morning, I have some mixed Idea in my head to improve the Design to make this apps have a better experience. In this article, I’ll share my ideas, thoughts and process on how I make an Improment of the Design in Homepage of Surplus Apps.

The Goals

There are lots of element that make this service so useful. But all that matters is how to make the Homepage have a good Element that makes User enjoyable to see the Awards and Point of Kindness that they made after buy the Excess Food from the Seller.

So, I decided to design an app that would:

  • Catch User attention
  • Make a User know the Rating without much Effort and Pain
  • Adding few element to make Whitespace not too plain

Identify User Needs

People usually don’t really cares too much when it comes to helping to improve the product of company because they are too busy with their Daily Life Situations.

So, with all of this Informations, it’s really important to keep User Attention and Effortless.

Ideation

What if there’s an element that contains the Rating when we open the Apps in the Homepage? And near the Rating Element we also have an Information that tells about which Level that you as the Food Waste fight for Exces of food with the Actions that you make (with Buying the Excess Foods).

The Design Process

After I make Ideation, so the next step is creating the Design Process, also we usually known as Creating the Wireframes. I starts with creating Low Fidelity Wireframes, then creating the High Fidelity Wireframes.

Creating Low Fidelity Wireframes

Usually I start to sketch in the Paper, but for this I already imagine what’s the Low Fidelity Wireframes looks like. I draw a quick overview by using Figma as a tools.

Creating High Fidelity Wireframes

After that, I start to completed it by making the High Fidelity Wireframes

Prototype

Okay, now it’s done. So, What’s Next?

So far, what I have is Assumptions and Concept

I’m looking for Opportunity to use it in my Future Projects with Great Clients and also Company. I also definitely share my Process and talk more about how I process the Data to make a better decision of Design. Hopefully this concept can help and Inspire you.

Thank you for visiting, I’d love to hear any feedback. You can also contact me via LinkedIn or my email in sutanto.dennyui@gmail.com

--

--

Denny Sutanto

A man who exciting to learn about User Experience Design