interactiondesignstudio3chiara

[interactiondesignstudio3chiara]

LINK TO THE FINAL VIDEO

FINAL GROUP PROJECT 2 DELIVERY:

Promotional video, of 60-90 sec, of our Music App created a s a group. 

Group members: Chiara Di Giovanni, Hailey Griffiths, Sophia Maniquis.

Link to the Final Project Video due on the 10/06/22: 

https://www.youtube.com/watch?v=TnBnDrMzhAM 

[interactiondesignstudio3chiara]

PERSONAL FINAL REFLECTION:

Things I loved:

- learning Figma, and Keynote

- interesting looking back and steps we took in the early weeks which seemed big steps then seems so small compared to the final project = it means we learnt a lot in 2 months

- working with Sophia and Haley (a great group, with great communications ideas and organisation)

- We are happy with how we worked so far and satisfied with the final product created. We hope to learn more and work in group together.

[interactiondesignstudio3chiara]

Week 12 Activities (Wednesday)

James and Rio:

I really liked their logo, resembling the Equilizer feature of their app, and I heard they used Premier Pro, which worked well as they made a very nice video. It was also easy to follow.

Bryan and Jackie:

I liked that he made different videos to unify them later on and that compared to the formative a few weeks ago the colours of the app were more consistent. 

Karen and Lycia (can’t remember how to spell their names) - aura music

I like that they used, like us, music and questions along with the video, which makes it interactive.

Bianca and Noia

They had the component library at the end, which was nice, with a nice song.

Hannah and Amy

Nice music, very professional-looking, the app screen could have covered the whole screen, and the thin type could be hard to read from far. Overall my favourite video!

Poppy and Melody

I like that they contextualised it with images of themselves. They used Psd for the video, which was very good as it’s hard. 

Rebheka, Beck, Jonti

my own reflection: important to take into account the formative feedbacks and keep developing from then.

Chiara, Hailey, Sophia

Compliments about: typography, colours, good combo colours-neomorphism, good animation, good music.

James

Really liked the high contrast of the colours utilised, the font was matching the vibe too. 

[interactiondesignstudio3chiara]

Week 12 Activities (Monday)

Reviewing what to include:

- Date and name the video/Project

- Create a storyboard

- Time the narrative & create a beat

- Have a clear start & end

- Add any additional footage or text

- Cut prototype user flow into smaller chunks

- “Take people by their hand in the video”, not getting them lost

- Make the video into PremierePro, Canva, PTT, Keynote (e chose Keynote)

- Upload on Video/Youtube and include in Tumblr THE LINK

NEXT STEPS AS A GROUP: we are working on Library components, Video, and Video typography and rhythm.

STORYBOARDING:

VIDEO MAKING-TYPING:

Keywords to include: Rythm, Interactive app, music match, music taste, accessible, easy to use, user-friendly, share with friends, match with friends.

[interactiondesignstudio3chiara]

Week 11 Activities (Wednesday)

We have been shown videos for the final project to understand well what to include and potentially get ideas on how to create it.

For us was helpful to visualise the list of library components that everyone included, in order to complete ours:

ORGANISING OUR OWN COMPONENTS LIBRARY - RESEARCH & STRUCTURE:

https://medium.com/sketch-app-sources/why-should-you-build-a-ui-component-library-854656b91a96

https://uxdesign.cc/grouping-components-in-atomic-design-systems-4d6e2095ea45

OUR OWN RECAP AND REOPRGANISATION FOR OUR LIBRARY, after searching online and after checking the WEEK 7 class-notes (when G wrote the 4 categories at the whiteboard being typographic, colours, grid, and navigation systems).

VIDEO MAKING PROCESS After trying several software such as Premier Pro and After effects, we downloaded keynote.

During the class break we found a few songs with a catchy Rhythm for the video, list to choose between:

[interactiondesignstudio3chiara]

Week 11 Activities (Monday)

- Kept on going with the MUSIC APP PROTOTYPE

- 10.30am Gust Lecturer - Conversation with Alister (& Will), Design at Auror - Design Systems:

Main points that make me reflect on things:

- I liked how they made the presentation on Figma & miro board, which is something new to us (in terms or programs)

- Auror - product design company, finding solutions not to have frauds and theft 

- Library component is key to having all the design systems in one place and sticking to it

- Interesting to hear about the different programs they utilised over time. Figma was actually a program they only started using recently.

- I felt lucky that we are already learning these programs and systems in university, seeing how many designers (from Will's conversation) now learn it on the ay, and often after many years of being designers or graphic designers, developing skills on their own as a goal to create a design system.

-  I really liked how they planned the 6 months' work from the beginning, breaking down the workload into periods of 30 days.

- I liked how they focused on the issues to overcome as much as on the final goals.

- There is a lot of communication and self + group organisation in interaction design, which I’m very interested in

- to always approach anything with a learner's mind is key 

- the key is also foundation & components in the foundation of design systems

- Activity cards: very interesting how components and a design library clear since the beginning make work so much easier

- when you put an effort to make components that are reusable, it makes also identifies how many and what components you use the most, and it finally comes down to practicality too

- very important is also the consistency in colours, apart from icons & library components

- Key is also making plans over the next “few years”/ long term plans, as a company or for big projects

ANSWERS TO Q FROM US:

What do employers look at when you graduate?

- be open to problem-solving on your own too

- be open to collaboration

- be open to feedback that you like or not

- if you don’t like some ideas, propose a plan B too, but don't get too precious with your own idea

What to include in your portfolio?

- your own work, but no stress they know we will be just out of uni.

- very important is the journey, the process, that created an idea

- more inclined to hire someone who had an internship in Y2, and could show more added value in front of someone who graduated without having had experience before.

What programs are mainly used in the working world of UI/UX/product design?

programs:  Figma & Figjam, Webflow, Psd, Illustrator for the icons and then transferred to Figma, Streamline (?). Using Mac mainly compared to Windows.

Webflow is good for INTERACTION TESTING - but you can do these things also on Figjam.

Do UI UX designers need how to code?

Will - It’s very helpful to speak the same language with developers but is not necessary.

Alister - Used to code websites, so it’s very useful to learn how coding words, even if today is not as much needed as a few years ago. You would spend a lot of time on accessibility in coding.

---- webflow - very used in UI UX design

Very valuable things Auror look for:

Experience in: UX research + Interaction design + Visual design (colour typography etc)

Contracting or working in a company?

- Best to start in a company for 4 years, and then go as a contractor (otherwise as a contractor first, might not help to adapt to the fast pace of companies, and in the meantime learn a lot).

What are the best companies to have experience in?

Camberra product design, Xero working in community but is accounting software, banks & telephone companies, matchstiq.  - great to be part of success story - when heard in work interviews are very valued. 

[interactiondesignstudio3chiara]

FEEDBACKS FROM FORMATIVE:

USER TESTING/PRESENTATION TIME TO THE CLASS - DOCUMENTATION:

FEEDBACK FROM CLASSMATES:

FEEDBACK FROM TEACHER:

OUR OWN RECAP:

[interactiondesignstudio3chiara]

Week 10 Activities (Wednesday - FORMATIVE)

OUR FINAL PROTOTYPE THAT WAS SHOWN TO THE CLASS FOR FORMATIVE, FRAME BY FRAME:

At the end of this post there are photos of the class activity.

LIBRARY COMPONENTS/ASSETS:

COMMENTS FROM CLASSMATES:

OUR OWN REFLECTION:

Recap on the structure of our library to include:

- typography

- grid system

- dropdown

- colours

- atoms

- icons

- heading

- navigation

- what it looks like when clicking buttons

What to change? 1) having a BACK BUTTON     2) TOP ICONS to be replaced at THE BOTTOM OF THE SCREEN.

I also proposed to the group to remove our names from the profiles, so it will look more professional once this video will be in our portfolio fr the future.

[interactiondesignstudio3chiara]

Week 10 Activities (Monday)

PERSONAL REFLECTION: Videos watched in class about other students' apps: I understand now that they look like promotional videos, that the video shouldn’t look overwhelming with typography, that the video should have a background music that doesn't take the scene, that the should hold the attention span for the whole 90 sec. Also 90 sec is for his video in our portfolio not to be too long to watch, but in case is slightly longer is also ok as long as we did our best to make it shorter.

For the rest of the class, we kept working on the app towards NEXT CLASS’S FORMATIVE PRESENTATION AND TESTING OF OUR APP.

[interactiondesignstudio3chiara]

Preparation of the screens on Figma

Where we are at, between Week 9 & Week 10:

Photos from Unsplash & Pexel

[interactiondesignstudio3chiara]

Week 9 (Wednesday)

Today's tasks: keep going with wire framing + prototyping + distilling Design System. Also Testing, with no presenting but testing + get feedbacks.

- What do we want to achieve? What design aspects are we working on, test round.

FORMATIVE PREPARATION NEXT WEEK/WEDNESDAY:

- To bring a PROTOTYPE WORKING ON THE PHONE SCREEN, OR DESKTOP - make sure the prototype is clickable/interactive + BRING AN A3 PRINT of the design sequence (pages).

- People will be able to test our prototype from both the clickable phone screen prototype and on the A3.

- We will set up groups’ sharing in class like for Project 1, commenting 3 different aspects of the: 1) sequence of pages, 2) the prototype (classmates will leave comments on the A3 print-out), 3) classmates’ testing of the library components & design system

[interactiondesignstudio3chiara]

Week 9 Activities (Monday)

Usability Testing today, of the App - prototype:

1) Establish the frame of mind (between the group members)

2) Ask about expectations (ask the participants to describe what they expect to see in the product itself).

3) Reveal and ask (- How is this different from what you expected?)

- Keep focused on FUNCTIONALITY & TASK, not focusing on the design but on the strategy.

OUR FINAL OPPORTUNITY STATEMENT:

OUR MAIN STYLE INSPIRATION & COLOUR PALETTE:

Neumorphism, examples for inspiration below

The name is just temporary - we will have to brainstorm about the App’s name.

Exploring colours combinations.

OUR WIREFRAME AND PROTOTYPE ARE DIVIDED BETWEEN US 3:

EXPLORING A LIST OF MUSIC GENRES ON GOOGLE

https://www.musicgenreslist.com

IN-CLASS ACTIVITY: Shared ideas & prototyping with classmates

Colour Palette agreed on as a group:

Added the Find Matches page:

Exploring different gradients of the colour pallette chosen.

[interactiondesignstudio3chiara]

Week 8 Activities (Wednesday)

Class activity, searching for older and newer physical music players:

As a class, we searched online for music players' images, many images came to us, from 1980′s ones to more recent ones in early 2000. Was interesting for me realising how the role of many physical music players has now become the role of apps such as Spotify, Shazam etc. Below are all the images we found as a class:

Today’s activity: Wireframing, prototyping & distilling library for our music app (pictures below):

LOW-FIDELITY WIREFRAMING AS A GROUP (HAYLEY-SOPHIA-CHIARA): We all did it individually first, then shared the ideas and unified thema at the end.

Chiara:

Sophia:

Hailey:

Making a plan about the flow between pages:

Started the LOW-FI Wireframing on Miro, my part about the final interaction with other users, while the other two girls are wireframing the initial part about logging in, registration, etc, and the playlist, the genres list and profiles.

[interactiondesignstudio3chiara]

Week 8 Activities (Monday)

I found it very very inspiring that the teacher showed us his portfolio or fast work, especially seeing how one idea from a decade before can bring you to a new project.

I love so much how he explored sounds frequency were materialised into chocolates, or bees wax, and gave “materiality” and the possibility to “touch” and physically interact with something that is not material normally

ACTIVITY IN CLASS: organise our group work for the next 5 weeks. 

MAIN IDEAS:

1- “Remixing genres you like” app music.

2- Matching music listeners app (similar to a dating app but for music profiles)

WIREFRAMING IDEAS, my one below:

The user will be able to download the app, and see the big picture: 

1 - Find your genres (its features being similar to Spotify)

2 - Find your music genre people matches (its feature being similar to Tinder)

3 - interact with your matches, chose the radio in km where they are located, and find music events around youth share, and possibly go together. (Its feature being similar to Facebook)

[interactiondesignstudio3chiara]

Week 7 Activities (Wednesday)

Class-teacher brainstorm about these 4 components below:

1) The Typographic Systems include:

- Fonts

- sizes

- alignment

- leading

- learning

- colour

- hierarchy

2) The Grid Systems:

3) The Navigation System:

- search bar

- labels

- back button

- home

- icons

4) Colour Systems:

- main 

- matches

- codes

- name

- light/dark

All the parts to ideate and strategically organise for designing the system that creates the pages:

Buttons, icon buttons, icons, spacing, colour, controls, dialogs & overlays, animations, tool types & notifications,, badges & avatars, menus.

Inspiration & personal reflection from the class: Numeric systems can help making decision, number 12 (suggested by teacher) is easy to divid by several numbers to adapt to different systems. Think of a certain number system to create rhythm.

NEXT TASK - music app MAIN IDEAS:

In conclusion to our brainstorming we want to create an app which: - similar to Spotify playing music but with some Shazam features (finding songs too) - the ability of mixing the end of a song into the beginning of the next one with similar beats, within a playlist of yours - the possibility to incorporate the app songs you like into the phone settings (alarm, calls sound, etc..)

[interactiondesignstudio3chiara]

Week 7 Activities (Monday):

We have been sharing the definitions to search on the first 3 chapters of “Atomic Design” book. It was very interesting and interactive way of learning by sharing the info in class that we all searched. I find this book very interesting and willing to read more about it during the mid-semesters break.

I really like that the terms most likely define virtual objects and things, but using terms that have parallel meanings in the physical world. Also I understand these concepts are in continuous development themselves.

TASKS TOWARD THE MUSIC APP CREATION:

1 - Keep your ideation flow human-centred

2- Consider multiple ideas simultaneously

3 - Benchmark your ideas with apps out there

Then:

4 - Keep it simple, focus on one user-activity

5- What does you app do really, really well

6 - Map your user pathway

Tasks 1-2-3:

https://www.similarweb.com/apps/top/google/store-rank/us/music-audio/top-free/AndroidPhone/ 

We brainstormed about what apps we like or use the most (Spotify, Shazam and sound cloud) + what are the positives we like about. We also decided to add “things we would like to change” as we kept thinking about pro and contra of the apps, and we thought that these contra could just become something that we could implement into our Music App Project 2.

Then we digitised them all into MIRO.COM:

We finally decided to write down 3 positives & things we would change, for each one of us (to choose later on)

[interactiondesignstudio3chiara]

Week 6 - Intro to New Project:

https://atomicdesign.bradfrost.com

“Atomic Design” by Brad Frost, chapters 1,2,3 - In-group read about:

(my 3 definitions below)

Fluid grids - provide a visual way to design different layouts which can adapt to corresponding devices depending on where a website or app is displayed on (laptop desktops, tablets or phones). It’s possible to use a different fluid grid layout for each of these devices.

Workflow - user-experience process which outlines all the steps within it, from UX research, gathering user feedback, defining design systems, initial wireframing, final prototyping, user-testing, all prior to the development.

Front-end style guides - a modular collection of user-interface elements related to a specific product, with also code snippets for software developers to copy and paste and implement these elements as needed.