1 of 15

Smiles�for�Miles

Sabrina Sedlezky

Inho Choi

Dana Alsibai

2 of 15

Smiles for Miles is

  • Age : 20’s ~ 60’s
  • Gender : Female & Male
  • Users who want a personalized gifts for family and friends.
  • Individuals who want to experience differentiate membership service, fast shipping and sophisticated wrapping.
  • A mobile application for ios(iPhone X/XS/11 Pro – 4).
  • A mobile platform where users search and purchase gifts.
  • Providing convenient shopping experience to search products, sign up and checkout as well.

Target Users

What is it ?

3 of 15

  • Purchase later list with cost of gifts showing comparison of current prices

  •  Automatic reminder of gift purchasing
    • Special event/statutory holidays

  • Offer live chat service
    • Help navigating
    • Purchasing

Features

Top Ranked

4 of 15

  • Less categories

  • Offer express delivery

  • Offering gift wrapping styles

  • Review option

Features cont..

Lowest Ranked

  •  Holiday suggestions 

  • Revealing product availability

  • Receiving continuous advertisement

Features Not Considered

5 of 15

Initial &�Revised wireframes

6 of 15

Landing page

Add options : Dark mode / Light mode

Inert brand identity image that replace the loading page

1. Delete

Loading

Page

Add App Title to let users know our application

  • Use icons and text to recognize menus easily

  • Update menus based on user survey

Enhance Footer menu:

Access from anywhere to Home, About Us, Contact Us, Account and Cart

2.

Use Icon

7 of 15

Item lists

Use smaller icons and text together for the 2nd depth menus:

It can improve readability

Add Navigation bar:

It helps user to recognize where they are

Add Item list:

It reduced one steps to reach item detail page.

Display total item number

Elements Details:

Product Product name

Image Regular price Discounted price

Insert number for the next pages(10 items per one page)

Enhance

Navigation

& Readability

8 of 15

Cart

Improve item details:

Product image, name, personalize option, change item numbers including remove

Add Navigation:

It helps user to recognize where they are

Add subtotal price:

It helps user to check an estimated price before proceeding checkout

Develop

Details

9 of 15

Sign up for Check out

Simple !

Develop

Details

10 of 15

Item Detail

Navigation:

It helps user to recognize where they are.

They can go back when clicking arrow icon.

Personalize options:

Users can personalize this product.

Add to bag:

Users add this item in their cart.

Item details :

Image, name, price(original & discounted)

New Added

page

Unfold icons:

Users can check each information when clicking triangle icons.

11 of 15

Check out

Navigation:

It helps user to recognize where they are.

They can go back when clicking arrow icon.

Fill out forms for Billing Address & Shipping Address

New Added

pages

Welcome message :

Once signing up, this welcome message is displayed.

Order Summary:

Users review before proceeding payment.

Place order(fixed position):

Users finish their payment process.

This position is fixed and users can access anywhere in this page.

Payment options: Credit card, Cash, Paypal

These three options are based on the user survey.

12 of 15

What went well?

  • Users completed all three tasks
    • Users could search what they wanted and followed well the planned purchasing process.
    • They were especially satisfied with neatly layout design.

What didn’t go well?

  • The prototype that our group provided not interactive model but static document that’s why users sometimes confused where to go.
  • Some users struggled how to navigate through the app

Findings from user testing

13 of 15

Findings from user testing

Positive Feedback

  • Overall the app was received enthusiastically by the users who tested it.
  • Add membership page as an option so users can sign up or not.

Negative Feedback

  • Users always ask where should they go after they want to checkout
  • a lot of options clustered together and not evenly spaced out

Surprise Findings

  • No accessibility feature (screen reader)

14 of 15

Lessons learned

  •  General Knowledge

  • Importance of User Testing
    • Reveals things missed.
    • Ways to improve.
    • See how user reacts.

  • Wireframe
    • Create, 
    • design, 
    • adjust.
  • Adobe XD
    • Building prototype
    • colours, 
    • linking pages.

  • Trial and Error
    • Appealing
    • Easy to use

15 of 15

  • [Filter] function to find a wanted item easily
  • [Top] button to browse easily
  • Utilize main image as a [Promotion Banner] in a landing page

Next Launch