Pass It On App

The brief:

To develop high fidelity wireframes for a new mobile app entitled ‘Pass It On’. Inspiration for the app came when a friend who worked for a sports clothing store was forced to shred perfectly good clothing and trainers. Placing them into a skip in order to make room for the new season’s stock. It seemed wasteful and unfortunately it is an industry standard to bin stock including food items rather than recycling goods to third parties. It made sense to create an app that would allow anyone to give away surplus items to someone else who might have use for them.

Pass It On is designed to be disruptive and change the behaviour of users and local businesses by providing a positive outlet for them to offload items that would otherwise go into the landfill. The app is not primarily designed for commercial profit. However users could be allowed to charge for second hand items in future to incentivise them to recycle more.

What I did:

I developed designs for users who owned an Android phone, living in the Edinburgh area who may be interested in a sustainable lifestyle and wants to recycle or save money.

Further I designed the wireframes to target the most users (70.9%) possible, while taking full advantage of the phones available features by reviewing the latest stats (Android, 2016). The wireframes were also designed with responsive features to cover small to x-large mobile screen sizes.

Look and feel

I designed the logo to resemble the universal recycle symbol, while incorporating a positive but subliminal smiling face. The logo uses a natural green shade and provides a good primary colour for the main app palette giving a good level of contrast between text and background colours.

Click on each image to view a large version:

Use cases

I created two use cases to help design and develop the app and its features and functions.

Use case 1: Recycling surplus

A housewife has some surplus cans of tinned fruit she doesn’t want to throw in the bin. She’s looking for a free app that’s easy to use and enables her to advertise the cans to someone in the local area that might want them.

Use case 2: Looking for items

A student is trying to save money on his weekly shopping budget, as his funds are running low. He’s using the map in the app to look for suitable food items he can get locally for free and locates a box of onions, so he messages the owner to arrange a collection.

Wireframe designs

I designed a wireframe for each activity in the Pass It On app. Logging in, updating account details, a map to display and find items, an item details screen to add, edit or display items, a messaging screen.

Click on each image to view a large version:
Main launch activity Login activity Join activity Settings activity Map activity Items activity Add a new item activity Item activity Message activity 

Usability guidance

I provided best practice usability guidance points alongside the wireframes to take priority if any conflicts arose while developing the app.

  1. Design elements should be native to the Android platform
  2. Native icons should be used whenever possible
  3. The activity purpose or title should be clear
  4. The user should be able to navigate easily
  5. The navigation should be responsive and scalable
  6. The activities should work in portrait and landscape
  7. The activities should be responsive to resizing on different screens
  8. Colours should have good levels of contrast to ensure they are legible
  9. Buttons should be large enough to be seen and pressed
  10. Form fields should be labelled appropriately
  11. Form fields should include hints to help users
  12. Forms should include the minimum validation needed
  13. Error messages should be obvious
  14. Users should be able to edit or delete items they add
  15. Use existing design patterns to enable users to interact easily

The outcome:

You can read the Pass It On App Design Report (PDF). The Pass It On app has been developed successfully and the app is due to be launched on the market shortly and will be available through the Google Play store.

 

Tagged with: