Dayna Jackson

@daynajackson-blog1

UX UI | Communication Design | AUT

242 posts

Video

a.k.a Alfie comes to life!

I chose not to edit this to sound, as it won’t be playing sound during the exhibition so I didn’t want to be distracted by trying to edit it to a backing track that no one would hear anyway. I might make a few tweaks between now and the exhibition in terms of the layout and the information of the video; this version is a little over 90 seconds but going any faster could make it really hard to keep up with, so depending on the other material I design for my exhibit (a banner/poster to hang, etc) I might be able to cut a few bits out to keep the time down. I’ll probably also test the video on a bunch of people to make sure it’s understandable. But for now, it’s pretty done. Woohoo!

Oven Interaction

a.k.a example of an appliance which Simone can use after getting permission. The phone on the left represents Simone while the one on the right is Helen. This shows the feedback loops encountered in the process of using an appliance which needs supervision.

Slowed the video down to half speed, so it’s clearer to see the interaction pattern. Also compressed the video so the quality isn’t wonderful, but the good stuff is in the final video!

Cooktop Interaction

a.k.a example of an appliance that can’t be used (by Simone, at least).

Slowed the video down to half speed, so it’s clearer to see the interaction pattern. Also compressed the video so the quality isn’t wonderful, but the good stuff is in the final video!

Toaster Interaction

a.k.a example of an appliance that can be used.

Slowed the video down to half speed, so it’s clearer to see the interaction pattern. Also compressed the video so the quality isn’t wonderful, but the good stuff is in the final video!

Parental Controls Interaction

Slowed the video down to half speed, so it’s clearer to see the interaction pattern. Also compressed the video so the quality isn’t wonderful, but the good stuff is in the final video!

Set Up Interaction

Slowed the video down to half speed, so it’s clearer to see the interaction pattern. Also compressed the video so the quality isn’t wonderful, but the good stuff is in the final video!

Marvel Prototype for Alfie

Rough Prototype

I put together a quick prototype as they always tend to help me figure out all of the screens/assets I need for animating!

Interaction Brainstorms and Video Planning

I sketched these out to put onto paper what I was imagining for movement in my head down so that I’d have a general guideline for what I was animating. My sketches and writing are horribly messy because as I drew some of the interaction/transition ideas I realised that the things I was imagining weren’t always cohesive in terms of overall movement. So, I had to go back and edit some of my ideas a little bit, because it’s important that the animations move similarly to create a consistent design. I’ll more than likely end up making small changes as I go, but these sketches are a place to start!

#CDS6 #i tried to find a place in the house with better light but i just got arm shadow in my pics oops

Final Screens - Appliance Use

Final Screens - Parental Controls

Final Screens - Set Up

User test

With the screens now at a mostly final stage, I did a user test using Sketch Mirror on my phone to make sure my screens were clear to understand and easy to use. Similar to my last test, I got users to scroll through the pages and narrate what they thought each page was for to me. I tested on a few different age ranges and got fairly similar opinions which was great given that this is aimed to a wide age range of people. My test observations are noted below. If there’s nothing written about a screen, it’s because all users read it and understood it as intended. Screen numbers correspond to the screens of the previous post.

Screen 3/Enter name: First thought “that’s a lot of reading” but upon reading deemed all info concise and necessary.

Screen 4/Icon customisation: the little characteristic that is currently “on” the icon should be shown as selected, so users can see what they’ve currently got chosen.

Screen 5/Add family: explanation copy is a bit ambiguous in regard to doing it later - it almost sounds like it’s telling you to do it later. Reword perhaps so there are instructions for doing it now followed by a “you can do it later if you want”. Also bottom button wording change: “skip adding family” on the first page to clarify that you don’t have to add family if you don’t want to. When you add another person this will change to “done adding family”.

Screen 6/Add Bob: can hardly tell that it’s a scrollable page. Suggestions for modification were to either make the “hair” subtitle more visible above the toolbar, or make the toolbar transparent so it’s obvious that there’s more to see behind it.

Screen 18/Parental controls via person: “can use” subtitles could maybe be bigger, but everything is clear to understand and is a good, easily readable size.

Screen 19/Parental controls via room: clearly understood the switch between people and rooms, yay! This was the area that I was most worried would confuse people. However, can’t see from body copy how it applies to appliances - maybe move the paragraph to below the overall room settings, but above the appliance overrides? This layout could also allude more strongly to the scroll of the page.

Screens 19-25: kitchen icon is not hugely obvious that it’s selected even with the white fill - could there be a secondary method of showing selection vs not in the toolbars? Maybe a white line underneath what’s selected, or fading out the others a bit?

With this feedback in mind, I’ll make the appropriate tweaks plus any others I think of to get the current screens to a final state which I can then animate to show interactions and transitions.

Development v4

Updated following feedback in the last studio session. Biggest changes include the layout of the set up process (which now includes how to make your person icon), the size and stroke of the icons (smaller and thinner), and a few more appliance pages which will be part of my final video.

The other most noticeable update is the introduction of a screen-width bottom button in the set up flow. I initially tried this because in the old style of buttons, there was an annoying gap in the bottom middle of the screen between the “next” and “skip” or “edit” buttons. It made the screens look really off balanced - there was an uneven amount of space between top and bottom of elements on the white part of the screen, and it couldn’t be evened up nor was there enough room to make it look purposefully (and nicely) asymmetrical.

So, I tried a button the same size as the bottom toolbar seen in later flows. Immediately I thought this brought more consistency into the set up screens in comparison to the rest of the screens. It solved the problem of elements on the screen looking weirdly spaced, and also gave me room to have text inside this button, which I have tailored to each screen/situation as an added confirmation of what the user is about to do. I think this is a nice feedback loop which will ideally help the user to feel in control of what they’re doing and completely understand what is happening, demystifying the technological process, which has been one of my main design goals all along.

Last (ever!) studio discussion

I printed out the screens I had and started writing my own notes on them, then discussed with G what I needed to focus on to finish. The biggest things now to happen:

would it be better if you could handle the entire person set up process for one person at a time as opposed to splitting it up into stages and jumping between people?? this could give more room to show how you can customise the little icons for people too

the mid-sized icons (the ones that get dragged around to change settings) need to be smaller. Make clearer difference between these ones that control settings (small, five per row) and the icons that lead to a new page (large, three per row). Then there’s the extra small icons which are used as visual aids and in the tab bars.

focus on showing how obvious/relatable appliances work first because that’s how people will understand the work, but try make a more complex one if there’s time to make sure that the system holds.

show the feedback loops and relationships/communication; really focus on the context of family use rather than making it a technical thing.

#CDS6 #it feels so weird that we just had the last ever studio class for this degree #how did we get here so fast

Development v3

Featuring a few new pages; a more explanatory landing page, and appliance pages for toaster and cooktop which have been taken from last semester’s work, improved in terms of content and structure, and updated to fit the style of Alfie.

The developments as detailed in the previous post have made a huge impact on the design overall. I’m still refining the icons through a lot of trial and error, focussing on different stroke weights and sizes on the page. I think the stroke still needs to be a bit thinner, because pages with a lot of icons on them are starting to look very heavy.

I’ve also updated a few of the set up screens because I thought it looked weird having the first text fields without subtitles above when adding Helen and Bob. This was because originally the question “what do your children call you/them?” was the subtitle in white up the top of the page. I changed these subtitles in order to have the questions above the corresponding text fields and think it makes a lot more sense.

I’m also not 100% happy with the parental or settings icons in the bottom toolbar. I don’t actually like the connotation of the padlock for parental controls as I think it’s communicating control and lockdown which is not what Alfie’s about; it’s about creating a safe environment for a family. With regards to the settings icon, it’s more dense than the other icons and is a bit sharper in shape, so it just looks a bit out of place.

Some key updates

Screenshots that I took while using Sketch Mirror in the process of designing, showing some key developments of visual elements.

Icons v3

The first three sets are appliances, people, and rooms. The last set shows the more general icons: parent, child, person, room, yes, no, next, settings, home, and parental controls. In as many cases as possible, I want the icons to speak for themselves as to what they represent, but all of them will appear with labels too which will clearly show what they mean.

I tested all of these icons throughout the design process by asking people to tell me what they thought everything was, and making improvements where needed. By the stage above almost all of them were clearly recognisable without labels save for a few in the last set. Again, I tested these using Sketch Mirror on my phone as I was designing to make sure that they were understandable at all sizes on screen.

I’m still trying to figure out the distinctions between selected and unselected icons; my developments so far have focused on outline/filled icons for unselected/selected, but the smaller the icons get the more difficult they are to read with the fill, so I thought I’d try a few different colour options on the stroke to see if there’s any merit in using light/dark colours to show unselected/selected icons.

Dayna Jackson @daynajackson-blog1 - Tumblr Blog | Tumgag