NM3221

06/Live Stream Event 2

Live stream event: 22 & 23 Aug from 3:00 to 5:00 am on Behance, hosted by Adobe Live

Host: Julian Crespo (Interaction Designer Star)

Guest speaker: Andrea Marquez (Art Director, UX/UI Designer @ZAGCreates)

Link: stream 1, stream 2

Background

Tonight’s guest speaker is Andrea who had studied graphic design and specialised in animation. She is a self-taught web designer and had learnt how to use Adobe XD through YouTube videos and Behance daily challenges. She is designing an app called Storyteller, which is a creative app that allows users to create and animate illustrations for their social media channels.

The live stream event was split into two days, the first day, she showed her design system, how to create abstract art on Illustrator just by using basic shapes and app design. On the second day, she went through the auto-animation function.

Being Organised

Andrea had an entire board that showed her design system, which flashed out all the fonts, colours, and icons that she was going to use in the app. While she mentioned that one can always add on to the board as they continue to create the app, it is useful and does make it more efficient to have at least the basic elements that one wants to use for the app. Both she and Julian also pointed out that having a design system would be useful for team collaborations as everyone would know what are the fonts and icons that are going to be used in the app.

Andrea had also suggested having a ‘junk drawer’ to just play around with. Here, one can test, mix and match, or try out different designs before filtering and seeing what works well. This promotes creativity as there is no fear of doing something ‘wrong’ or ‘ugly’ as it is like having a rough paper to do designs. One can organise this file after and clean up the designs and elements that have not been used. I find this to be rather useful since I am someone who when working on something would only like to put the final result when I start instead of having a bunch of random works around, I believe this would be useful when doing mid and high-fidelity prototypes in the upcoming project.

Auto-Animate Function

The auto-animate function is relatively new in Adobe XD and it essentially moves vectors for a certain duration with some type of effect. I found this function really useful as one can create a simulation video of how a user can use the app. To animate something, one has to duplicate the artboard (tip: all the layers and elements need to stay the same – if the layer names are different or there are new elements, auto-animate may breakdown) and change the shape, colour or size of the vector in the following artboards. Auto-animate will then look at the changes and transitions from one artboard to another.

Andrea had shared a few more tips regarding this function. The first is to leave the presenter window for the animation function open, making it easy to see what changes as one plays around with the different specifications under the ‘interaction’ and ‘action’ tabs. Another tip is that she likes to go through the video and then save it on her phone. This allows her to experience what the user would feel and evaluate the performance as the effect is different on a phone and a browser. One big difference in this interaction would be that on a phone, one would use their finger to tap the touch target which is far less accurate than a mouse which one would use on the browser, thus it is important to test and view the preview on one’s phone to ensure that touch targets are easily accessible by users.

Idea of Accessibility

Throughout both days, Andrea and Julian kept emphasizing on the idea of accessibility. She had brought up that during testing, one should test out the design of the app on different phones to ensure that they look the same or to cater for the physical differences of the phones (e.g. some iPhones have a notch, which must be designed around). They had also discussed touch targets and how to make it easier for users. Rather than making an icon or text a touch target, one can create a transparent overlay over both the text and icon, which would be the touch target for that function. This makes the target bigger and makes it easier for a user to tap. Julian had also brought up a guide (link) that he created to improve the accessibility of one’s app which I found to be a useful reference and a good supplement to what was discussed during lectures.

Visual Design Considerations

During the design review session, they had gone through designs of those who had participated in the daily challenge. During which, there was a design that used emojis along a slider bar instead of having text to denote the degree. Julian found this idea to be smart and mentions that nowadays, people would sometimes understand emojis more than text. This links to the lesson on visual design considerations where one can sometimes use icons to replace text. However, I do not really agree with Julian as I think using emojis to describe different degrees would only be understood if users are savvy with such icons. Generally, if the app is to be catered for the older generation, they may not understand the context and meaning behind the emojis in which case it would be better to just have text. Thus, I find that if emojis or icons are to be used, it would be more suited if the app were catered to the younger generation.

Conclusion

This livestream event was useful, and I found the auto-animate function within XD very interesting, especially since Andrea has a background in animation, she can create many beautiful animations and effects within XD seamlessly. Both hosts provided really good tips and points throughout the livestream, and while I may not agree with all if them, I think they are rather valid points and reinforce what we have learnt in class.

Here are the notes that I have taken during this livestream :)

05/Week 6 Project Post

Our project aimed to improve the user journey for Sephora’s new and churned users. We introduced a user profile section to provide more detailed recommendations to users and a tutorial guide for the Virtual Artist function. We had also streamlined Sephora’s user flow such that users no longer had to toggle between the product page and the Virtual Artist function, they could simply test out all their products in the Virtual Artist without having to go to other product pages. However, there are still some limitations to our solutions.

User Profiling

Although our solution introduced the user profiling function to users, they have a choice to skip this step. After skipping this step, users are unlikely to remember to go back and fill in this profile page, which limits their experience when using the app as they would not have recommendations which would be tailored to their needs and wants. This can be resolved in two ways – firstly, a push notification within the Sephora app to prompt users to complete this profile page; and secondly, a reward for users who have completed this form. Sephora currently has something similar where they give Beauty Pass Points to users who have filled in their personal particulars. Thus, to encourage more users to fill in this user profile and to improve their user experience, this solution can be applied to the user profiling section as well.  

Small Touch Targets

Another limitation is that the touch targets within the Virtual Artist could be too small for some users. The area where users can select the product is only at the bottom of the screen, this was designed so that the user can see their faces while they select a different shade or product that they want to try. But the shades that are shown at that tab are packed closely together and if the user wants to test many products, it can also become cluttered. Users may have problems choosing the specific shade that they want and accidentally click on another product.

04/Week 5 Project Post

For this week, I focused on creating personas and doing the storyboarding for the project. I decided to do this part as I felt that it was an interesting challenge to take on and I have never done anything related to this before. For this project, I created two profiles, one for new baes and the other for churned baes. I  followed the lecture slides and first created a table to plan out my character, after that I did a scenario, trying to make it as relatable as possible before drawing a storyboard to propose a positive user experience for both my characters.

Creating the Persona

Creating a persona was difficult for me, since I need a clear idea of what user I am targeting and the problems that they would face. I found that it is a lot easier to create a persona that I can relate to. For example, when creating the new bae persona, I based it largely of my experience in wanting to try on makeup in university, since I finally had the freedom to dictate my appearance. Hence, I was able to create a believable persona and allow that persona to have a specific attitude and motivation. However, when it came to creating a persona for churned users, I had a bit more of a problem since I need to think about what would make a churned user come back to Sephora. In the end, I chose to use the end of a relationship to motivate a user to start buying from Sephora again as people who break up often want to have a clean start and upgrade themselves. Thus, it is likely that these users would want to return to Sephora and start purchasing products again. From this, I learnt that, at least for me, I need to be able to relate to the user, even if it is just a very small characteristic or to a small extent, before I am able to branch out and create a persona from there.

Storyboarding

The storyboarding part was pretty fun since I could draw out the characters and have an idealised version of the user experience that the group wants to create. I enjoyed drawing a cartoon-ish comic to show how each persona would experience the app and adding captions below to explain the process. However, one issue I had was that I was afraid that the comic would be unable to convey the idealised user journey and used quite a bit of text to supplement each comic.

Conclusion

03/Week 4 Project Post

For this week, our group brought up the various pain points we had with Sephora –the limitations of the virtual artist and the navigational flow within the app. We had also distributed the workload for the following week’s big presentation and assigned everyone their tasks before a group meeting next Friday.

Pain point 1: Limitations of Virtual Artist

One problem we have found with the virtual artist function within the Sephora app is that it only applies to make up and that it is not possible to know about the texture or consistency of the product which can be equally important to consumers when purchasing a product. This limits the amount of information a user receives when they test out the product within the app. However, we found that this is a problem that is not easily solved. There were two suggestions brought up to complement the virtual artist so that users can be more informed about the product. We could give more detailed descriptions of how the product feels or even compare products that have similar consistencies so that users who have used other products can have an idea of how the product feels. But we find that these suggestions are not really feasible, and that Sephora would have to create an entire team to do these write ups and conduct testing to compare products.

Pain point 2: Navigational Flow

Another pain point we found was that finding the user journey is not intuitive for new and churned members of the Sephora app. For churned members, they would not have used the app recently and would not be familiar with the app as well. We believe that this pain point is something that is possible for us to solve and thus have decided to further look into it. Currently, our group plans to have a tutorial guide for users to guide them on the different uses of the app and to show them the app’s potential. The tutorial we are planning to do would be like that of Adobe Photoshop or XD where they introduce new users to their functions and capabilities.

Contributions

For this week, my main contribution would be presenting and justifying our group’s choice for a company. During this week’s discussion of the pain points and the solutions, I had brought up how we could have more descriptions on the product’s consistency and texture but had also acknowledged that it would not be the most feasible or cost-effective solution for Sephora.

02/Week 3 Project Post

Group Dynamics

Our first discussion was rather productive, the group got along well together and created a conducive environment for discussion. Before our scheduled group meeting, we had brought up Sephora and Shopee as potential apps that we want to work on, and the group had spent the day using the apps so that we are able to discuss about the problems we faced using the apps when we meet. We tried to empathise with users of these apps, and through ethnography, we managed to identify some problems that we had with them.

Challenge 1: Choosing a Suitable Pain Point

I think one challenge we would have is to choose a suitable pain point. During our discussion, the pain points brought up are often simplistic, too wide or is related to the brand’s marketing. For example, we had brought up that Shopee’s landing page is very cluttered and messy, making it difficult for people to find what they want as they are often bombarded with promotions of random items and notices. However, this continuous spam of promotions often encourages users to click on the notice and scroll through the items which are on sale, and this causes them to spend more time on the app and may even to get them to buy something which they did not originally intend for them to buy. As a result, if we were to choose this as our pain point, it would not be something that Shopee would realistically want to resolve unless they were going to do a complete overhaul of their app. Therefore, I think it would be challenging to choose a realistic pain point which the company would want to resolve.

Challenge 2: Coming Up with a Feasible Idea

Of course, another problem that we are likely to have is to come up with a realistic idea. Especially since a component of this project is the cost analysis of implementing the solution, there is also a need to be conscientious of opportunity costs as well. Taking the previous Shopee example, if we were to clean up the interface and not have as many pop-up promotion notices etc., Shopee would lose transactions as users would not be encouraged to look through and purchase items which are on sale as they would not have noticed them. Therefore, when coming up with a solution, we should come up with one that does not result in too large a loss in the form of opportunity costs.

Contributions

01/Live Stream Event 1

Live stream event: 25 & 26 Aug from 3:00 to 5:00 am on Behance, hosted by Adobe Live

Host: Howard Pinsky (Senior Adobe XD Evangelist)

Guest speaker: Kate Kassab (Visual Designer)

Link: Stream 1, Stream 2

Background

This was the first live stream I watched regarding UI/UX and I must admit that this had sparked my interest involving this topic and inspired me so much that I went to play around in Adobe XD. The guest speaker in this live stream is Kate Kassab who has an interesting background as she began doing app development before she switched to graphic designs. She provides a unique perspective regarding design as she would be conscious of developer issues as she designs apps. She emphasises the need to create boards for apps with developers in mind so that developers can easily understand the portfolio.

The app that she is designing is the Goodplace, it is a mobile app which aims to spread good news to combat the constant stream of negative content that people are constantly subjected to.

Designing with Developers in Mind

By creating different boards to show what the app is and having a style guide not only helps Kate but also others to understand and develop an overarching idea of what the app is and the aesthetic that would best complement it. With a giant portfolio board, Kate is easily able to refer to the elements she wants to use in her design as everything is on the same page. I find this a good tip and would definitely try it out when I use Adobe apps.

Kate also recommends using an 8-point grid when designing apps. This is usually the standard as most of the time pixel dimensions for devices are in multiples of 8. Instead of having to define random numbers for padding everywhere, developers are more able to work with multiples of 8 as it is a very versatile number. I think this is where Kate’s experience as a developer comes into play as she is aware of the problems that developers go through when turning a design into an app. I find this useful insight as if I were to ever want to develop an app in future, I would want to help my developers instead of inconveniencing them.

As designers, Kate reminds us to show developers what everything in the app would look like, regardless of how seemingly insignificant it might seem. She uses the keyboard as an example. When keying in information on the app, the keyboard needs to pop up for users as it is unrealistic and cumbersome if the keyboard were to permanently take up half the usable space on the app. Developers often would not know how designers want the app to look like even in such transition phases, this it is up to designers to show them by creating designs for the app at every state possible.

Context

She emphasises the importance of choosing the correct icons, illustrations, and colour. Icons and illustrations can change the perception of the app, and Kate mentioned how rounded corners make people feel more positive which I found really interesting. I went to research on it and found that this emotional response is a result of learning to avoid sharp objects from a young age (link). The psychology of colour also plays a role in how users feel about an app. Howard had brought up an example of how when designing a medical app to avoid the colour red as it could possibly heighten one’s emotional state which is not good in an emergency, he recommends soft colours to be used when designing such apps. This relates to the point on contextualisation. An app does not exist in a vacuum and should be created with the aim of being used by its target audience, design should consider the users of an app rather than just the aesthetic.

Accessibility

Relating to the previous point, Kate had also brought up the idea of accessibility as she talked about font colours. While light grey is pretty and commonly used in minimalist apps, it is sometimes difficult for others to see the text, especially when it is against a white background. She recommends using the Stark plug in on Adobe XD to test whether there is enough contrast between text and background to ensure that it is visible. I think it is important that when designing an app we do not get carried away with the aesthetics and forget that the app is meant to be used, the most aesthetically pleasing app is useless if no one can use it.

A/B Testing

During the live stream, there were comments brought up on why Kate wanted to have a confirmation button when choosing an avatar instead of just moving on to the next step of the on-boarding process when the user clicks on an avatar. This had sparked a discussion where majority felt that Kate’s decision was the right one (and I agree!) as having a confirmation button allowed viewers to click around to view different avatars before deciding. Also, this interface would prevent users who sometimes keep clicking the screen to speed up these processes from choosing the ‘wrong’ avatar and having to come back to this page after. However, the opposing side felt that the process would be much smoother if clicking the avatar would immediately bring them to the next part of the on-boarding process. As a result of this discussion, Kate brought up how then there should be both this processes and to do A/B testing to decide which one users prefer. This highlights the importance of user testing, as designers may be too into their design that what they think is convenient or good may not be something that users want.

Conclusion

All in all, this live stream was highly informative and enriching. I enjoyed listening to Kate share about her experience as she designed parts of Goodplace and that viewers of the live stream often shared their questions and opinions on the chat, providing openings for discussion and elaboration. The only negative was that this live stream was at a very awkward time since it caters to US viewers.

Here are some of the notes I have taken (excuse the scribble like handwriting):