The user interface layer of your application is the most important tier because it is the only tier your customer get to see. You can have the best database and middle-tier class libraries in the world but nothing will start popping off until your customers can access the user interface and have a good user experience (UX) to engage in your application workflow. In this article, we are going to cover how to architect your user interface and apply a commercial template on your ASP.NET MVC4 web application.
The good thing most of the UI templates and frameworks like Bootstrap already knocked out the complexities of building out a good user interface so there is zero need for you to build anything from scratch or “learn HTML” as they say. At best, you can tweak what is already there in a commercial template and just make it work for you. As a case study example, we are going to cover the crowdfunded discount solution we discussed on Dream and Hustle in 2013 and discuss how we will design and implement a user interface layer.
Backgrounder on Crowdfunded Discounting
Crowdfunded discounting is a collective economic empowerment solution proposed by the 3rd Strategic Institute to give small-to-medium retailers a chance to remain price competitive with big box retailers during heavy discounting period such as holiday and clearance seasons. After the recession hit back in 2008, shoppers have engaged in a pattern of “discounting” looking for the lowest price to make a purchase. This involved activities such as extreme couponing, coupon codes, Groupons as well as watching out for clearance sales.
But one of the biggest discounting activities is called “showrooming” where a customer goes into a store and look at an item and play with it, then look online for a lower price and free shipping and order it online instead of purchase from the retailer they experience the product hands-on at. Showrooming is killing the living hell out of small businesses and other businesses that sell items that can be bought off Amazon.com using Amazon Prime membership. Also Google Shopping is a great tool as I found stuff 50% off from another retailer across town currently on sale while sitting in Wal-Mart and Target charging full price. All of this is discounting and showrooming activity is hurting small shops and there need to be a way to help the small retailers stay competitive.
In our crowdfunded discount solution, the community-at-large can collectively create a fund for a small retailer to provide discounting for the small retailer customers. The merchant make a pitch on the crowdfunded discounting web site, the community donate their money to a fund in a collective fashion towards a goal. If the goal is reach, the merchant will be able to markdown products for sale based on the funds that were raised and promote a sale at their local business, maybe 20% off a pair of season items that has to be cleared out or reduce a popular product down to the MAP (minimum advertised price) level like the Xbox for $399 and get a $50 gift card and the $50 gift card comes from the funds generated by the crowdfunded campaign.
The customer who sign up for the coupons will receive a unique coupon code to use at the local merchant and they can print out the coupon or display a QR code from their mobile device. The smaller retailer do not need any real additional point-of-sale upgrade as the merchant can look up the coupon code and verify the code and apply the discount through their existing point-of-sale transaction process. The crowdfunded discounting web site receive the message the coupon code was receive and sweep the discount funds into the retailer bank account.
The biggest benefit of the crowdfunded discount solution is creating organic loyalty and active participation within the community to support small businesses. In the black community, you have worthless cats making a race-based slogan talking about “support black business” as if saying that cute racist slogan supposed to keep a small business in the black community sustainable. The crowdfunded discounting solution gives people in the community the real collective action necessary to help a business stay open and serve their community by just giving $5 a piece which can help a small business knock 30 cents off a small item in their inventory and clear it out. By helping a small local business conduct sales and discounts, this activity can attract customers from all over using their mobile to discount go into the local community and do business and these non-local customers can cross-shop at other local shops generating more local economic activity.
Previous Links:
http://dreamandhustle.com/2013/10/our-proposal-to-use-crowdfunded-discounting-to-promote-black-owned-businesses
http://dreamandhustle.com/2013/10/supporting-our-businesses-the-crowdfunded-discounting-project
My crew will launch a crowdfunded discounting platform for this upcoming holiday season and the service will be called Stony|Ellis. So we are going to discuss how we will implement the UI after me and you talk about how to architect the user interface and user experience.
Defining the Entities and Workflow
When creating user interfaces, the focus is on understanding the workflow of entities which is what we covered in establishing the data layer a while ago. So let’s look at the entities in the crowdfunded discounting platform.
Merchant. The merchant will register for the service, login to the service to create a campaign, check the progress of their campaign, create a sales campaign from the funds, redeem the coupons and check progress with key performance indicators on the campaign and view the payment details of sweeps and money owed and funds left.
Contributor. The contributor is a person or entity donating money to the crowdfunded discounting campaign. They will view a page similar to Kickstarter where the contributor read the story behind the merchant and the motive for the campaign and the contributor decide if they want to contribute. If the contributor want to contribute, they press the “contribute” button and enter an amount or pre-selected amount.
Customer. The customer is at-large consumer who subscribe to the crowdfunded discounting web site to view local deals and successful crowdfunded discount that are available for them to redeem. The customer may receive an email from us notifying them a merchant nearby has a coupon for them to shop for a deal. So the customer sign up to view deals, collect coupons and share coupons on social media and notified when new deal are available.
Administrator. The administrator is the web site operation who has to manage the other entities and this involve looking at data to promote marketing for example, if most of the crowdfunded discounting is coming out of East Village, then target other boutiques in the area. Most likely admin sections are not built into the web site for security reasons but can be done for small startups and beta testing. The best setup is another web site that simply access the secured database for the data.
Once you defined your entities which you should have done at the data layer and at the class library level, then you have to tighten up the workflow and this is what we cover. When you define the workflow, simply list all the processes that will be done. So for the crowdfunded example:
Merchant register for service.
Merchant login to service.
Merchant create funding campaign.
Merchant announce their funding campaign on social media
Merchant view existing funding campaign.
Merchant create discounting campaign.
Merchant launch discounting campaign.
Merchant redeem coupon at point-of-sale
Merchant check progress of discounting campaign
Merchant announce their discounting campaign on social media
Contributor view merchant discounting campaign
Contributor donate to merchant discounting campaign
Contributor share on social media
Customer register to view discounting deals
Customer login to view personalized discounting deals
Customer save favorite discounting deals
Customer redeem coupon at merchant point-of-sale
Customer share discounting campaign on social media
Do not be intimidated by the long list as you want to be very thorough. What you are listing is known as the functions and features of your application and this is also your marketing tool. You cannot talk to customers how good your database is or your c# classes are tight – what you demonstrate to customers is how they can register and login to the service, how to create a campaign, how to contribute to a campaign and explain the benefits in a workflow manner. When the customer follows your demonstration and workflow then that is how customers get sold on your technology solution.
So now you document the workflow and you can just use Microsoft Word SmartArt feature or use just any diagram or your own handwriting. You can always write out your technical specifications by hand and scan the drawing into an image you can look at later. So let’s use the example workflow of a customer deciding to share the discounting campaign on social media:
The more you define workflows, the better you can market your solution and understand how your product work and can explain to other people who will become confident of your service knowing you have it 100%. So make sure you invest time in creating your workflows because this is how you determine how to design the UI portion of your solution.
Defining the Views, View Model and Controllers Within ASP.NET MVC
Once we know our entities and workflow, then we can architect the ASP.NET MVC solution which should be pretty straightforward. With ASP.NET MVC4, you have the following layers:
ViewModel. This is a C# class of an object that can be used in the HTML part so you can have for example a ViewModel called Login that has an attribute for username and password. So in the HTML, you use the markup for Login.Username and Login.Password and you can just populate the view model which will map to the HTML web site.
Controller. The controller is a component between the class library and the HTML pages. The controller drives the page and have to match the same folder name and HTML view name. So if I create a controller name Membership, then the folder name in the view section has to be named /Membership and if I have a controller method named ChangePassword(), then I need a HTML view called ChangePassword. You will get this later as you develop but keep this in mind.
View. This is your HTML pages that will be displayed to the end user. This is where you just have HTML pages and you markup the HTML with code snippets to display the data coming from the Controller and the View Model. Please note that I use the Razor Engine within ASP.NET MVC4 and will be using this platform in future examples.
So let’s look at how I could architect the crowdfunded discounting platform in MVC.
View Model:
UserRegistration – this holds the signup information like username, password, birthdate and gender.
UserLogin – this holds the username and user password data that will be posted to verify account
Customer – this holds the data for the customer favorite coupons, favorite retailer and location to discover local deals
Merchant – this holds the information for the merchant on their retail profile and the number of campaigns and also the funds sweep and success of their campaign.
Contributor – this hold the information for the contributor information when they log in to see their history of contributions.
Crowdfunding Campaign – this hold the detail of the crowdfunding campaign, the money raised, an array of donors and the id to share on social network and link to the video of the campaign and more.
Discount Campaign – this hold the detail of the retailer, the deals offered and buy online pick up in store (optional – BOPIS may be done in stony|ellis if we have time)
Coupon Offer – this holds the coupon title, coupon terms, the unique code that translate into a QR code and expiration date of coupon.
Controller:
Membership – this is a reusable controller class we can copy and paste in all of our solutions. The methods will be ChangePassword, Register, Login, Recover and Activate.
Campaign – you will see use List() to display a list or grid and use Detail() to show one campaign. ASP.NET MVC4 has something called Web API that does this but we do not need to focus on Web API at this time.
Offers – once again, you will see List() for all the Offers and see Detail() for the Offer
Coupons – this will have List() for the save list of coupons and Detail() for the one coupon
MerchantProfile – this is the merchant settings for the merchant setting up and managing campaigns
CustomerProfile – this is the profile settings for the customer looking for deals
ContributorProfile – this is the profile settings for the contributor who make donations
Merchants – this has the List() to display a list of local and new merchants and Detail() for the one merchant.
Views:
/Merchants/List/60619 – this would display a list of Merchants in the 60619 postal code on the south side of Chicago. I can also do /List/New – to display new merchants and /List/Popular – to display popular merchants.
/Merchants/Detail/123XXX – this is the specific merchant I’m displaying like Dunn’s crispy cupcakes and can show active funding raising campaigns and current discounting deals to take advantage of.
I’m not going to be thorough on a blog article with all the MVC components but I hope you see the point of how to architect an ASP.NET MVC4 solution on your $5/month GoDaddy windows hosting account.
Finding a UI Template
We strongly recommend you do not try to build out the UI yourself or code your own – that is a waste of time as there is enough templates out there for you to just take and modify to work for your hustle. Keep in mind that the UI game changed you have to create a web site that can work on mobile as well as desktop and work with a mouse as well as touchscreen – so don’t even think about creating your own HTML code or writing your HTML code and if you taking a how to write HTML course, you are wasting your damn time.
Instead, we recommend you look at commercial templates and this blog strongly recommend WrapBootStrap first even though Stony|Ellis is using another template based from Template Monster. What you want to do is go to WrapBootStrap, look through the designs and the demos and look at all of the pages the template offer and see if it works for your technology application. Template Monster is huge but you can probably narrow down your search. WrapBootstrap really has everything you need.
Let us go into the templates that me and my crew are using.
SmartAdmin – http://wrapbootstrap.com/preview/WB0573SK0
SmartAdmin only cost $18 but it is packed with features. One of the things I like about Smart Admin is the dashboard and we are going to use Smart Admin for DBEXX, a binary options web site and View the Vista which is our goal-orientated social networking web site. In fact, you can visit viewthevista.com right now and see SmartAdmin template used in MVC4 with the membership component as we were testing compatibility. The nice thing about Smart Admin is the new voice control feature where a person can talk to the browser in a generic Siri-like fashion to navigate to a page. That means you can build out huge kiosks or a mobile app that can be voice activated like a banking application to view money transfer status or account balance.
Epona – http://wrapbootstrap.com/preview/WB0464P7N
Swagg-Scientific and the 3rd Strategic Institute is currently being developed using Epona which is a great template for us. What I like about Epona is this package has templates for both e-commerce and business marketing and the sliders that can be used on kiosks as well as desktop applications. So you can create a slideshow on your tablet to showcase your product and then have a checkout and shopping screen on the tablet also to give to your customer to purchase on the spot. Also, if you check out this Epona template page at http://stepofweb.gweb.io/.templates/Epona/HTML/shop-components-product-carousel.html – this component can be done on a 70-inch screen for a retailer to show off their products and possible be touch enable to show the product details and “Request Assistance” button to connect to a sales associate.
Kupon – http://themeforest.net/item/kupon-clear-professional-coupon-template/full_screen_preview/5360851
Kupon is the $16 template we are using from Theme Forest to be the UI for the Stony|Ellis crowdfunded discounting app. We can take the code here and just customize for offers on the crowdfunded and also use the same styles to create the back end system. I really love the image hovers that can be used for mouseover effect – http://remtsoy.com/tf_templates/koupon/features-image-hover.html
So as you see, we can use these existing templates that are all over the internet and professionally done and just customized them to our solution. What you should do is browse these templates and check all the pages they have and write down which template will work best. Then what you do is download the template and just use the ones you can for your HTML pages. So with Stony|Ellis, we just take the pages like this one http://remtsoy.com/tf_templates/koupon/coupon-page-video-hosted.html and this is what we going to use for the funding campaign page of a merchant. Just map the pages you need to the template pages and then you start customizing.
Even if you are not good at the UI, you need to do this step of identifying the page look and feel so when you do hand it over to someone claiming to be a professional web designer that can do the UI, they have a baseline template to work from to complete your web site and make it look real nice and polished.
Getting Started
We have discussed how brothas and sistas can design a user interface based off entities and workflows and use existing UI templates for customization. Once you understand all the entities involved and the workflow, that is really your marketing material and you do not need to come up with buzzwords and other silly gimmicks. If you look at Apple when they release their product line, you will see the CEO of Apple discuss UI features and a walkthrough of how to accomplish something, that is your goal in designing an effective UI with a good user experience or UX.
Define the workflow and define the UI pages and then look for efficiencies. In the crowdfunded discounting example, I can have everybody use the same login and registration page and once they sign in, they can apply to be a merchant, donate like a contributor and everybody can receive coupons like a customer. So make sure you do a rough draft of your UI then look for places you can streamline and improve the workflow to reduce the amount of work it will take to get things done.
Then you design the ASP.NET MVC4 framework with the view model, controllers and views and just write this out as again, you may also find efficiencies and improvement in your second pass and review. Remember that you have to get to success after multiple tries and rarely get it right the first time – accept this as you walk on the path towards your success. Then look at existing UI templates on web sites like WrapBootstrap and apply existing designs to your web site as a markup and then work on refining the web site, replacing the template with your logo and pictures with your pictures and then once you satisfied, then apply to the ASP.NET MVC4 template.