Timeline
This week I'm finally breaking into parts of the 'Test and Refine' stage alongside designing my project in Figma.
Week 8's tasks, Own Work.
I'm still having issues with my mindset. I believe that the lack of deadlines and knowing that the end of my University degree is coming up has contributed to this. I'm working with what I've got and sticking with the motto 'slow work is better than no work', as I feel myself moving slower than I'd like and would like to allow myself some grace.
Volunteering
Talked with the same resident I met last week, but rather than having a standard conversation, myself and my usual resident friend attempted to teach him how to play Scrabble. He seemed to respond well to the idea that it was a 'practice game' and was more willing to participate in this way. He also appreciated our input on his gameplay. There is the opportunity to use this as evidence for a more thorough tutorial for my games.
Figma Prototype V1
On Monday, to support my pivot to Figma, I spent 2.5 hours setting up my project. I set it up to be formatted to my phone, a iPhone 13 Pro Max. This means it may not view well on other models of phone, however, all I need is a good format for myself so I can show it for feedback and presentation. All of the assets used are recorded on my Miro board. I worked with my wireframe that I made in Week 4 as well as the interface layout brainstorm. I found the interface brainstorm the most useful tool as it inspired me with both layout and content considerations. I did some light sketches to gather my thoughts but mainly worked off of the brainstorm. You can see the brainstorm below on the left in Figure 1, and the sketches on the right in Figure 2.
From left to right:
Figure 1. Interface Layout Mood Board, Own Work.
Figure 2. Layout sketches, Own Work.
Chat Page
I'll be going over the three main pages that I created individually to explain my thought process, each with labelled sections. The chat section, shown below in Figure 3, was based on Replika AI's layout, specifically section 1 where the AI is shown next to the text. I thought this was a great way to maximise the range of visible conversation alongside the character.
Figure 3. Initial prototype Chat section developed in Figma V1, Own Work.
This is the section where I had the most layout fiddling, as any changes to the layout meant moving each box and it's contents individually. I also had some trial and error to have it fade out at the top, implying the user can scroll up. I have mentioned in previous blogs that I'd like to minimise scroll movements, however, I believe it's useful to the user to have the opportunity to view chat history. I assume that the amount of text shown in section 1 is enough for many users to not need to scroll. As a side note, the conversation here was directly taken from my Inworld AI that I developed in Week 5.
As suggested to me by a peer in Week 5 during scope feedback, I've included an option for the user to 'call' the AI. You can view this in section 2. My idea is that this button will open up a 'face to face' call where the AI is shown from the bust up. In this mode the user can talk freely with text-to-speech replies. For accessibility the replies will also be shown in text. I'm unsure whether I also want to have a video feed of the user to simulate a real facetime.
In section 3 the user can tap auto-response buttons to reply to the AI. This allows the user to have freedom of communication, whether it be trouble with mobile keyboards or low interest. My original idea proposed in my Week 4 wireframe was to have these buttons be more detailed responses formulated by an AI. However, I ended up simplifying the buttons to allow for better fluidity with the design. Aside from agreeing and disagreeing buttons, I'd also like the buttons to be predictive and allow options for quantity responses (i.e. 'A lot', 'Not much'), emotional response (i.e. 'Good', 'Bad'), and more.
At the top in section 4 I followed Replika's layout with the name of the companion. I imagine that the user can choose the name of their companion, and may want to remember the name they chose. There is the option to include an AI character customisation button in this section, as I suggested to my Plan A scope in Week 3. I believe this will remain a Plan A task - i.e. I'll get to it if I finish everything else in good time.
Games Page
In the Games page below in Figure 4, I followed Elevate's games design as I liked the layout of the large buttons.
Figure 4. Initial prototype Games section developed in Figma, Own Work.
I took the game images from an online gaming website Arkadium as they matched the square format and the memorable interesting design I was looking for. I don't intend to stick with these game choices, but I'm unsure what I'll do for my final assets. I will have a go at making the assets myself, but I doubt they'll live up to this quality. I may need to enlist help or pay someone. The brown background was my attempt at linking the design of this page to the Chat page. I thought it turned out okay. Not amazing, but okay.
Profile Page
The profile page, shown below in Figure 5, has a score board based off of the brain training app Peak.
Figure 5. Initial prototype Profile section developed in Figma, Own Work.
I realised that I needed a settings button, so I decided to place it in this page (section 1). Doing this allowed me to make the button more than just a logo like other apps. I also believe that the content of settings will tie in well with the profile page, as this is where the user goes to consider their involvement in the app. Features I'd like to have in the settings page include: swapping to a different logged in account, changing app colours, changing app font size, among other typical settings content. I believe that this will help the flexibility of accessibility, as users who share a phone can keep different profiles, and users with vision impairment can change the app at will.
In section 2 I decided to show the user their overall performance. Other options for this section were a daily objective, a log in streak, and achievements. I wanted to take the pressure off of the user and allow them to work towards an overall goal at their own pace, however, I will be bringing this section up in future feedback sessions. It will be an easy change if necessary. I added a badge that correlates to a user's score for added motivation.
Section 3 shows the user their development in six areas. These areas relate to the progress made in the games. I may need to figure out how these areas are calculated for my concept.
Afterwards, I felt great about my progress and was happy that the session both gave me something I could show people and kept me on track with my 'Working Prototype' milestone. I believe that encouraging more sprint working blocks like this would be monumental to my progress, however, I would need to focus less on perfection and more on an outcome. I talk more to this later.
Figma Feedback
I got feedback in three instances. Two one-on-one sessions with peers and one after a stand-up presentation in front of my stream partner. I was trying to get a range of opinions so that I could improve my concept and graphical execution. It was great to hear a range of opinions so I'd like to continue with this in a greater volume next week. Because of this, I've added the task 'Figma Feedback (minimum 5 peers)' to Week 9.
Here is a summary of the most relevant points I got in these sessions:
I got a lot of layout criticisms, namely alignment of objects, format consistency, and colour suggestions. I made sure to keep in mind my UX/UI guideline to ensure that comments on colour aligned with my demographic.
The biggest layout feedback I got was ensuring that the theme between each page stayed consistent. Many responders felt that the Game page's background colour could tie the other pages together.
My navigation bar was a weak point for my design.
After reflecting, I realise I didn't get any feedback on my choice of content. I will bring this up to future peers to validate my design decisions. For future sessions I'd like to conduct more one-on-ones. During one of these sessions I was given off-hand comments by someone sitting nearby. Next time I'd like to ask any on-lookers whether they'd like a more involved role so that I can get better quality and quantity of feedback.
Figma Prototype V2
To start this stage I worked on all of the most relevant points from my feedback sessions. Here are the key changes, most directly influenced from feedback I got:
Changed the colour scheme of all the pages
Increased quality of nav bar icons
Curved the nav bar
Changed the mic icon to a send button as it was redundant next to the call button
Made the badge in the Profile into an asset without an outline
Fixed the alignment of the Profile text
Enlarged the profile text
I've added each new page into the gallery below.
Second app prototype in Figma, Own Work.
I'm really happy with this new design and believe it's a direct result of the great feedback I got from peers. I am making the assumption that the features and design I'm implementing would work for my demographic, however, from a visual point of view, it's working well. I would like my Figma to look and feel like a real app someone might use and the design contributes a lot to that. This outcome supports my plans to conduct feedback with many more parties, as the quality is so greatly influenced by it.
From here I attempted to create more pages. Future pages have less thought and feedback put into them, so I found it hard to get something I was happy with. As well as this, I was attempting to match the polish of the existing pages during development. This meant that my perfection stopped me from finishing a page. I've created a game page for when you tap on a game button, and you can see this below in Figure 6. This figure is presented differently than the previous figures. This is because some of the icons showed artefacts in development mode that aren't there in presentation mode.
Figure 6. Sudoku game subpage, Own Work.
This page was loosely based on Elevate's game page. It was altered to reflect the style choices I had going on in the rest of the app.
In section 1 my initial idea was to show a similar banner to the button the user presses. This would aid to the visual link between pages. However, when implementing this, I didn't like the readability of it, and decided to put text underneath to make the name clearer. Eventually I decided to scrap the banner all together, and section 3 ended up reinforcing my original visual suggestion. In this section is the Exit button in the corner, and I followed the same clarity style as the settings button in the profile page.
Previous peers suggested that the difficulty of a game could increase with playtime. I want to allow the user to choose their own level of difficulty to allow for more flexibility, and you can see this in section 2. The score on the side directly correlates to the high score that the user achieved on that difficulty. This is a design element I'd like to have a conversation about with future peers.
It was difficult for me to decide what should go in section 3. In Elevate's game page, they showcased the time trained and the number of wins. I was interested in this, but I was unsure how to segment the overall layout so it looked balanced. Other options I considered was a badge or star system for progress, a game objective, and a line chart of previous scores. I knew I wanted a re-playable tutorial section but I didn't want it to be nested within a button. I do like how this section looks, however, the format may change when the image put there is a portrait screenshot. My intention is for this section to be an animated tooltip, that, when clicked on, it expands to an annotated animated tutorial. This expanded tutorial will potentially have voice over for better communication.
A peer suggested that I change the colour of the call button in the chat page as it wasn't used anywhere else. I felt that the expected design convention was to have call buttons stay as green as not to confuse the user. This convention is enforced by green 'call accept' buttons, the green icon for 'Phone' in iPhone, and chat apps like WhatsApp having a green branding. Now, in section 3, I put an image of the game right above my grey 'Play' button in section 4. I didn't want to confuse the user that tapping on that image will bring them to the game. I decided to carry the colour of the call button to here to normalise the colour palette and to lean into the 'green equals go' convention.
Learning Figma
While completing the game subpage in Figure 6 and spent a lot of time attempting to learn some out-of-the-box Figma functionality. Below are some of the things I tried:
Learning how to create component variants so that my buttons darken on press. This was successful.
Attempting to swap out the high score for each button difficulty in section 2.
Attempting to have only one button pressed at a time in section 2.
Having the game subpage move in on top of the Games page. This was successful.
Attempting to use Figmotion to make the hand in section 3 be animated.
I also tried to make a mobile keyboard come up when tapping the messaging bar on the Chat page in Figure 3. This was partially successful.
Many of the things that were unsuccessful were due to being locked behind a Figma Pro paywall. I spent a lot of time trying to get these elements working, which extended the length of time it took to complete the subpage. It made me feel a bit frustrated as I didn't feel like I was progressing at the pace I was for the last few pages. But I understand that it was the struggle of learning something new that contributed to this.
Figma Action Plan
To move forward from this, I'd love to make a page for each Figma section by the end of the week. However, I'd love to do them with a basic functionality so that I don't get caught up in the finer details like I did with my second attempt. Even if a page has the a basic wireframe I'll be happy with it. I've mentioned previously that I'm aiming to get as much Figma feedback as I can, so I'm going to stick to that. On the 30th of September (this Saturday, one month from submission) I'm going to purchase a Figma Pro one month subscription and implement things I was barred from implementing before. I want to do some thorough research into games this week so that I can populate my Games page with more accurate information.
To support my future prototyping and projects, I'd like to study more UX/UI concepts. I've pulled my 'Visual Design Principles' lecture from the Human Computer Interaction class I took in Computer Science last year. It goes over Gestalt's Principles of Perception as well as a few design principles. I've noted the ones I could work with the most below, all taken from Visual Design Principles (Weber, 2022):
Proximity principle: Objects that are close together are seen as belonging together.
Similarity principle: Objects with similar visual characteristics can be seen as a group and therefore related.
Common Fate principle: Objects that 'move' together are seen as related.
Symmetry principle: Symmetrical objects tend to be seen as complete figures that form around the middle.
Surroundedness principle: An area that is surrounded is seen as the figure, and the surrounding area is the ground.
Balance: balance in a design is achieved by having an equal visual 'weight' of elements.
Emphasis: allow for an easily recognisable focus in your page.
Unity: If all parts of the design have a commonality then they are perceived as a whole.
I believe that I've done a few of these well subconsciously, specifically Common Fate and Similarity. However, I believe I've been relying too much on using boxes to clearly segment things when I should build it into the layout design. I'd specifically like to focus on Proximity, Surroundedness, and Emphasis as I believe that it will strengthen my designs to keep them in mind. Each principle has example images in the lecture slides that I can refer to. As well as this, each are popular enough as principles that I can easily find more examples online. I believe that practicing these principles will help build better habits in my visual design.
Storyboards
I decided to undertake this task so that I felt like I was doing a variety of visual work. I wanted to support my Figma and my communication of my concept. Below in Figure 7 you can view the sketches I did and the corresponding descriptions.
Figure 7. Persona storyboards, Own Work.
These storyboards are inspired by the personas that I created with ChatGPT in Week 3. I sketched them in little time in my workbook on a day where I wasn't feeling great, so it was good to do as an easy task. I don't believe that they contribute much to my project but I did enjoy doing them. It did make me think more about what an older person may get from each page of my app. In the future I'd like to do more directly impactful work, and based on the explanation I did during the prototype segments of this blog, I think more documentation may be in order. Due to this, I've added 'App Documentation' to Week 10. This document will serve as a comprehensive breakdown of every section of my app and what it's intended purpose is. It'll also help me fill any prototype gaps that Figma couldn't recreate.
Logo
I completed some logo designs based on the feedback that I got on my logos previously, you can view them below in Figure 8.
Figure 8. Third logo iteration, Own Work.
I think they're ugly. I got feedback that Verdana was a good font to use in my work so I tried to use it to make a logo but I'm not sure that it works. Close up, I like logo 1, but far away it looks like a monster which isn't ideal. I used Comic Sans to create logo 2 as I liked the natural movement of the font. Now that I look at it, by itself it's not that bad. In logo 3 paired with the 'Companion' text in Verdana it looks out of place, however, I like the left justified logo. I don't think I pulled it off though. Logo 4 looks too corporate and slightly off for some reason. I'm going to leave the logos where they are for now and get more feedback in my next peer session before I move forward.
Week 9 Tasks
I've already mentioned my plans for my Figma prototypes moving forward. I have a few other tasks I have planned for Week 9 as well:
Positionality: It was mentioned in my class that there are some extra research requirements for submission. I'll be looking over them and completing them this week.
Video Script: I have a 1-2 minute video submission and I'd like to start it sooner rather than later.
You can view the summary of my planned tasks below in Figure 9.
Figure 9. Week 9's tasks, Own Work.
To finish, my final plan is to start writing next weeks blog post in the middle of the week. It's so incredibly grueling to do it all the end of the week!
References
Weber, G. (2022). COMPSCI345 Visual Design Principles [PowerPoint Slides]. Canvas. https://canvas.auckland.ac.nz/