Read on Twitter
Here we go people! I’m finally getting started on a charity’s interface redesign for the @women_make_ Just F*cking Ship It Challenge. #charity #redesign
BUT
BUT
With less than a month to ship my project, there isn’t much time for research & data analysis. Which makes me nervous already. That is not how I typically work. Like, ever.
AND
AND
The charity I chose won’t get back to me. Mind you, they’re probably busy helping people in the real world. Bottom line, I can’t ask them about their objectives, struggles nor about who their target audience is.
And that, is how I would typically work. Always.
SO
And that, is how I would typically work. Always.
SO
You got it. It’s not looking good. But, guess what, I’m a user too. So I’m going to redesign this interface as in a Choose Your Own Adventure kind of project.
FIRST STEP
Redesigning an interface starts with defining the problem I should fix.
Spoiler: the problem is rarely that the website isn’t pretty enough. Although that's usually a red flag. But what is considered pretty is subjective. And I’m a designer, not an artist.
Redesigning an interface starts with defining the problem I should fix.
Spoiler: the problem is rarely that the website isn’t pretty enough. Although that's usually a red flag. But what is considered pretty is subjective. And I’m a designer, not an artist.
FIRST IMPRESSIONS
• Busy interface with lots of information to process
• This font is hard to read
• As a user, I don't know what I'm expected to do
• Why is the Dalai Lama not much higher on this interface if he's supporting this charity?
• Busy interface with lots of information to process
• This font is hard to read
• As a user, I don't know what I'm expected to do
• Why is the Dalai Lama not much higher on this interface if he's supporting this charity?
SETTING AN OBJECTIVE
I'm going to keep things simple here and offer a much simpler interface to use. One that matches the average person attention span which has dropped from 12 to 8 seconds in the last ten years. (I'll have you know it's shorter than a goldfish - 9 seconds).
I'm going to keep things simple here and offer a much simpler interface to use. One that matches the average person attention span which has dropped from 12 to 8 seconds in the last ten years. (I'll have you know it's shorter than a goldfish - 9 seconds).
Stay tuned, tomorrow I'll speak about:
• accessibility
• full redesign VS optimisation
• how to leverage the Dalai Lama on a web design
• accessibility
• full redesign VS optimisation
• how to leverage the Dalai Lama on a web design
Good afternoon people!
This is Day 7 of the @women_make_ Just F*cking Ship It Challenge.
Still not splashing colours in Figma though. Because I can’t dig into @actionhappiness analytics, I have to jump straight into design & usability testing.
This is Day 7 of the @women_make_ Just F*cking Ship It Challenge.
Still not splashing colours in Figma though. Because I can’t dig into @actionhappiness analytics, I have to jump straight into design & usability testing.
Given the nature of their work, I can’t imagine @actionhappiness not putting accessibility at the top of their digital priorities.
And yet, here’s a preview of the @reala11ygator report. #accessibledesign
And yet, here’s a preview of the @reala11ygator report. #accessibledesign
What’s really important in that report:
• Insufficient contrast levels
• Incorrect use of heading tags
• Lots of duplicate ID attribute values
https://a11ygator.chialab.io/api/reports/1368c17a-8a54-434e-8608-b31f195bd23f?format=html&ts=1601989743648
• Insufficient contrast levels
• Incorrect use of heading tags
• Lots of duplicate ID attribute values
https://a11ygator.chialab.io/api/reports/1368c17a-8a54-434e-8608-b31f195bd23f?format=html&ts=1601989743648
A few more things to avoid for everyone to enjoy your website:
• Using colour alone to convey information
• Not possible to navigate the site with just a keyboard
• Not providing alt text for screen readers
• Cluttered pages
• Using colour alone to convey information
• Not possible to navigate the site with just a keyboard
• Not providing alt text for screen readers
• Cluttered pages
Why it matters
Whether or not you’re in the public sector (in which case the law requires you to meet certain standards), accessible websites work better for everyone.
They are faster, easier to use and appear higher in search engine rankings. http://shorturl.at/acnB6
Whether or not you’re in the public sector (in which case the law requires you to meet certain standards), accessible websites work better for everyone.
They are faster, easier to use and appear higher in search engine rankings. http://shorturl.at/acnB6
So, what now?
If this was a real conversation with a client I’d produce a full UX audit + data analysis rather than a tweet (duh).
By now we'd have discussed objectives, struggles, where visitors are coming from and what they’re expected to do on this website.
If this was a real conversation with a client I’d produce a full UX audit + data analysis rather than a tweet (duh).
By now we'd have discussed objectives, struggles, where visitors are coming from and what they’re expected to do on this website.
Yawning but following
Still there? Cool. Bear with me. Based on all those findings, the budget and internal resources available, we’d decide on the following:
Full redesign OR optimisation?
Still there? Cool. Bear with me. Based on all those findings, the budget and internal resources available, we’d decide on the following:
Full redesign OR optimisation?
Optimisation it is
I know, I know! I’m disappointed too. Because, knowing my usual branding work, the realm of possibilities to use His Holiness The @DalaiLama on a homepage would be like Christmas coming early.
I know, I know! I’m disappointed too. Because, knowing my usual branding work, the realm of possibilities to use His Holiness The @DalaiLama on a homepage would be like Christmas coming early.
But great design doesn’t have to be disruptive.
Remember there’s a team working on this website everyday. It’s part of my job to think about not making their lives harder when they show up to work tomorrow.
And also my friends, a brand new interface involves branding work.
Remember there’s a team working on this website everyday. It’s part of my job to think about not making their lives harder when they show up to work tomorrow.
And also my friends, a brand new interface involves branding work.
Stay tuned, tomorrow I’ll speak about
• prioritising content
• user journey
• readability
• prioritising content
• user journey
• readability
Good morning people! It’s day 8 of the @women_make_ JFSIC.
It’s getting very exciting cuz I got to see project previews from fellow members like @bhumi1102. And oh my, you are NOT ready for what’s coming!
Now back to my project to redesign a charity interface.
It’s getting very exciting cuz I got to see project previews from fellow members like @bhumi1102. And oh my, you are NOT ready for what’s coming!
Now back to my project to redesign a charity interface.
Before I start talking about improvements, I gotta highlight one more thing that is harmful to your business.
The text of a website should be written as text, rather than as part of an image. With all the no-code builders out there there's no more excuse, it's easy!
The text of a website should be written as text, rather than as part of an image. With all the no-code builders out there there's no more excuse, it's easy!
Why it matters
• You're losing SEO opportunities
• It can't be shared easily by people talking about you
• Heavy images increase page load which impacts your ranking score
• Your credibility suffers because of low-res images
• You're losing SEO opportunities
• It can't be shared easily by people talking about you
• Heavy images increase page load which impacts your ranking score
• Your credibility suffers because of low-res images
Now, readability.
I know @noemistauffer or @botting_ella would have a ton more to say but here's a start:
Fonts can be beautiful, yes. But before anything, they need to be easy to read. And not just by you. By your visually impaired colleague too.
https://www.boia.org/blog/best-fonts-to-use-for-website-accessibility
I know @noemistauffer or @botting_ella would have a ton more to say but here's a start:
Fonts can be beautiful, yes. But before anything, they need to be easy to read. And not just by you. By your visually impaired colleague too.
https://www.boia.org/blog/best-fonts-to-use-for-website-accessibility
Here, the font is too small which makes the serif typeface harder to read than it should be.
There's also a problem of spacing. Too much clutter, too many things to look at.
This page is screaming for air.
There's also a problem of spacing. Too much clutter, too many things to look at.
This page is screaming for air.
Before you label me the new Debbie Downer of web design, let me make something clear. What you do isn't easy.
And when you're already in charge of comms, marketing and whatever else, I understand web design is probably not a top priority. Why is why I exist (wink wink).
And when you're already in charge of comms, marketing and whatever else, I understand web design is probably not a top priority. Why is why I exist (wink wink).
Now, user journey.
Let's look again at what's going on here.
There are so many things to look at, I have no clue where to go, what you do and whether I really want to know cuz that sounds like mental workload I can't afford in 2020.
Let's look again at what's going on here.
There are so many things to look at, I have no clue where to go, what you do and whether I really want to know cuz that sounds like mental workload I can't afford in 2020.
. @actionhappiness is an incredible movement, growing in no less than 180 countries.
But here's the problem. They do so much it's really complicated to present all their actions in a way that isn't visually overwhelming to the user.
But here's the problem. They do so much it's really complicated to present all their actions in a way that isn't visually overwhelming to the user.
* As far as I know, without prior discussion with them nor data support, so bear with me *
What info do we absolutely need on this homepage?
•Who they are and what they do
•People can donate and join the movement
•Original resources available to take action
What info do we absolutely need on this homepage?
•Who they are and what they do
•People can donate and join the movement
•Original resources available to take action
How about those two menus?
It's not a crime to have lots of things to share. But here's a great tip by @tkenny.
"Show what most likely is the most commonly viewed sections first. Following that, use a “more” button."
https://tomkenny.design/articles/false-simplicity
It's not a crime to have lots of things to share. But here's a great tip by @tkenny.
"Show what most likely is the most commonly viewed sections first. Following that, use a “more” button."
https://tomkenny.design/articles/false-simplicity
Stay tuned, tomorrow the fun begins! I'll finally open @figmadesign and start cleaning stuff.
So you probably won't get a big thread (yay!) but I'll share what I'm up to behind the scenes.
So you probably won't get a big thread (yay!) but I'll share what I'm up to behind the scenes.
Day 19 of the @women_make_ Just F*cking Ship It Challenge.
I won't lie, I've had to put this aside for a few days as I recently re-launched my portfolio and casually (not) pulled out @TheaFreelancers out of my hat.
I won't lie, I've had to put this aside for a few days as I recently re-launched my portfolio and casually (not) pulled out @TheaFreelancers out of my hat.
I promised I'd show some visual suggestions for @actionhappiness and here we are!
I've kept the brand colours but slightly transformed the blue & green shades as their original contrast wasn't high enough in terms of accessibility.
I've kept the brand colours but slightly transformed the blue & green shades as their original contrast wasn't high enough in terms of accessibility.
With the @getstarkco plugin, I'm able to double check that those colours work for people with visual impairment such as protanopia, deuteranopia or trinatopia.
UX wise, I've made dramatic changes compared to the original version (cf below)
And of course this is a difficult challenge because I didn't have a conversation with this charity to know what call to action they wish to prioritise. What is the key focus they want to encourage.
And of course this is a difficult challenge because I didn't have a conversation with this charity to know what call to action they wish to prioritise. What is the key focus they want to encourage.
So I took my chances and reframed the new layout around the 10 Keys for Happier Living which seems to be an important part of AFH's action.
There's a small visual cue at the bottom of the screen to also find out about the online coaching program AFH offers.
There's a small visual cue at the bottom of the screen to also find out about the online coaching program AFH offers.
At this point, I struggle with the existing copy on the website.
From an external perspective, it's a bit hard to understand what are all the different actions.
That's more @CLJWrites's expertise but I'd recommend some copy optimisation to clarify all the different actions.
From an external perspective, it's a bit hard to understand what are all the different actions.
That's more @CLJWrites's expertise but I'd recommend some copy optimisation to clarify all the different actions.
In terms of motion, I want to do something about this giant yellow ball but I don't know what just yet.
I'm thinking about a mini-breathing exercise although that could be too much like a meditation app, which is not what AFH does. So more about this later.
I'm thinking about a mini-breathing exercise although that could be too much like a meditation app, which is not what AFH does. So more about this later.
We're on Day 23 of the #womenmakechallenge and... 8 days away from launch.
Normal people would probably crack on.
Me? You know, just making merch for @TheaFreelancers as if that's what we needed right now.
Normal people would probably crack on.
Me? You know, just making merch for @TheaFreelancers as if that's what we needed right now.
This is it! Last day to submit my contribution to the #womenmakechallenge.
I admit I've not given it my best. I've (frustratingly) been bedridden for the last 3 days with #COVID19.
However, I managed to improve my mini mindfulness exercise for the @actionhappiness homepage.
I admit I've not given it my best. I've (frustratingly) been bedridden for the last 3 days with #COVID19.
However, I managed to improve my mini mindfulness exercise for the @actionhappiness homepage.
So much more could have been added:
• An audio track to work with the visual mindfulness exercise for better accessibility.
• Text to indicate when to breathe in/out.
• The rest of the page
• An audio track to work with the visual mindfulness exercise for better accessibility.
• Text to indicate when to breathe in/out.
• The rest of the page
But as @Clo__S suggested earlier, health is a priority so I won't develop this any further.
It was fun to get involved in the @women_make_ challenge for the 1st time. I can't wait to see everybody else's contribution!
Now, back to bed... https://dribbble.com/shots/14495231-Action-for-Happiness-Redesign-Suggestion
It was fun to get involved in the @women_make_ challenge for the 1st time. I can't wait to see everybody else's contribution!
Now, back to bed... https://dribbble.com/shots/14495231-Action-for-Happiness-Redesign-Suggestion
