Ivana's workbook

[ivana-uxui]

Dairy App Video

This video starts off with briefly mentioning the need for journals and diaries, and also describing what makes Dairy different to other apps. The main aspects of Dairy (creating notes, and adding moods) are outlined, and there’s a section for extra features.

Credits: All photos owned by me. Visuals by me. iPhone by https://p-px.com/iphone-6s/ Music by https://www.soundcloud.com/ikson

[ivana-uxui]

Dairy tutorial Video (Demo)

This is a video of the prototype (DOWNLOAD HERE! – Mac only). If you don’t have mac, or don’t want to download the prototype, this video will show you the content! 

To open: Go to System Preference  >  Security & Privacy >  General  > ‘Open Anyway’

The demo only contains 3 tutorials: Creating a calendar event, creating a collage and adding moods.

(The video is sped up!)

Credits: All photos owned by me. Visuals by me. iPhone by https://p-px.com/iphone-6s/

[ivana-uxui]

Final screens

These screens encapsulates the features that I have developed in my app.

[ivana-uxui]

Research Report

Here is a summary of my project, in terms of the context, user research, methodology and milestones!

[ivana-uxui]

Tutorial List

Here is a list of the tutorials, and the respective intro cards.

[ivana-uxui]

Edge Cases

I thought about possible edge cases for the main aspects of the application. Some aspects I didn’t repeat (like untappable buttons/grayed out buttons to not allow users to enter in values that aren’t appropriate, etc). 

[ivana-uxui]

Tool Tips/Info cards

I decided to look at the original places where I planned to put in tool tips and info cards, and design what the other cards would actually look like. There were only about 2 other places where I didn’t design, and most of it were located around the moods area. This makes sense because it’s the most ambigious ...? 

Memories

This was already designed as it was part of a task for an earlier iteration.

Stats

The one bordered with blue was already designed for an earlier iteration, but the one with the pink border is a newly designed card. It talks about what the point is to the recommended actions section, and what Dairy can do to help the user.

Moods

This one was probably the most difficult to try to make simple. It doesn’t look consistent as the first page (mood w faces) already look like the tool tip cards (which probably isn’t the best way to design it), so I had to change the subsequent cards. The first card outlined in the blue border basically shows the meanings of the words. I took the meanings from Dictionary.com (mainly) and it was quite challenging to have descriptions that clearly indicated the difference between words that are very similar. The pink bordered card explains the difference between moods and emotions and the model system that the app uses. Trying to really explain such complex things with simple diagrams was difficult, and I wrestled between showing and explaining more or not. I decided to not fully explain everything, with the assumption that no one would really read it.

[ivana-uxui]

Working on the video:

I watched some app trailer videos, and I mostly looked at planner/journal apps to see the different ways they’ve tried to tackle trying to convey their application.

Box Notes:

Person walking through the application. There are scenarios with the application, and the device is shown with zooms (Box, 2015).

Cal:

Real world uses – different events/videos. Over the shoulder shots (Any.do, 2013).

Fantastical:

Features written down, with app shown and zooms when appropriate (iOS Gaming World, 2016).

SolCal:

Starts off with the context, “Too many tasks.” Features illustrations (Sol Studio, 2014).

Journey:

Main features, and then shows flows (2 App Studio, 2017)

Main takeaway:

The apps answer “why does [this app] exist?”

Showing the main parts

The value of the app is shown

Reference:

2 App Studio. (2017, December 4). Journey app - diary, journal [Video File]. Retrieved from https://www.youtube.com/watch?v=wqjlOIkQtzY Any.do. (2013, December 4). Cal for Android [Video File]. Retrieved from https://www.youtube.com/watch?v=uIgW719D4AQ Box. (2015, May 19). What are Box notes? [Video File]. Retrieved from https://www.youtube.com/watch?v=E6s0_MpBAP0 Sol Studio. (2014, August 18). SolCalendar 1.5 [Video File]. Retrieved from https://www.youtube.com/watch?v=81GKFqr8S5w

[ivana-uxui]

Changes in the UI

Icons:

I did ignore this for quite some time, and I decided to revisit the icons at the bottom nav bar.

The Atlas was changed to a paper map style icon because people were confused as to what the original was, especially with the mic icon looking a little similar. I moved the position just for visual balance in the bottom nav bar.

the add note entry was changed to be more circular (purely for aesthetic reasons – just so not most of the icons were boxy or squarish.

The mood stats icon was changed from the bar graph icon to the line graph icon to show the actual graph that’s used.

Event review:

I added a few more steps - which acted as progressive disclosure to guide the user to make better use of the app.

Instead of using only icons (as it can be ambiguous,) I simply just used words and colour to be more straightforward.

[ivana-uxui]

Tutorial checkboxes

I changed the colour and the shape (from the yellow). I explored around different radii, drop shadows and pointer shapes. 

I asked my friends which colour (yellow (A) or blue (B)) caught their eye the most. All but one said blue. That one person said that the blue didn’t suit the interface well. But I thought that that was great because the point of these textboxes - to stand out from the UI.

[ivana-uxui]

Settings

I haven’t change much from the settings flow as before.

[ivana-uxui]

Memories

I have added a ‘save’ button which acts as a validation button.

[ivana-uxui]

Atlas

Here is the atlas flow, not many changes from the prototypes.

[ivana-uxui]

Event making & Reflection

Not much has changed from the last iteration.

[ivana-uxui]

Stats & Moods 

Here are the flows for the screens. Not much has changed, other than adding a couple extra keys for the graph, and adding a sentence for the mood tracker’s ‘base it on location’

[ivana-uxui]

Collage

Not much has change since this one was tested, apart from the removal of the “multiple pictures” button, and just automatically allow users to pick more than one images

[ivana-uxui]

Tutorial

I didn’t really change much with the tutorial sequence. For the most part, I took out the sequence of screens which showed the user what to do. I took it out because the steps were too long and I think the tutorial does a better job of showing how to use the app.