Tag: UX

Posted on

Sonic Branding – powerful 360º trademark soundscape

Sonic branding - powerful 360º trademark soundscape.
Sonic branding - 360º trademark soundscape

What is it?

An all-round sound strategy

As my studies in Neuromusic continue, I find myself curious about an ever-widening array of music and sound-based disciplines. One that caught my eye is sonic branding.

This is a powerful, 360º strategy for a business! You could almost call it “surround sound!” 😉. By integrating unique and unforgettable auditory elements into their visual branding, companies have the power to significantly amplify their impact and create a lasting imprint on their audience’s minds.

Music awakens emotions in a deep and powerful way. Audio branding helps connect a brand to its users’ feelings. Think about it: A home decoration business will clearly have a different sound strategy than a techno nightclub. The former may wish to transmit security, safety, and comfort, whilst the latter would send out edgy, ecstatic vibes.

More than just a jingle

The use of sound in branding goes far beyond jingles. It includes UI/UX elements like in-app sounds when you press a button, accomplish a task, or open a new element.

I studied UX last year. I found it fascinating, and it has strongly informed my design work ever since. Good UX makes a brand stand out; excellent UX makes a brand succeed. Incorporating audio into UX is next-level marketing. A sound “sound strategy” could have a resounding impact on a business. (ba-da-boom)

Sonic Branding Hashtags

If you are interested in this field, here are some of the hashtags in use:

#music #musicbusiness #sonicbranding #sonicstrategy #soundbranding #soundstrategy

Sonic Branding Agencies

Stephen Arnold Music (Texas, USA)

SAM began working with branding and sound in 1993. They have worked with some of the biggest brands in the world. Specifically focusing on the link between sound and emotions, they use “the science of sound” to build brand recognition.

Good sonic branding stimulates an emotional response, but great sonic branding does more–it becomes rooted in the belief system.

Stephen Arnold Music

Audiant Labs (London, UK)

Working in the field of sonic branding since 1980, meet Audiant Labs. Its CEO and founder, Ruth Simmons, is called “The Godmother of Sync“. Her “soundlounge” project is a world leader in sync and sonic branding.

While sync is not exactly the same as sonic branding, there is some overlap between the two. Sound and music used in commercial settings (like TV shows, video games, or live events) become identified with the brand.

Think of the theme song from Friends. You probably don’t know the artists who recorded it, The Rembrandts. But if you lived through the 1990s, you’ll instantly think of the TV show when you hear the song. This is a sound strategy that paid off, both in terms of brand recognition, but also for the artists who wrote and played the song.

DLMDD (London, UK)

DLMDD won the Kyoto Global Design Award (2022) for their audio branding work with Singapore Airlines. The flowers of the SA Batik Motif were the starting point. Dominic Murcott created an instrument using the frequencies of the flowers’ colours. The symphony was created by Rohan de Livera. It is really quite amazing and inspiring to learn about this project!

There is a fascinating description of DLMDD’s creative process on the KGD website. And here is the “making of” of the sonic brand.

The Symphony of Flowers and the Batik Instrument

Sonhouse (Belgium)

Sonhouse is Here is Cédric Engels from Sonhouse giving a TED talk about Sonic Ecology.

If the sounds you produce are not better than silence, it’s noise, sound pollution.

Cédric Engels

UnMute Creative Sound Agency (Denmark)

This Copenhagen production studio offers one of the clearest sonic branding examples I’ve found so far. On their Instagram page, they share the sound palette they created for the charging network, clever.dk.

The new sonic identity embodies both innovation and sustainability and is mixing electronic elements with acoustic instruments and sounds from nature.

unMute Creative Sound Agency

Coda

The field of sound design and its connection to emotions captivates me. Having been a therapist (body worker and yoga teacher) for over twenty years, I know the emotional-vibrational anatomy well. As a self-taught musician, I connected with music via feelings and perception rather than learned theory. As a student of Neuromusic, I am knitting this all together.

If you find the field of sonic branding as bewitching as I do, please get in touch with me via my socials. I would love to connect.

Proudly powered by WordPress

Posted on

Figma plug-in 4 UX: html.to.design – Fabulous!

Table of Contents

html.to.design Figma plug-in
  1. html.to.design
  2. Installation
  3. Use
  4. Conclusion

Figma plug-in

html.to.design is a new plugin for Figma that looks to be an amazing ally to any UX designer.

I decided to give it a go and see how it can help workflow and creativity. Keep reading to see what I found…

html.to.design

Honestly, I didn’t even know that Figma plug-ins exist! I am a bit of a newbie and am still getting my head around Figma. It does seem like a very cool tool, and it’s certainly an industry standard for UX designers. Just a quick search on Indeed returns more than 1000 UX designer jobs that require Figma!

I admit that I find browser-based apps very click-heavy. As an old school Internet user, and someone quite used to the UNIX shell, I tend to use key commands more than clicks. Browser based apps don’t always allow key commands as the command might pass to the browser or system, rather than the app. So, I am moving with the times and adapting to browser based apps.

Installation

I had to log into Figma first. Then I went back to the plug-in page and clicked on the link. This opened a blank design. I navigated to the left menu and found the plug-ins. Lo and behold, there was html.to.design.

I tried to import the very page on which I had found the plug-in, https://www.figma.com/community/plugin/1159123024924461424/html.to.design . As this page is behind a log-in, I was not able to import it into the Figma plug-in. In the app dialogue box, they write:

“Need to import a private page behind a log-in? Get notified when this feature is available”

I signed up to receive updates in the hopes that this might also serve to trigger my memory later on! I notice that my mature brain is good at long-term memory and pattern perception, but my short term memory, which used to be absolutely razor-sharp (my mother used to say “you have a mind like a steel trap”), is not as reliable as it used to be.

How does html.to.design work?

I imported my own page and immediately the whole design and structure showed up. I played around a bit and made a prototype which you can view here.

Conclusion

This Figma plug-in is on fire! I love anything that makes life easier! One of the tricks they teach to aspiring UX designers is to UX the page of a company that you’d like to work for and send it to them when you apply for work. I think that this plug-in could be a real ally for UX designers new and seasoned.

Posted on

Lo-fi Figma Prototype

As I carry on studying UX, I am proud to have made my first Lo-fi Figma Prototype! Here is the link:

https://www.figma.com/file/29fmuGt6ymNFHWqfWCm9IJ/Coffee-House-Wireframe?node-id=0%3A1

The process from ideation to prototyping is pretty straightforward, but is surprisingly long in execution, especially when you’re new to it. The Coffee House project is our common project on the course, and we use it for every assignment before proceeding to our portfolio project. My portfolio project, as I have said before, is to create a service review app for a fitness trainer. The two prompts are quite different, and the user journeys are different, but the user flows are fairly similar, and there are frames that can even be recycled.

User Flows

A paper wireframe that I used for my lo-fi Figma prototype.

After creating paper wireframes and then digital wireframes, we created paper user flows and the digital user flows. Over the on the right is one of the paper wireframes that I made, which I later digitalised on Figma. I like the design iteration as it gives me lots of chanced to refine my ideas. In fact, when I started the prototype, I had only drawn five paper wireframes. The final lo-fi Figma prototype has 11 frames!

Yoast SEO is telling me that the 190 words I have just written is too little, and that I need to bump it up to 300 words. I guess that I could, but I prefer to just go ahead and post this, and take my dogs out for a walk before evening falls. I have been working hard, and studying hard, and I would like a little time off. So, thanks Yoast, but not today. 😛

Posted on

Build Wireframes and Low-Fidelity Prototypes

After a short pause, I am back on the Google/Coursera UX Design Certificate course! “Build Wireframes and Low-Fidelity Prototypes” is the title of this unit, the third of seven.

Wireframes and Low-Fidelity Prototypes

Wireframes and Low-Fidelity Prototypes are the first step in creation of a solution for your product. That is a bit mealy-mouthed, isn’t it? Wireframes and Low-Fidelity Prototypes are a sketch of what you’re going to build. You take all that user research and start to turn it into something concrete – a design!

Whether you are working alone, in a small team or in a big team, the process of making ideas become realities is complex. Getting mislaid, off track or too granular too early is easy. The ideation stage, in which we created personas, empathised with them, understood their user journey and made problem statements has placed us in a position to now define what it is we are going to build.

Instead of a problem statement, we use a Goal Statement. We are building on the research we have already done by now defining what we are going to do and how we are going to measure the results.

User Flows

After that, we make a first user flow. They asked for a a sketch. I did that. But after submitting my work, I was that other students on the course had gone ahead and made a proper flow chart. It took me a little while to figure out where on Google Drive this can be done. I thought it might be slides, but it turns out to be Drawings. Once I got there, I faffed around a bit with design. But, I managed in the end. Funny, hey, how something relatively low-tech like a flow chart still has its learning curve. About a year ago, I started using Google Drive in earnest. I did a little certificate course (funded by the Valencian Government) and discovered that I quite like Cloud Computing. So, without further ado, here is my User Flow Diagram:

A user flow chart sketch for a service review app. This is a typical Wireframe or Low-Fidelity Prototype for UX Design.
“create a service review app for a fitness trainer”

Where UX gets interesting!

This is where UX gets its hands dirty. Musicians attest that it is much harder to compose a song than to hum a melody. Getting ideas out of your head and into the world is hard, but it is the essence of any creative process. Creation requires patience, dedication, reiteration and plenty of self-doubt. I am happy to be back on the UX course! I took a little rest because I signed up for a dj course at MixPeople DJ School. It was awesome, and I learned a skill I have been wanting to polish for a long time. The Wireframes and Low-Fidelity Prototypes course began with a review of concepts from courses 1 and 2. I felt super chuffed (that is British slang for happy) to discover that the ideas, concepts and methods had stuck and I was able to remember them clearly after a nearly two months rest. Yay for my old brain.

Keep learning!

It is never the wrong time to study. It is always the right time to acquire new skills. Whatever strikes your interest, creates curiosity or stimulates serious reflection is worth learning about. It is tempting, these days, to read a few blog posts, scroll some forums or fast-watch YouTube tutorials, then consider yourself something of an expert. There is a certain humility is actually learning, in studying, trying to make new knowledge stick. I say go for it, get learning. UX does it for me right now. What would you like to learn?

Posted on

The Elements of User Experience – J.J. Garrett

Rachel Rose with the book The Elements of User Experience.

The Elements of User Experience by J.J. Garrett proved a stimulating and thought-provoking text book which gave substance to my UX Design Course. I loved the book, and made time almost every evening to read a few pages. Upon awakening, I would try to remember what I had read the night before.

Studying is a slow and steady quest. Rarely can I dedicate large chunks of time to my course, but I chug along. I could have rushed into Part Two of the course, Start the UX Design Process: Empathize, Define and Ideate. But, I thought it wiser to buy the two books referenced in Part 1 and thus gain a more solid footing in the material. (The other book is The Design of Everyday Things. More on that later…)

UX

User Experience (UX), like many things tech-related, is a relatively nascent field. As we have broadened and deepened our relationship with technology, we have become more discerning and habitual in the way that we wish to interact with the tech. Making the user adapt to the company’s or the programmer’s vision (or bias) is no longer acceptable. It is a sure path to ruin in today’s competitive online market.

Enter UX. Twenty-five years ago, with insensitive regularity, tech savvy folks would sniff that “the user just has to adapt to the interface”. Since then, certain standards have been established that make information design and interface design more predictable and, well, usable. After all, that’s it: what we want to achieve with UX is a usable site that aligns with the product objectives.

The 5-Elements UX Model

Garrett identifies 5 User Experience planes: Strategy, Scope, Structure, Skeleton, Surface. The Elements of User Experience is a model that accommodates both information and interface design.

The author begins by explaining that the two points of view are opposite but equally necessary. Those who look at the Internet as a big database, who think mostly about the search for and delivery of information, view web development from one perspective. Those who see the Internet as more of an “app”, as something that lets you do something, contemplate it from another perspective. JJ Garrett came up with a model that serves both standpoints.

The Elements of User Experience

The UX 5 Elements Model (graphic)

This image is adapted from Garrett’s original work (2010)

A full description of the theory and application of the Elements of User Experience Design is well beyond the scope of this post. What I hoped to do is comment on a few things about the book and the course.

Takeaways from The Elements of User Experience

First of all, it is perfectly possible to do the UX Design Course and not read this book. I undertook this as an extracurricular activity and am I ever happy that I did. The course description of the five elements of UX is more than adequate. But, the book gave history, breadth and depth to the subject.

Secondly, Garrett is extremely good at defining common terms. It can be easy to think that you know the difference between interface design and information design, but some assumptions are not always true. Furthermore, it is good to challenge your own understanding. I feel much more confident now in distinguishing between the different parts of a web site or app.

Thirdly, reading this book helped me to perceive a bias that I did not know I had: I am an information person and have always approached the Internet from that perspective. Despite being a lover of pretty things, I was always thinking about the information. I discovered that bias whilst reading this book and now look at UX Design from a different perspective.

Fourthly, there is some Google bias in the UX Foundations Course. This is a criticism that I had seen levelled at the course, so was looking out for it. A fair chunk of time is dedicated to the “Design Sprint“. The Design Sprint is typically a week-long intensive in which the prototype design of a project is hashed out. Interestingly, in the last section of Garrett’s book, he says:

“Product development is rarely a sprint…thoughtful, deliberate design decisions will cost you time in the short term, but they will save you much more time in the long term.”

The Elements of User Experience, page 160, JJ Garrett, New Riders Press.

Fifthly and finally, Garrett emphasises the importance of planning and documentation. Every site I have ever created has been done on the fly. When it is for personal use, this is fine. But for professional work, improvisation will only get you so far before confusion, conflict and cracks begin to show. So, point taken. From now on, planning, wireframes and design comps are the order of the day.

Conclusion

The Elements of User Experience was an invaluable book and an excellent time investment. I was really grateful to the print book! Why? Well, I am studying alongside my busy work schedule and I don’t always want screen time just before bed. We all know how that turns out, right? To have a real book to read, just before bed, highlighter in hand, was just…lovely.

I am halfway through the second part of the course. I will keep you posted. Thanks for reading!

Cheers,

Rachel

Posted on

Alteayoga UX User Survey

A web site redesign needs UX and to define UX, you need a User Survey. So, using the Elements of User Experience, I created a User Survey. I will compile the results once they’re in. Let me fill you in on the background. Read on.

The Elements of User Experience

The Elements of User Experience is a fantastic companion of the UX Certificate course I am doing. This book teaches you how to think about web site design from two distinct but equally necessary perspectives. Web sites can be viewed as depositories for information storage and retrieval, or they can be seen as applications, that allow you to “do” something. To accommodate both points of view, Jesse James Garrett developed his theory, the Elements of User Experience.

The Five Elements of UX are Strategy, Scope, Structure, Skeleton and Surface.

Alteayoga logo - the site being redesigned according to the Elements of User Experience.
Alteayoga

Alteayoga is the name of my yoga project. I currently use alteayoga.es, but have alteayoga.com parked on Google. I will design the site with Webflow, a platform that we looked at in the Part 1 of the course, Fundamentals of UX Design.

The first thing I have to think about is the Strategy. To decide the Strategy of the site we are designing, we have to define two things: the product objectives and user needs. The product objectives are defined by the site owner or stakeholder, while user needs come from the users.

Thinking carefully, I figured out what I want, but how do I know what the user wants? To find out, I created a User Survey based the Elements of User Experience.

Product Objectives

Taking pen to paper, I defined my objectives – or, my strategy – for the redesign of Alteayoga.com. From my side, I want Alteayoga.com to

  • Open me to a more international/English speaking market.
  • Allow me to book and manage requests for online classes. (I often get such requests from students/patients who meet me on their visits to Altea).
  • Let me sell the yoga videos, meditation music and guided meditations that I create.

User Needs

To define the user needs, I need to do some research. Accordingly, I used Google Forms to create a short survey. My aim was to keep it short, neutral and simple.

To define my strategy, I need to know if my users use online wellness classes and if so, via what platform. Do they read wellness blogs and subscribe to them? Do they subscribe to wellness email lists? Knowing this will allow me to decide how I present the material and the project.

User Survey

If you’ve read this far, maybe you can give me five minutes of you time? The forms are hosted on Google Drive, but you don’t have to log into to access them.

Here is the UX User Survey in English: Alteayoga UX User Survey

Aquí tienes la encuesta en español: Alteayoga UX Encuesta Usuario

Conclusion

I hope to get a few responses, so that I have some material to work with. Even though I am taking longer than suggested to do the course, I truly feel that applying the methods contained in the course gives me the best chance of success. The course is very practical, and we will create a UX portfolio, but behind that, I need my web sites to be solid. So, here’s to defining my strategy!

Posted on

Adobe Creative Cloud: Levelling Up

Adobe Creative Cloud is about levelling up! I decided to increase my membership level and subscribe to the entire Creative Cloud suite. It’s really exciting to get access to all those fabulous, industry-standard apps!

My go-to apps are Open Source. The philosophical stance (free, collaborative software) fits my DIY ethos. Way back in the 1980’s, when I was but a little punk rock chick, DIY culture was the the order of the day! We used to make mix tapes, photocopy zines, sew our own clothes and cut our own hair. There was a real vibe about doing it yourself.

When I first got into Internet, DIY culture was still going strong. In fact, the early net was all DIY. I remember my first IT jobs – there was practically nobody with Computer Science degrees! We were all self-taught and therefore, hackers. We hacked around in the back end until we made it work, and that was that.

Obviously, this method is not scaleable. In order for the Internet to grow, there had to be order, consistency and method.

Linux went from being DIY to distributions. WordPress, while still free, uses plenty of paid plugins. And OpenSource design software like Gimp and Inkscape works fine…but doesn’t have the polish of Photoshop or Illustrator. The pattern fills in Inkscape are shockingly simple. I am sure that I could find some user generated patterns, but that would mean digging around the Internet, and a time investment. At the end of the day, I don’t have time for that, and choose to pay for the professional option, rather than pay with my time.

So, by subscribing to Adobe Creative Cloud, I am levelling up! As I was about to publish, I realised that I ought to have created a graphic for this post, so I saved this as a draft and came back to it later.

I logged onto Creative Cloud and installed both Photoshop and Illustrator. (Adobe Acrobat DC was installed this morning, in order to edit a PDF for Hacienda, the Spanish taxman…but that’s another story!) Lickety-split, I made this combined graphic from the wordsoup from yesterday’s post, a photo from a session last summer, and a lovely iridescent fill provided in the app. If the workflow is this good, then the money investment is definitely offset by the time saving.

Rachel Rose meditating, with a concentric circle of words.

(Editing before posting, I realise that I need to make a background for the text so it stands out. Tomorrow. Right now, time to go to the beach and get the best sunshine of the day. Peace out, RR)

Posted on

Personal Branding – UX Design Course Extra Study

I decided to do some extra study about Personal Branding for my UX Design Course. Personal Branding for UX and design is essential these days. You have to stand out! Part One of the Google/Coursera Foundations of UX Design Course included an in-depth discussion of personal branding. As aspiring UX Designers, we shall be called upon to present ourselves to the world, and sell ourselves as professionals. Although I finished the Module easily, I decided to study the element of personal branding in greater depth, dedicating a significant amount of time to it in the past three weeks.

How do others see me?

A screenshot of my Facebook post for my personal branding for UX course
Ask Facebook…

Personal Branding for UX Design is about establishing your online presence as a UX Designer. For newbies, this essential step both prepares us to present a portfolio to potential clients or employers, and solidifies our self-impression of ourselves as UX Designer.

It was particularly intriguing to compare what I think of myself to how others see me. I set the barrier very high for myself and think that healthy self-criticism is essential for both knowing oneself now, and growing in the future. My tendency is to be very direct and I know that this can sometimes be hard to take.

So, I asked on Facebook. Hey, it’s 2021, what else am I going to do? I am so grateful to all the friends who took some time to help me. I ended up with 200 words to work with for personal branding. The ones that showed up time and again where hardworking, perseverant, high expectations, friendly, creative, offbeat/original, intelligent, direct and “todo terreno”, which in Spanish means “all terrain”. Well, those fit pretty much with my own idea of myself, so the experiment was a success!

Comparing other UX Designers’ Personal Branding, I noticed a lot of originality, breadth and creativity. This emboldens me to present myself pretty much as I am. This may sound obvious, but as a rather zany character, I often felt compelled to “hide” parts of my character rather than shout it loud and proud!

Autodidact

What I did add, and which no one else flagged up, was the word “Autodidact“. As you will see from my about section, I am good at a lot of different things. I have a relentlessly curious mind, verge on the restless and honestly do not know what it means to be bored. There is always something to learn! “Thank goodness I do yoga and meditate” say I, only half-jokingly. My need to learn is constant. When I face a problem, or encounter something unknown, I study it. I make notes. I create a mental map of it, integrate it, and make it fit with the rest of the encyclopaedia I carry around in my head.

autodidact definition

My resume now lists the winning words. I created the graphic below with Inkscape. All the words, both in Spanish and in English, are arranged. I chose the circle because it suggests both an eye (seeing myself) and a spiral into the centre.

a wordsoup graphic for my personal branding survey

Now that I have finished this exercise with gusto I will jump back into the course, on Part Two. I can’t wait! check back for more reflections and musings. I really must get an email list going…

Take care,

Rachel