Embrace the Joy of Giving
The Problem
I believe that many big-city residents are tired of living in a society dominated by material possessions and monetary gain. So I asked myself: How we be more generous and helpful to the people in our community, without being bound by money as a dictating force?
The Goal
Give or Take is a neighborhood sharing app that lets you offer goods and services to people in your immediate vicinity. This can be anything from dogsitting to donating used books or lending someone your lawnmower.
It is based on the concept of reciprocity and necessity; users do not ask for or accept money for any services they provide or receive.
The Context
- Student Project for CareerFoundry’s UI Design Program
- Concept and Design for both iOS and Android
 Close adherence to Human Interface and Material Design guidelines

Role: UX/UI Designer
Time: 6 weeks
Made with: Figma
An app for Philanthropists
Who is the app for?
The app is to be used by anyone who would like to participate in a friendly neighborhood sharing system based on trust and reciprocity.

What kind of tasks will users complete?
- Create a profile/log in
- Connect with members of their community
- Offer services and receive responses
- Browse services offered by others and respond to them
- Post a request and receive responses

When will your audience use the app?
- When they have a surplus of something that doesn’t have a long shelf life and don’t want it to go to waste
- When they have some time and energy to spare and have skills that others in the community might benefit from
- When they need a service, such as someone to help them set up a printer or to walk their dog
Go with the flow
User Flow Diagram
Before starting to sketch wireframes for this application, I worked out the basic flow and functionality to understand what types of screens I would need and how they will connect.
Leaning on existing Design Systems
iOS vs Android
I used elements from existing iOS and Android UI kits to build my first set of low-fidelity wireframes, paying close attention to the key differences in their design systems.
Establishing a Style Guide
Typography
I stuck with the system font families for both native platforms, so San Francisco for iOS and Roboto for Android.
Color Palette
I tested out several different color palettes and received feedback before settling on this rather muted color scheme, with soft blues and greys and a dark berry red as an accent color.
Creating a memorable logo
The app name “Give or Take” refers both to literal giving and taking as well as the figurative use of the phrase meaning “approximately”.  The title therefore should evoke the connotation of things evening out over time.
As reciprocity and helpfulness are at the core of the idea of this application, I wanted the logo to represent two hands interlocking — giving and taking. 
Here you can see the evolution of the logo throughout multiple iterations.
Adapting to different guidelines
I closely followed Human Interface guidelines for the iOS designs and Material Design for the Android designs. Here are some key differences.
Bottom Navigation / Tab Bar
Both:
- Allows users to navigate between top-level sections of the app
- Active tab is highlighted in a different color
iOS:
- No Floating Action Button, instead highlighted tab button for primary action (new post)
- Flat design
Android:
- Floating Action Button for primary action is off to the side to allow for more real estate for small, centered buttons
- Includes elevation/shadows
Top Bar / Navigation Bar
Both:
- Shows user their current location within the app 
- Once logged in, includes a back button 
iOS:
- Flat design 
- Search bar always expanded
Android:
- Elevation/Shadows
- Search button with an expandable search bar
Input Fields
Both:
- Placeholder as well as a small label
- When focused: Clear button allows users to clear everything
- Includes default, focus, complete, and error state
iOS:
- Simple underline
- Icons encircled
Android:
- Full outline
- Icons are blank, without a circle
Buttons
Both:
- Include disabled, enabled and pressed state
- Primary and secondary buttons
iOS:
- Large, fill most of the page
- Square shape with rounded corners
Android:
- Small, hug contents
- Completely rounded corners
Cards
Both:
- Divide content into easily manageable chunks
- Include icon buttons, for example for bookmarking
iOS:
- Flat design
- Darker card color to contrast screen background
Android:
- Elevation
- Lighter card color
The Feedback Loop
After finishing up the visual design of my app, I built a prototype in Figma that I sent out to several other designers for review. 
Landing Page
Adaptations:
- I removed the top app bar. It’s not needed here.
- I also decided to let new users “take a peek” by only setting their location but not having to create an account. They can then see posts from their location and only need to sign up to send messages or post something themselves.
Post Detail Page
Adaptations:
- I decided to just use the bookmark icon again, to avoid the confusion with the buttons and make it clear if it is selected.
- Honestly, I don’t see the date formatting as a major usability issue. Miles vs kilometers is very important for users to understand the distance but anyone can read the date regardless of the formatting. That is why I chose to write out the month.
- I have changed the search bar to no longer include a success state.
Final Screens
The good, the bad and the ugly
Learnings
Design Guidelines and UI kits are your friends
Using existing design kits and guidelines as a crutch can speed up the design process quite a bit and make your life a lot easier.
Feedback is vital 
A lot of errors that I might have overlooked were spotted by my eagle-eyed and thoughtful reviewers. The loop of iteration and feedback is vital to the design process.
Take a breather 
Sometimes I get so caught up in solving a problem that I start to lose sight of the big picture. In those moments, it is helpful to take some time away from the project and return with a fresh perspective and new motivation. Oftentime, things then suddenly fall into place.
Challenges
Feeling backed into a corner
Sticking closely to guidelines can be tricky if you start to feel restricted in your creative flow. 
When I start to feel like I’m suffocating in restrictions, I need to go exploring and discover how some of my favorite applications have solved similar problems. Oftentimes, the solution might be a lot simpler than I realized.
Colors are tricky
I struggled to come up with a color palette that felt pleasant and welcoming without feeling overwhelming. So I needed to keep iterating through different color palettes and testing them before settling on a final version.
How to continue improving
Do more research
I realized how helpful it can be to simply research other apps, both as to their flow as well as their design. 
I don't need to worry about getting tempted to copy anyone else's design solutions, but rather I have realized how much inspiration a small nudge in the right direction can offer.
Test test test 
Once again, the motto “test early and often” has been confirmed in this project. You can have great ideas, but nothing beats getting direct feedback from potential users.

You may also like

Back to Top