Nearbuy

 Android app to notify people of nearby shops that carry items of interest      Solo project by Yinghua        Designed with Sketch

High-fi
 

Timeline

  • 3hr: Brainstorm, Wireframe, Moodboard
  • 4hr: Visual design, final polishing, and write-up the design process
 

Who are the users

People that are new to their middle- or upper-class lifestyles with a strong desire to live a quality and modern life.

Their consumer habits: 

  • Spontaneity of shopping (easily inspired by bloggers and may have a long wish list)
  • Value convenience (tend to be very impatient waiting for delivery, in a queue, etc.)
  • Do everything on mobile (rich info can be collected around their interests through their online activities, such as Google search result, shopping on Amazon, etc. )
 

How does it work

Only 3 steps are needed for users to progress from the moment of awareness to purchase completion. 

  1. Awareness: receive a notification informing users that items on your integrated wishlist, e.g. Amazon wish list, are available nearby
  2. Adding to shopping cart: uncheck anything unwanted from a list of available recommended items that are pre-checked and then add to the cart
  3. Completion of the purchase: review the order summary and submit the order

After the order is submitted, users will receive order confirmation and directions to the nearby pick-up locations, if they chose to pick up the items immediately. They can also choose delivery and try-it-out in addition to picking it up.

 

Brainstorm

I spent a fair amount of time thinking through the user needs for such an app. I came up with two app ideas: 

  1. an app that notifies users of the available goods nearby that match with their identified needs, such as gift registry, wish list items, shopping preferences, etc. The unique part of the app is that users will be driven to it through notifications. This means that the app does not require any user triggered action in the first place.
  2. an app that mainly focuses on suggesting similar goods based on users' browsing activities.
 
User Needs

Notes

Notes for user needs and app ideas

 

I decided to work on the first idea for this design exercise, since it is more unconventional and challenging. I called the app NearBuy.

The key benefit of NearBuy is time saving. With this app, no more spending time on locating the ideal item in a big store and no more waiting in line to check out. With NearBuy, shopping becomes a spontaneous secondary activity that costs no time.

 

Low-fidelity wireframes

There are 3 main sections on my wireframe sheet:

  1. five screens for the whole UX experience from the moment of awareness to getting pick up directions after ordering.
  2. some menus for changing quantity, size, etc. of the product. 
  3. reusable design elements across screens. This is for me to plan out what to create as symbols in Sketch, so that my design process can be efficient and my Sketch file can be organized. 
Wireframe

Wire frames

Screens for UX flow, hidden menus, plan for reused elements

Some highlights of the user experience flow:

  • Notification triggers potential purchase This will bring people to the app whenever items are available nearby. The app doesn't require any user triggered action.
  • List of available items get merged with shopping cart Unlike most shopping apps that separates item list and shopping cart into different pages, NearBuy merges them into one screen, since it is built on top of users' wish list items. The browsing and selecting steps can be skipped. In NearBuy, all of the items are initially selected. Users just need to uncheck items, if any. This significantly reduces steps to checkout. 
  • No unnecessary steps, such as choosing payment method A mobile shopping experience is much more personal compared to on the web. The interface also has less space to use. For preferences such as payment method, shipping address, etc., users should just need to input once when signing up for the app. If they would like to make changes in the future, they go to the settings tab. Therefore, I removed steps, such as input payment method, shipping address, etc., from the general process but kept a summary right before they tap the buy button on the order summary screen.
 Notification  The app experience starts with receiving a notification

Notification

The app experience starts with receiving a notification

 Step 3: Thank you  Order confirmation + Direction for pick up 

Step 3: Thank you

Order confirmation + Direction for pick up 

 Step 1 - Add to Cart  Check the items list and locations + add to shopping cart.

Step 1 - Add to Cart

Check the items list and locations + add to shopping cart.

 Step 2 - Submit Order  Final review of the order and submit button

Step 2 - Submit Order

Final review of the order and submit button

 Google Maps Routing  After tapping "Direction", users will be directed to Google Maps

Google Maps Routing

After tapping "Direction", users will be directed to Google Maps

 
 

Moodboard

I created two mood boards:

  • modern lifestyle - NearBuy is leading a life style for new middle-class consumers who value a fresh, modern, and good living experience.
  • time saving (space theme) - NearBuy allows people to speed up their daily routines, so they can focus on meaningful things/experience.
Artboard.png
 

High-fidelity wireframes

I used Material Design as my design guide.

Some highlights:

  • Color scheme: I chose to use purple as the theme color because it is often associated with royalty, nobility, ambition, wisdom, etc., which matches with the app's target user type. I used Google's Color Tool to create and apply palettes to the app with a consideration for readability and accessibility. I chose the 500 deep purple (#673ab7) along with a light purple (#9a67ea) and dark purple (#320b86) as the primary colors.
  • Dividers: when dividing sections, I chose to use inset dividers for major sections of content: items from different nearby shops. I tried my best to avoid over-using dividers.
  • Elevations: the resting elevation of the item list is higher than the map section, since it is scrollable. On top of it, the app bar and summary bar are at the same level due to their similar functions and significance. The floating action buttons are the highest. In the check out screen, I used the rounded rectangle button with a label on to guarantee that users understand the following action.
  • Thumb Zone: when designing the layout, I also keep Steve Hoober's research on thumb zone mapping in mind. For example, I put the check boxes on the left side of the screen (for right-handed users) for the consideration of easy reach in addition to the consideration of function patterns. For action buttons, they are in the orange area, so that users won't accidentally trigger the action.
High-fi +Thumb Zone
 

 

More Projects by Yinghua