App Prototyping using WordPress

Fast app prototyping using WordPress? An example for a blind wine tasting app based on a responsive WordPress template and a plugin.

Have you ever experienced that you were looking for an app to fulfil a specific task but could not find anything? This is what happened to us when we were organizing a blind wine tasting event in our apartment. Since we are living in the ICT-WG, we wanted to rate the wines digitally, but there were no apps, web-apps or websites with the specific features available.

So we decided to build our own wine tasting app prototype using WordPress. A WordPress website is platform independent and also needs the least design effort. We took a responsive template that came closest to our concept and extended it with a rating plugin. Within an hour we had our blind wine tasting website. We then spent two hours additionally to get the design close to perfection 🙂

The ICT-WG Wine Tasting Website

Bildschirmfoto 2016-01-24 um 22.58.12

Overview of all wines and their scores.

For each wine we were about to taste, we created a blog post. Each post consists of a rating section at top and a comment section at the bottom. The rating section differentiates between “nose” (aroma in the glass), “tongue” (taste) and “finish” (aftertaste). On the main page, the posts are arranged in a grid and give an overview of the intermediate results. The names of the wines, that can be seen in the screenshots below, were added after the wine tasting evening.

Blog post for a wine showing the rating and the comment section

Rating and comment section for a wine.

image1

View on a mobile device.

Web-apps

If the website is based on HTML5 and CSS3, it can easily be converted to a web-app in a few steps. A web-app serves as an alternative for apps with little content. It can be quickly implemented, is platform independent and can be immediately published without any app-stores. Drawbacks of a web-app are the worse performance, the need for constant internet connectivity and the limited access to operating system features.

Conclusion

A responsive website serves as a good starting point to test an app idea. If the target is a web-app, the website can be quickly converted adapting minor parts of the code. If the target is a native-app, the website serves as a prototype to try out the design and the features of the app.

IMG_0250

Blind wine tasting setup.

Visit our wine tasting website: http://winetasting.ozaehner.ch/wines/