Mobile Media: Session 3

Today’s session was our introduction to AppFurnace. We moved from first drafts to the final design and production of our app. We used the prototype wireframes on LucidChart as a starting point.

To add “buttons” on to the wireframe, drag them from the side panel labelled ‘Widgets’ on the Layout page. Change the look on ‘properties’. For the first page on our app we inserted two buttons. The first for rewards, the second for setting the timer. After dragging the ‘button’, we needed to change its appearance to the images we wanted. By clicking the ‘Files’ page we uploaded the images we wanted, then on ‘Layout’ we selected the image from the list in the button’s ‘settings’.

screen-shot-2017-02-27-at-15-00-38

screen-shot-2017-02-27-at-15-15-46

There is a slight difference compared to the draft wireframes on LucidChart, as we have made the icons transparent to make them stand out more. We have also added labels to the buttons to show the audience exactly what they link to, making it easier to navigate.

screen-shot-2017-02-27-at-15-05-07

screen-shot-2017-02-27-at-15-09-27

The next page is the times for how long to set the timer for. We kept it very similar to the draft, but made the buttons rounded at the corners. This creates a calmer mood for the audience. Furthermore, adding the icons for navigating back ‘Home’ or to the next page makes it easier for the audience if they change their mind.

screen-shot-2017-02-27-at-15-10-45

After tapping “15 Minutes”, the ProcrastinationKiller will start the timer and the user can begin their studying, work, or just life without their phone. To create a countdown timer on the app, we selected functionality (‘010101’) to attach a function to it. Open the ‘Code’ page, copy and paste the code for a timer into the main window. Then go back to functionality and label it. Our function is labelled ‘ui.countdownDisplay’.

screen-shot-2017-02-27-at-15-14-38

Once the timer is up, the screen should change to ‘Time Up’, where the audience can select the reward button to collect their gift. The padlock image, showing locked then unlocked expresses the theme that the user has unlocked a reward by not using their phone for 15 minutes; so it acts almost like a game.

screen-shot-2017-02-27-at-15-16-41

However, we have not yet worked out how to adapt the app so that the ‘Time Up’ screen will appear automatically after the timer has run out.

screen-shot-2017-02-27-at-15-19-16

This next screen is the rewards page, whereby if the user clicks their reward button, for example ‘Voucher for free Costa Coffee’, they can open the code to redeem it.

screen-shot-2017-02-27-at-15-22-26

This sequence should be applied to all of the times on the list.

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s