Repetition is in all things in nature. It is a visual pattern that we as humans grow accustomed to seeing, reproducing and operating around from a very early age. This is a visual design principle that has existed since primitive humans have been drawing on the walls of caves. So how do we tap into this for designing a captivating user experience?
Do you remember playing with building blocks when you were a kid?
This teaching toy is based on this same repeating pattern and the critical lessons it teaches for order, hierarchy and balance are things that we carry with us into adulthood. It's a comfortable, known and immediately recognizable "pattern" that makes you feel like "ah ha, I know how this works!"
We can tap into this power for a User Experience journey on the web with eye-grabbing Calls to Action in order of importance to the goals laid out.
Not only can we create that journey through this natural shape repetition but we can enforce branding and messaging too by choosing to work with shapes that reflect the visual and messaging elements.
For example I am going to use a project I worked on somewhat recently BHNInc.org. This mental health organization had a lot of website challenges when I began working with them. They had a web presence they were really unhappy with and it prompted a redesign along with lengthy amounts of work on a discovery process that encompassed information architecture of programs. Maybe a topic for another post or check out my case study.
They were really happy with their existing branding. It was already on countless amounts of brochures, quarterly reports and collateral. So knowing they had a solid handle on their image, color palette and so on, I was able to establish it as the foundation in my process.
That "swoop" above the bhn was a shape I knew I could immediately use to help map out the journey and tap into this repeating pattern power. So I got to work on wireframing after a process of understanding the hierarchy and their goals.
For the sake of brevity I'm only going to focus on the home page here...
I felt like at this stage I had really honed in on my concept. I could see the user journey clearly by using the circular elements in a repeating pattern down the page as a guide for the user's eye from tier to tier. These circular elements are calls to action and rendering important data that reflected the goals in their levels of importance, a step well thought out in a prior discovery phase. It also translated well responsively across mobile first design to desktop. AND very important to all things I do... the circle's arch reflected the arch seen in the logo. The arch in the logo, an encompassing shape, representing a full level of services for mental health under one organization.
It was really "shaping up." Ugh... bad pun. I'm so sorry.
The pitch of the wireframes to the client went over REALLY well. It really helped squash any doubts they had that this new website wouldn't be able to serve the purpose of rendering their programs in an intelligent, organized way and also hit the mark on reflecting their brand and messaging.
Let's have a look at the fleshed in model live now in production...
Please ignore for the moment the empty events area on their site. As you can probably guess the Corvid 19 quarantine is ongoing and so they'd suspended all events.
Now let's drop a mask on this thing and isolate the circles and see how they stagger and pull your attention down the page. We're immediately teaching the user through repeating shape pattern that these are important areas that you should be looking at or interacting with.
Maybe you've noticed at this point but even the branding (I designed) for a tie service called 413Cares reflects that rounded arch shape. Buttons are also rounded, further reinforcing the pattern of:
circle === user interaction or attention please, and hey... by the way, we're bhn.
So there you have it, an example of utilizing repeating shapes in user experience design and also to reinforce branding and messaging. Thanks for coming along on this UX observation!