Ashlin has released our First Ionic project

Please checkout our ecommerce APP on the google playstore. Just search for Ashlin. We would appreciate any feedback and suggestions. Our APP, like our web site provides real time access to the largest selection of technology inventory in north america with warehouse level details.

1 Like

it 's performance is very good , the design is good but i think it can be more beautiful

I agree with fady, the performance is great. The UI (in my opinion) looks too much like a website. I would suggest styling the select boxes to look more mobile, and making sure the height of each element is the same. Also, what does the heart do if I’m not logged in? I can’t see a favorites list or anything. Pressing anywhere on the item on the results page (not just the cart button) adds it to the cart and redirects. I don’t know if this is intentional. Too much red on the check out page, it makes the user think there are errors.

There’s my two cents, overall good job. :smile:

1 Like

Thanks for jumping on board and providing initial feedback. This has been a one man project so far, so all input is more than welcome. Under the covers as soon as you run the app for the first time, a unique ID is assigned to your device which is used to track your searches, favourites and cart. If and when you log in/register or checkout all that data is moved to your real ID. That way we give full functionality and history without requiring any registration information at all. The favourites are not a list they are a filter. On the search screen you will see a drop down for All, In Stock, or Favourites. That is where they become a list. Just search for favourites without any other preferences and you get that list. Or set other filters and just see your HP or Lenovo favs etc…

As far as aesthetics, I focused mostly on function and speed, but so left most of the look and feel at ionic defaults. Making it more mobile feeling, nicer looking, and fixing heights is definitely somewhere in the to do list. The idea was get it functioning properly with a reasonable look, fix functionality issues, add more features like options, and over time beautify. CSS is my weakest area.

That said if anyone has an example of some CSS that would make it nicer looking please direct me.

With regard to red, we use lots of it because our web colours are red and black. That said, perhaps using red to indicate where you can change a value was a bad idea, I will fix that. What colour do you suggest for the checkout entry areas?

Regarding the item adding to the cart from the results page, that is not supposed to happen, it is supposed to redirect to item detail page which also lets you view detailed inventory on another page. I will have to see why it is misbehaving. Perhaps a messed up < / a > location.

Cool stuff we have done that makes it work the way it does.

  1. Huge drop downs lists. Having thousands of categories and manufacturers makes for a crappy dropdown experience on mobile if you have to scroll through it. I tried third party compbo dropdowns etc… found the performance wanting. So I developed my own approach linking a filter to a drop down. You will see one for categories and one for manufacturers. They work well, and are pretty simple to do.

  2. All the real work is done by sql stored procedures. So there is no need for complex sql in app, just passing parameters and receiving back results. So other than the user interface most of real work is done inside SQL making for better performance. That said we are going through the dreamfactory rest interface, and using their demo server right now, so that can slow down the sql calls. Once we figure out how to get our public cert onto the Azure server we setup to host dreamfactory, we will switch over.

  3. Integrated to both paypal express and paypal pro checkout. Pro is done by passing control to our web server using asp pages. Express by passing control to paypal on the device.

  4. Keeping history and favourites on our server, even before a user registers.

Our immediate to do list

  1. compile iphone version (need to do this on a mac apparently)
  2. Convert the rest of our “real time update” code from vbscript to SQL so it can be utilized by the app. We do real time XML with many suppliers to provide up to the second data on our web site. We have started moving all that functionality to SQL so it can be shared by the web site and the app.
  3. Add more features such as access to options, simliar etc… data from the app.
  4. Add access to deep content like manufacturer showcases from the app.
  5. make it look better as everyone so far has indicated

Can be made very good! As of now design lets it down.

Take a look at the Ionic Showcase for some design ideas. Also, the material design docs have some useful information for Android. Here is a picture of one of my forms if it helps (the labels float). This customer’s main color is red, as well.

I tend to stick to neutral colors like white and light gray (#E5E5E5) and then for buttons/links I will use a specific color so the user knows it is something they are supposed to click on. You can see in the screenshot above I made the entire form white. I played around with the background being gray, having white floating on gray, etc. before deciding on white. I am sure everyone has a different opinion on this, it is entirely up to you.

Also, since you are planning on deploying to iOS in the future, you should take advantage of ionic serve --lab and modify the CSS to look different on each platform.

I believe Ionic is working on a build service that lets you do this from Windows, but I haven’t seen an announcement yet so it is speculation based on their build docs.

Great job on the performance though, you can’t even tell that many items are being pulled in. Let me know if you want any feedback on future UI. I’ll be happy to look it over.