[tbelldesignco]

Hello All!

So over the past week I have been working on an app for my business and I finally have it to a point where I can show off the interface mockups. With this project, I really wanted to create a project that showed off my ability with UI/UX design, so I could better market this set of my skillset. This project started off as wireframes and has now progressed to this point of mockups using Adobe Prior to moving this project to Xcode to begin taking this from design to SwiftUI.

The goal of this project is integrate the app into my website powered by Wordpress, where using RestAPI, GraphQL and other technologies to integrate posts, user accounts, eCommerce and remote notifications. As this project progresses, I hope to start a fork to integrate TBCMS into this app where when my CMS is completed I can use that system to continue to power and feed data into my app. I would love to hear feedback on this UI design, I tried to use elements from my current web design, so hopefully there is continuity and things translate!

[tiwil]

I like how you apply the design. Simple but still awesome. Probably I just wanted to add about the cart icon. I believe that should go into your shopping cart instead of shop. Shop can be placed with a new icon or just add search bar on the home menu. Also for the "Return" button after checkout, please remove the enter icon pls pls pls . A little bit annoying for me because it's not centered with the text.

For the other, it's looking very awesome.

---

For anyone that is confused with that "Adobe Prior" in the opening post, OP is referring to Adobe product named Adobe X-D (without -): https://www.adobe.com/products/xd.html.

[tbelldesignco]

I like how you apply the design. Simple but still awesome. Probably I just wanted to add about the cart icon. I believe that should go into your shopping cart instead of shop. Shop can be placed with a new icon or just add search bar on the home menu. Also for the "Return" button after checkout, please remove the enter icon pls pls pls . A little bit annoying for me because it's not centered with the text.

For the other, it's looking very awesome.

---

For anyone that is confused with that "Adobe Prior" in the opening post, OP is referring to Adobe product named Adobe X-D (without -): https://www.adobe.com/products/xd.html.

Yeah, with Adobe X-D it is hard to align text and icons to be pixel perfect without butchering the text completely, but in the final production buttons and icons will be aligned with more precision due to the lovely layout features of SwiftUI. 

As for the shop, would you recommend I swap the bag and cart icons within the system? It would be easy to do, but I was also going with the current theming of my Wordpress theme where the Bag is used for your cart, so that users would have a little continuity from web to mobile.

[tiwil]

As for the shop, would you recommend I swap the bag and cart icons within the system? It would be easy to do, but I was also going with the current theming of my Wordpress theme where the Bag is used for your cart, so that users would have a little continuity from web to mobile.

Yep, that'll do. But I actually like cart instead since every other e-commerce use cart as a shopping cart. But it's your e-commerce so I have no problem as long as your users are fine with it.

You might want to add another icon on the bottom for shop, I guess? So one cart for shop and one for bag. Just try it out and see if it's affecting the UX.

[tbelldesignco]

Yep, that'll do. But I actually like cart instead since every other e-commerce use cart as a shopping cart. But it's your e-commerce so I have no problem as long as your users are fine with it.

You might want to add another icon on the bottom for shop, I guess? So one cart for shop and one for bag. Just try it out and see if it's affecting the UX.

Agreed, I will continue to play with it! Over the past day, I've been spending time creating my ui elements so I can easily call them and use enumeration for some of the customization options such as color and so on. It took me a while to get my feet back into Swift as it has been a few months of not using it and I've had more of a focus on PHP and Python as of late. Below is a screenshot of some of the elements I have made so far and in a production interface, you can call them using calls like uiButton or uiButtonBlack.

[tbelldesignco]

I thought I would check in and talk about some of my findings! So I started working with RestAPI trying to pull data from the TBDC Wordpress Site and WooCommerce. I have been fairly successful, thought I need to figure out how to get information from nested structures. With Swift, you are able to create what is called an observable object that you can use to parse JSON data and plug it into interface elements and user data. For example, the Structure "struc" I am using looks like this.

Code: (Select All)

struct Products: Codable {
     var id: Int
     var name: String
     var status: String
     var price: String
     var images: [ProductImages]
}

struct ProductImages: Codable {
     var id: Int
     var src: String
}

So a function will run pulling the JSON remotely, then use these Codable structures to store the data to use in the interface.

Code: (Select All)

ForEach(productData, id: \.id) { product in
     productCard(productName: product.name, productPrice: "$\(product.price)")
}

Doing so produces a result like this!



The next step is to figure out how to 1) get the data from the sub struc ProductImages then 2) start building a cart, payment system and have that all tie into Stripe and WooCommerce.