Benjine Gerber, UX, UI Designer, Developer, Writer - a career spanning 25 years
Own designs
Clients
Anti-reflux bed for 18 year old Sophie
When Sophie was laying on the carpet on her side, I could hear her swallow about every five minutes and I realised that, at times, she has quite a big acid reflux problem. I often watched her trying to find a way to sleep where her head could be propped up, thereby preventing having the reflux. I decided to join her efforts to find a more comfortable way to sleep.
Every day, I would use some blankets to set up all kinds of beds for her that would prop her head and upper body up at an angle. She liked them only so, so. But when I made this one in the photos, her reaction was very different. I was hardly finished, still tucking and patting it, when she already hopped into the bed. She was like - get out of the way. She looked so excited, and soon began to relax and dozed off. For the first few days, she seldomly got out of the bed!
Self-help speech training
Speech therapy for scenarios like stroke recovery or apraxia is not an option for many people, because it is expensive. Added to that, a 30 minute therapy session a week may not be enough practice. This prototype allows people to practice phonetics, with the use of hand cues, from a website. Hand cues is a way to increase fine motor skills required for speech. The person can practice phonetics directly or create their own videos to practice sounds, sound sequences, words or sentences.
The prototype can also be used by someone who wants to change their accent or increase fluency of spoken English. My test subjects have shown improved fluency and articulation, and a change in accent when speaking English within a short time-span. The prototype can also be used by performers like singers, actors or newsreaders to sharpen their articulation of the 45 phonetic sounds in English. It is important to be aware of the fact that not all non-speakers can develop spoken language. Prototype: handcues.com
Meal optimiser prototype - "Safe Range"
What do you do when your body periodically or permanently produces too much nitric oxide in some places, and too little in others, and when your body activates compensatory mechanisms to survive, but it also leads to undesirable effects? At first, when I started looking at many variations of this problem, it seemed to me to be impossible to solve it. Are human bodies destined to just fall apart like this, some sooner and others later?
Luckily, soon enough it became clear that by doing some ‘bio-hacking’ an equilibrium can be regained or at least improved. I researched the relevant science and started to put together some workarounds. After finding some traction I started sharing some strategies here and there with interested individuals based on their own manifestations of these types of issues. Sometimes knowing what their DNA variants are, or seeing their blood test results, hearing about their symptoms or whatever info is available helps to understand what they are experiencing. In 2016 I created this book-outline that shows the progress I made up to that point in time, and since then, I have kept learning about and implementing new, improved strategies. Here is a link to the "Safe Range Diet" (6mb). This spreadsheet is a prototype for a prototype - it is about the arginine/lysine ratio in various food items.
I envision an app that can help someone put together a meal or drink based on the bio-hacking they need to do to gain better biological equilibrium. I can be surprising to people how small a change can make a big difference, meaning, how sensitive someone can be to 'imbalanced' food intake.
Making colour strength picking easier
When creating for example an artwork, the artist needs to pick strong colours for the foreground and weak colours for the background. Also, there must be no overlap between colour strength of the foreground, middle ground and background. In graphic design and especially illustration, these principles are very useful to apply as well to draw attention and show hierarchy. So, how can one get a handle on colour strength boundaries?
After lots of experimentation and creating many prototypes, this color picker (left) became one of my favourite tools. It is made up of gradients and it is set up in a table to sort by the strengths of as set of 18 hues. I used python within Django to work out the color values with specific strengths and rendered the gradients as html, then exported as PDF and then created the final graphic in illustrator.
If have a specific hue in mind and it is not on the picker, pick the closest hue, shift the hue value to the desired one, and you will still retain almost the same colour strength. While many people can handle colour strength intuitively, a tool like this is very helpful for those who struggle with choosing the best suited strengths of colours for different parts of a design.
Color palette tweaking. The colors in a palette need to conform to specific criteria and often this includes the amount of contrast between colors, the strength of color needed to convey a specific spatial or aesthetic sense. I created a python app that helps me to tweak colors with a lot of precision, as well as ease of use. The color wheel helps to see which color scheme applies. The image below is the final output after tweaking the palette.
Color palette application. Figuering out which combination of the palette looks the best on a design can be time consuming, with no guarantee that the best option was even evaluated. By applying all the colors programmatically, one can then simply visually choose the best combination of colors based on appearance.
Creating well-proportioned designs
Earlier in my design career, I considered quitting - in other words - I was really fed up. The reason was: how difficult and time consuming it was for me to create well proportioned designs. I simply had to find a solution. An obvious place to start seemed to be the golden ratio. I started experimenting with this ratio, and immediately noticed improvements in my designs, but it was still very time consuming to work with grids and gizmos to bring things into harmony. I needed to simplify the process
I did some experiments with the number, 1.618. I noticed that when I divided it by two, it looked like a percentage - 80.9%, and I started using this percentage. It worked really well, but most of the time I needed finer tweaks, which became the two percentages, 90.45% and 110.56%. Occasionally I use even finer tweaks, but mainly these two percentages have since become my most important design tools. On some days I guess I use them more than 150 times. Nowadays clients love my design proportions 99.5% of the time. And an extra bonus - the golden ratio can give that je ne sais quoi to a design. If I can spend all day applying the golden ration, I would love that :-)
'Twist' Color Atlas
After becoming interested in the perceptual qualities of color, I developed over a few months the concept of unusual sets of complementary colors. I informally tested whether colour changes using this set of colours can improve a design's aesthetic appeal. I showed the original image and the updated image to some people without telling them which is which. A designer chose the updated image and said he sees a definite improvement, while with the other people the responses were mixed, including being unsure and some of them seemed afraid to give a 'wrong' answer.
Easily create intricate seamless patterns
I wanted to make lots of complex camo and organic patterns and I wasn’t able to get even one layer to look right. I needed to figuer out a process that was easy and that saved time because of lots of automation. Doing research, I noticed that someone made patterns using dimensions of 1024x1024px. I decided to use this size as the base size for all the patterns and over time it became clear that using a fixed size was critical to automation. I experimented with many of the techniques I found through my research (sometimes just in my head when walking outside) and combined bits and pieces of them into my own process solution.
Using Blender3d PBR texture nodes, I generated camo motives that repeat only in one direction (better than none!). I rendered these as 1024px square images. I could automate many steps for creating a seamless pattern tile: (1) Size image to 1024px (2) make 4 copies and aligning them into a square (3) place a 1024x1024 square anywhere on the 4 copies to form a new tile boundary that is seamless, and set the artboard to the new boundary. (4) Fix the pattern mismatch and any glitches between the four aligned tiles, where it overlaps with the new boundaries. (5) crop the four squares that are now merged to the new tile boundaries and make into a pattern.
If the pattern is a vector this can be done in Illustrator and if it a raster, it can be done in Photoshop.
Self-published author
I wrote two books about mindfulness and emotional regulation and one book about how to build a story for a novel or other format. I am currently writing a book with reappraisals which incorporates principles of emotional regulation, compassion, mindfulness and appraisal of various situations and states of mind that a person can experience. For a few years I have been writing reappraisals on different issues that people may experience for an online private Facebook group. I sometimes write reappraisals on request for specific individuals in the group. I would love to write a book about Human Centered UX.
Ghostwriter
I wrote some sets of inspiration cards for a client - 42 cards of 100 words each, 42 cards of 10 words each and 365 cards of 20 words each and 365 affirmations of 10 words each. The phrases are based on principles of wellbeing, mindfulness, emotional regulation, compassion and more.
OOUX presentation
I created this OOUX presentation as a way to propose to clients to follow this process, and as a freelancer to sell it as a service. The process can be used for simple as well as highly complex problem-solution domains. Here is a link to download the OOUX presentation.
I have used an object oriented design strategy for most of my career (since 2000), and since 2015 OOUX, which I used in projects like - ADHD medication symptoms monitoring for children, - Mining sensors alerts interface, - Fan-interaction for international DJ, - custom private tour management system - Recruitment Intranet. The first time I used an OOUX approach was in 2000 when I designed a recruitment intranet - I realised that I was creating the dreaded "bowl of spaghetty" style app, and then reversed course. I searched for a way to be more structured and found UML, after which I was able to create the systems in a pleasingly structured way. About 15 years later, I noticed someone developed OOUX and I was immediately intrigued and trying found out all I could about it. I was pleasantly surprised about the super useful strategies that I could learn from it.
Pokerbuddies
The founder hired me as systems designer for the envisioned Facebook Poker app. I had to learn all about facebook apps, how to play poker. We arranged our own poker night, and invited people who loved playing poker - where I was able to observe how people enjoyed the interactivity of a real game - the emotional ups and downs of competing and good sportsmanship when it is just for fun. We also researched the main competitor with the aim to differentiate and improve on their offering.
During the first three months, I designed the system and documented the specifications, while also keeping two teams - one in Israel and one in England in the loop about the parts of the app that they were building, namely a Drupal based backend for everything, including a website, and a flash based Poker Table app that would be embedded into facebook and everything had to share data including the ad management system. The game included a Pokerbuddies currency that people could buy from the website to add more credits to play or to buy gifts for other players.
I based all the design deliverables on an object oriented model that I used to help me structure all the components and keeping them modular. I built a mockup that simulated the flow of the website.
Responsive websites
I have designed websites since the late 1990's, and transitioned to responsive design at the inception of this method of website building. I have used frameworks like Foundation and Bootstrap on CMS's like Joomla and Wordpress, and also worked a bit with web-app and mobile app development frameworks like Angular and Ionic. I developed for a client a men's magazine called SA Men, using Joomla, which was acquired by a Canadian company. Some years ago, I have built an e-commerce website using joomla components (php). I am familiar with scripting languages like php, asp, javascrpt, typescript, vb script and some coding languages like python. I have done database development using Ms Access, Ms SQL, MySQL. Because of my broad range of skills, some of them get a bit rusty at times, but is is not too hard for me to get them back up to speed again.
Branding
I have designed and updated more than 100 logos. I use the golden ratio extensively when creating logo and this has sped up my work and has increased my success rate by a thousand fold.
At one point I decided to draw up a logo redesign proposal that included a human centered design approach. The client wasn't interested in the proposed approach, for some reason. Here is a link to download the pdf - Human Centered/Lean UX brand proposal (3.4mb). At the end of the proposal you can see an example of a logo redesign made with extensive use of the golden ratio.
Infographic flyer for networking event
A client asked me to design an attractive promotional document for an upcoming networking event. She gave me a 30 page document and asked me to narrow down as much as possible. Looking through the information, I realised that it contained demographics of the event attendees that could help them at the event to network with other attendees. Forging collaboration was a key objective for this event.
Most of the information I needed for developing a networking infographic was available in the document and the client was able to fill out the information gaps. I placed all the projects into a table with icons to categorise them. This would allow event attendees to know at a glance what the other attendees were focused on and what potential existed for collaboration. And this was also potentially an ice breaker for introductions and new group formation.
Coffee table book - OR Thambo
The client, Iziko Museums, asked me to create flyers to give out at the museum about their current exhibition, namely OR Thambo. They had quite a nice budget and I thought that making something more substantial than flyers could be an idea, and would not cause a lot of waste. I mentioned the idea to the client and after also liaising with the printing company representative, we agreed that I would create a coffee table book based on the exhibition posters. I converted all the information boards of the exhibition into pages for the coffee table book. Once the printed coffee table book was delivered to the museum, one copy of the book was given to each visiting school to put in their library.
Book series covers, illustration, formatting
The client provided me with manuscripts for 4 books and a bundled edition. She asked me to create the book covers, add illustrations, do content proofreading and to format the content for print and for e-book sales on Amazon. I wrote the teaser content for all the front-covers and an intro for the back-cover for one of the books based on what I read in the book and wrote the bio for the author as well. I developed a theme relating to the context of the books of how each person experience a transformation. While I am not religious, to be able to do the cover designs and illustrations, I had to read the books and get into a frame of mind that empathises with the readers and their diversity and and with the author and her goals. I also tweaked the logo for the client. She used the image below to promote her book series on facebook and other social media.
Concept African Craft Market - using four shipping containers
When I volunteered at Monkeyland and Birds of Eden for 6 weeks, I created this 3d mockup for the founders of Monkeyland, which they wanted use to pitch a craft market idea to some stakeholders of the new Monkeyland opening in Natal. I used Blender 3d to create the scene and render the final output. Inside the scene I placed many images that I downloaded from the internet to make the scene look like an African Craft Market, that is fully stocked and with visitors (oversease tourists) browsing the shops or walking/sitting around. I rendered a very wide angle shot so that I could fit the whole market into the image. While I was at Monkeyland and Birds of Eden, I also took photos of the birds and monkeys and cleaned the bird in the smaller cages behind the big cage and gave food and water to those birds daily.
