UI Challenge #4 - Mobile App

 

Research

1. Milkshake Customization


  • Purpose
    To customize milkshake and order delivery

  • Function Users can scroll to see the ingredients list and click to choose the ingredients that they want

  • Coherent There is icon and texts for each icons, so it is direct for users to understand

  • Ease of Use Users just need to drag and drop the specific task that they want to move

  • Enjoyable The scrolling for ingredients list is interesting and eye catching for users. The illustration and animation of the milkshake is also nice and smooth

  • Visual aesthetic & communication The design style is illustrative, which can catch people's eye to use the app. The color used is simple and contrast

  • Interactivity When user is scrolling and clicking the ingredients list, it will make people enjoy with how smooth it is. It will enhance their experience when they want to customize and order

  • Usability and engagement
    This app is user friendly to most of the age groups because it's very easy to understand with the icons and texts


2. Add To Cart



  • Purpose
    To add any items inside shopping cart

  • Function Allow users to click items that they want to buy into the shopping cart

  • Coherent The app has a lot of pictures of each items, and also has texts. There is also a lot of icons that is easy to understand for users

  • Ease of Use All the users need to do is click the items that they want, and it will be added inside the shopping cart

  • Enjoyable The app has smooth transitions and simple animations. It will not cause any distractions to the users

  • Visual aesthetic & communication The design style is minimalist, it is simple and clean. There is no excessive usage of colors that might make users feel confuse

  • Interactivity When users want to buy something, users just need to click the items that they want to buy. After that, it will be added into the shopping cart. Users can keep on doing this until they are satisfied enough

  • Usability and engagement
    Users will be easy to understand on how to use this app because of how direct and simple the app is





My Mobile App Design

E-Flowers Customization


References






Sketches


Based on the references, I've sketched out my ideas for my mobile app. It will be an app where users can customize virtual flowers and send it to their friends. There will be 5 pages in total.



Flow Chart





Design Assets



These are design assets that I've made for my mobile app



Final Outcome

On Windows

On Mobile (Android)

This is a mobile app "E-Flowers" where users can customize flowers and send it to their friends. The design style is a simple illustration with color contrast. This is to make users to feel more attracted with the visuals.

Users can customize the vase types, vase colors, types of flowers and wish cards. Most of the customization involves clicking buttons. For wish card, users can type their wishes in the input field. After that, they can send it to their friends, and they can make more if they wish too.

Reflective Evaluation


For UI Challenge #4 - Mobile App, it's quite challenging for me because we need to make multiple pages for it. Sometimes I feel stuck because there are some stuffs that I don't know how to code. I think like I managed to code what I have planned, but I do have some problems while coding it. I think I'm really bad at animating inside Unity, but I tried my best. I learn a few new stuffs during this challenge too, and I hope I can learn more to make it better

Comments