{"id":206,"date":"2018-04-26T15:52:10","date_gmt":"2018-04-26T14:52:10","guid":{"rendered":"http:\/\/generic.wordpress.soton.ac.uk\/neighbourhood\/?p=206"},"modified":"2018-05-04T11:41:51","modified_gmt":"2018-05-04T10:41:51","slug":"interface-design-note-2","status":"publish","type":"post","link":"https:\/\/generic.wordpress.soton.ac.uk\/neighbourhood\/2018\/04\/26\/interface-design-note-2\/","title":{"rendered":"Interface Design Note #2"},"content":{"rendered":"

Hello everyone, this post is about some updates to our Neighbourhood interface. We now have the Reward Points pages and complementary My Account page according\u00a0to Mariam’s post<\/a>.<\/p>\n

As Mariam posted yesterday, we introduced Reward Points<\/a> as the result of our discussion, so we need to have relevant pages to for their use. The functionalities needed for these pages are: Selecting Location, Using Reward Points and Transactions History.<\/p>\n

Firstl, we need to change the tab bar from four buttons to five buttons to add the Reward Point section (Fig. 1).<\/p>\n

\"\"<\/a><\/p>\n

Fig. 1<\/p>\n

And now we have pages (Fig. 2).<\/p>\n

\"\"<\/a><\/p>\n

Fig. 2<\/p>\n

The first page shows the balance that a user has. The two drop-down menus allow users to select different\u00a0locations, shops and\u00a0restaurants etc.. The discounts according to the establishment selected are placed\u00a0below, showing the type of redemption.<\/p>\n

The second page (the second page\u00a0from the left in Fig. 2 ) is the Reward Points transaction history, showing all transactions with the amount, time and location by clicking the document\u00a0icon on the top right of the\u00a0page.\u00a0Shivam suggested that users can directly click a number so that it would to more clean and short to show the history page, but I decreased the font size of the number, which makes it difficult\u00a0to click, therefore I also added an icon to enable easy user navigation to the history page.<\/p>\n

\"\"<\/a><\/p>\n

If the user clicks a discount card, the detail page with a barcode will pop over the page (The third page on the right in Fig. 2.) ready to\u00a0be scanned. Once a deal completed, the user’s total Reward Points will change, as per the transactions. The flow of a transaction was introduced in Mariam’s post<\/a>. There are two styles of details page, one blurs\u00a0the background and the detail page on the first page, another one is opening the new page to show it.<\/p>\n

\"\"<\/a><\/p>\n

Here I encountered an issue\u00a0about how a user’s Reward Points balance shows. At first, I made a the font size for the balance very large. However, this leads to a big blank space on both sides of the number (Fig. 3) and also I was considering whether the amount of the balance should be emphasised by a big font size or not. With reference to some economics apps, I decided to use a smaller font size,\u00a0because the key function\u00a0is not showing the balance on this page.<\/p>\n

\"\"\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\"\"<\/p>\n

Fig. 3.<\/p>\n

I used a wireframe\u00a0template designed by the Adobe XD team, as a basis for the visual style deployed here, using some of its icons and elements:<\/p>\n

\"\"\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\u00a0\"\"<\/p>\n","protected":false},"excerpt":{"rendered":"

Hello everyone, this post is about some updates to our Neighbourhood interface. We now have the Reward Points pages and complementary My Account page according\u00a0to Mariam’s post. As Mariam posted yesterday, we introduced Reward Points as the result of our discussion, so we need to have relevant pages to for …<\/p>\n","protected":false},"author":2966,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[23],"class_list":["post-206","post","type-post","status-publish","format-standard","hentry","category-uncategorised","tag-design"],"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/generic.wordpress.soton.ac.uk\/neighbourhood\/wp-json\/wp\/v2\/posts\/206","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/generic.wordpress.soton.ac.uk\/neighbourhood\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/generic.wordpress.soton.ac.uk\/neighbourhood\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/generic.wordpress.soton.ac.uk\/neighbourhood\/wp-json\/wp\/v2\/users\/2966"}],"replies":[{"embeddable":true,"href":"https:\/\/generic.wordpress.soton.ac.uk\/neighbourhood\/wp-json\/wp\/v2\/comments?post=206"}],"version-history":[{"count":7,"href":"https:\/\/generic.wordpress.soton.ac.uk\/neighbourhood\/wp-json\/wp\/v2\/posts\/206\/revisions"}],"predecessor-version":[{"id":217,"href":"https:\/\/generic.wordpress.soton.ac.uk\/neighbourhood\/wp-json\/wp\/v2\/posts\/206\/revisions\/217"}],"wp:attachment":[{"href":"https:\/\/generic.wordpress.soton.ac.uk\/neighbourhood\/wp-json\/wp\/v2\/media?parent=206"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/generic.wordpress.soton.ac.uk\/neighbourhood\/wp-json\/wp\/v2\/categories?post=206"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/generic.wordpress.soton.ac.uk\/neighbourhood\/wp-json\/wp\/v2\/tags?post=206"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}