Forem: Carmen Wright

Notes: "Cross-Cultural Design" by Senongo Akpem

Carmen Wright — Tue, 06 Oct 2020 00:09:20 +0000

This article originally appeared on my website.

I'm a fan of writing notes while reading design books. The book belongs to the author(s). The notes are a quick reference for myself and others if they need it.

Cross-Cultural Design

Senongo Akpem

Introduction

WEIRD: Westernized, Educated, Industrialized, Rich, Developed

"We use imagery, typography, and taxonomies familiar to us, without researching their impact in other cultures and languages. Those of us in WEIRD countries treat the web as an extension of our own lived experiences" (1).

People and Culture

We have space to learn what we don't know. It's easy to say "I wasn't aware of that. Thank you for telling me and I'm changing my [behavior] now."

Instead of thinking of the monolithic "user", we should ask these questions:

Who makes up the web these days?
What do they look for in the digital things they use?
What role does the web play in their lives, especially when they span languages, time zones, and political systems?

"Databases, websites, mobile apps, social-media platforms, and (especially) intranets are all systems that reproduce, revise, and amplify different parts of our cultures -- both good and bad. They illuminate our preferred methods of communication, our social rules and perceptions, and even our aesthetics" (11).

"Different societies may expect different things from digital interactions, interpret information differently, and hold different mental models than your own. Don't assume those mental models are fixed within the same country or culture, either" (13).

"It's common for Western designers to point to concepts like rational type systems, clean lines, an absence of decoration, and mathematical layout grids as universally 'good' design without realizing that most of those principles originated in the century-old Bauhaus movement" (16).

Cultural preferences across major visual design elements:

Space
- Japan: web pages with a lot of information are functional and aesthetic
- Western aesthetic: key is negative space
Imagery
- Some cultures may have a taboo against certain images or expressions of beauty
- Example: photos of people giving others something with left hand
Color
- Carries culturally symbolic meanings
- Example: Japan Post's primary brand color is red and post boxes are also red
Type
- Density of certain scripts (Japanese)
- Relative length of words (German)
- Means type scales, letter-spacing, and line-height will need to be adjusted

Identity facets:

Race
Ethnicity
Gender
Social class
Age
Religion
Individual identity
Algorithmic identity
- "categories of identity covertly assigned to you by means of algorithmic analysis of the data that has an organization such as web analytics firm has amassed on you" -John Cheney-Lippold

Cultural Dimensions -- Geert Hofstede

Power Distance (PD)
- how less powerful members of a society both accept and expect that power is distributed unequally
- Low PD:
  - members of the society can openly question authority and the distribution of power
  - ideas of equality are welcomed and expected
- High PD:
  - a clearly established hierarchy that isn't openly questioned
  - inequality is expected and even promoted
  - Example: parents and teachers demand respect, children and students almost automatically put their elders on a pedestal
  - a
Individualism vs. Collectivism
- Individualistic societies
  - People have loose social ties to one another
  - Value personal opinions, challenges, and material rewards at work
  - Relationships are centered around self-respect and honesty
  - Guilt is the best way to affect personal change
  - Government: strong right to privacy, limited use of state power, strong free press, individual interests, and self-determination
- Collectivist societies
  - Close-knit web of friends, extended families, and other societal groups
  - Everyone belongs to a larger group
  - People value training and work has intrinsic value
  - Avoiding shame, saving face, and maintaining harmony within the group
  - Government: tighter control of the press and economy and prioritize consensus and social harmony over personal freedoms
Masculinity vs. Femininity
- based on traditional gender normativity
- Masculinity
  - prefers assertiveness, achievement, heroism, and toughness
  - Gender roles strictly maintained
  - People value financial and social rewards for achievement or career advancements
  - Political sphere is usually dominated by men and little public support for those who don't conform to traditional gender roles and expressions
- Femininity
  - prefer cooperation, modesty, and quality of life
  - Vulnerable are cared for and there is less competition for resources and rewards
  - Gender roles aren't rigidly enforced
  - People value good working conditions, collaborative and balanced relationships, and a promising and secure career
Uncertainty Avoidance (UA)
- Measures a society's tolerance for ambiguity and the unexpected
- High degree
  - Preference for rules, formality, structure, and absolute truths
  - Managers prioritize tactics over strategy and there are more rigid behavioral expectations
  - People expect clarity in communication and are more direct and active in getting their point across
  - Differences are seen as threats
- Low degree
  - More accepting of differences and show less anxiety around new or unexpected things
  - People don't tend to use aggression or strong emotion to communicate
  - People are more easygoing and the business focuses on strategy for the long term
Long- vs. Short-term Orientation
- Long-Term
  - See more value in the looking toward the future
  - Pragmatic, appreciate adaptability, and commonsense solutions
  - Family and friends as sources of information and credibility
  - Focus on gaining useful skills over time, saving for the future, and patiently adapting to market and cultural changes
- Short-Term
  - See more value in looking to the past and present
  - Problem solving for immediate results
  - Cultural norms remain largely fixed over time
  - See rules and traditions as their primary sources of information
  - Focus on quarterly results and near-term gains
Indulgence vs. Restraint
- How much freedom people in a given society have to act on and fulfill their human desires
- Indulgent society
  - Allows its members relative freedom to enjoy life, particpate in recreation and leisure, and pursue individual satisfaction
  - Work emphasizes employee comfort
  - Feel free to voice opinions and free speech is protected as a core human right
- Restraint
  - Control how the members satisfy their needs and wants
  - Strict social, sexual, and disciplinary rules
  - Money is saved, not spent
  - Right to speak freely is deprioritized
  - Maintenance of social order takes precedence

Problems with the Cultural Dimensions:

Focus is on nations over individuals
Makes it easy to blame our bad design decisions on users' cultural orientations
There isn't practical guidance for modern digital experiences

"Culture is a series of negotiations over influence, meaning, and language, and those happen when people actually get together and talk" (44).

Principles of Cross-Cultural Design

"Cross-cultural design asks you to:

embrace cultural immersion,
research creative communities,
work with experts,
question assumptions, and
prioritize flexibility" (47).

Cultural immersion:

Read the poetry and literature of your target culture, both old and new
Check local colleges for events
Consume media from the culture
Visit cultural centers
Visit ethnic enclaves and neighborhoods where your target audience lives and works
Look for culture-specific design publications
Sign up for regionally focused newsletters
See what creative practitioners are working on

Question Assumptions

Document your assumptions about the client, the audience, and the project.
Share your assumptions with all stakeholders.
Turn any assumptions into a list of questions to guide your upcoming research.

Workflow:

Document the thinking behind your design choices.
Keep your work in shareable formats
Systematize workflows
Start rough so you can work through cultural blind spots
Explain design variants and options

Cross-Cultural Practitioners

Must be able to listen, to ask questions, and to incorporate information that may feel wildly different from their own culture

"We assist people in seeing and assuming the perspective of others, to help create interfaces, products, and services that are responsive to human needs and considerate of human frailties. Designers are also stewards in the other sense of the word, because we protect the creative process." - Diogenes Brito

Cross-Cultural Competence aka Cultural Intelligence (56)

Provincial
- "You are effective and knowledgeable when it comes to your cultural background and familiar design problems, but may struggle in new contexts."
Analyst
- "You systematically assess new situations and adopt repeatable, go-to strategies that help you navigate cross-cultural design problems."
Natural
- "You rely on your intuition to quickly reach cross-cultural design solutions. Ambiguous situations may make it hard for you to trust your gut."
Ambassador
- "You are confident and sure of yourself, even if you lack cultural knowledge. You are often able to correctly assess and adapt to cultural differences."
Mimic
- "You mirror the cultural behavior you see in others, even if it is new or difficult to decipher, making you effective in small, interpersonal situations that require conversation and negotiation."
Chameleon
- "You are able to assimilate and blend into cross-cultural situations. Your strength is in gathering design insights and adding cultural context to them."

Habits of the Cross-Cultural Designer

You tell stories.
You ask big questions.
You share ownership of creative projects.
You work across disciplines.
You creature cultural spaces.

Cross-Cultural Research

Cultural probes

way to engage audiences and provoke inspirational, open-ended and multi-sensory feedback
Written, drawn, and photographed responses can shed light on users' lives, thinking, and motivation
Conducting one
- Identify the goals of the probe
- Design the tasks
- Assemble the kits
- Distribute them
- Synthesize the information

Local facilitators

someone with lived experience in the culture you're researching in any kind of observational methodology
Having someone on hand who can understand and communicate in these linguistic forms will make your insights deeper and more culturally relevant

Bollywood technique

Ask participants to imagine they're in a dramatic situation like a Bollywood film
Users are given permission to participate in a fantasy thus giving them permission to think outside their social norms
How to do it
- Create a base narrative
- Create variations that match cultural dimensions
- Write out your testing scenarios and variations
- Use local facilitators

A common step for WEIRD designers would be to gather insights and quantitative data, head back to the office, and craft personas.

Walking Havana method

Researchers gather a group of residents and asked them to create characters for a TV series based in Havana
While "scouting" locations, residents pointed out different issues and features of the community
This activity helped researchers immerse themselves in the environment and the residents' struggles with finding employment and economic opportunities.
How to do it
- Ask participants to name their work
- Use appropriate images
- Create space for sharing
- Define what will happen to the work

Possessions Personas

focusing on possessions in personas is a great way for cross-cultural design projects to incorporate a larger view of the user experience
How to do it
- Ask questions about possessions
- Discuss devices in personas
- Show people with their things

Implicit bias

unconscious attitudes and stereotypes that affect your actions, perceptions, and decision-making
will trip you up every time you conduct research or design work

"Culture lives and dies by the stories its members tell each other, whether or not they are true. Your lazy brain will happily ignore facts that don't fit the narrative it's already set up, so your challenge is to give it a new narrative, one that is not reliant on stereotypes and guesswork" (85).

Deficit-framing

defining an audience by a shortcoming
Example: "We help poor farmers in climate-stressed countries use technology to grow what they need to survive."

Asset-framing

defining the audience or strategy by a positive feature
helps us short-circuit the brain's tendency toward negative narratives, stay centered on our audience,and prioritize their success
Example: "We help small landowners boost crop yields and built their communities' climate resilience."

When approaching persona strategies:

Identify positive truths of your audience.
Focus on your audience's agency.

"By focusing my design strategy on aspirational stories about my users, I can craft artifacts, content, and interfaces that do not stigmatize or stereotype" (87).

"Because personas were originally developed to describe WEIRD audiences, they are sometimes too Western-focused to be usable in other parts of the world. We often don't consider the political and social agendas that come with the traditional user persona, and in doing so, we make them much less effective" (87).

Culturally Responsive Experiences

"People visit sites that offer them no cultural mental models or visual framework to fall back on, and they end up stumbling through links and pages. Effective visual systems can help eliminate that guesswork and uncertainty by creating layered sets of cues in the design and interface" (91).

The role of icons

represent an organization, service, or a product
identify key information
illustrate relationships
show how to navigate content
supply warnings
give instructions
provide context

Many of the icon systems we find online, whether free or paid, are not representative of global cultures, so designers end up putting in extra work to adapt them.

Icon sets that attempt to be globally acceptable run the risk of miscommunication, and the overall impact can sometimes fall short.

Make icons work

Pair with text
Visually consistent
Have high contrast
Use color consistently
Keep the meaning the same across design systems
Culturally sensitive
Customizable

Colors can be associated with sacred rituals, political parties, civic movements, or other cultural touchpoints.

Understand how colors are tired directly to cultural and social lore

Changing visual design for different markets is a commonplace exercise when doing global branding and marketing.

If you're going to use images of people, make sure to broadly represent people from that culture

Internationalization and Localization

Internationalization (i18n)

Designing or updating websites and products so they don't contain any cultural-specific attributes
Make digital experiences as flexible as possible so they can function well across various cultures

Internationalization is about making sure the product can go anywhere and localization is about preparing to go somewhere

Formatting

Names
- Name order
- Name letters and lengths
Locales
- Postal codes
- Formatting addresses
- State/Region/Provinces
Dates
Currency
- Inauspicious numbers
- Currency presentation
- Multicurrency
- Tax/Value-Added Tax (VAT)

Directionality

Icon direction
- Mirror icons that indicate time, motion, or direction
- Don't mirror video UI
- Leave icons that don't communicate direction as is
Text direction

Localization toolkits

documentation that translators need to be effective and ensure they're focusing on what is most important
Contains:
- A list of languages to be translated
- Descriptions of your audience, their particular needs, and how to write for them
- A sitemap listing all pages and content that need to be translated
- Any existing translation memory
- database that allows translation teams to store and reuse phrases and words that have been previously translated
- Information on the tech stack and login details for the content management system

TIP: Write like an English as a Second Language user is reading your work.

As written above, these are just my notes for this title. I encourage you to read a copy of your own for further insight into the text.

Notes: "UX Research" by Brad Nunnally & David Farkas

Carmen Wright — Tue, 22 Sep 2020 22:42:40 +0000

This article originally appeared on my website.

I'm a fan of writing notes while reading design books. The book belongs to the author(s). The notes are a quick reference for myself and others if they need it.

UX Research: Practical Techniques for Designing Better Products

Brad Nunnally & David Farkas

Good Research Starts with Good Questions

How Good Questions Go Wrong

Leading Questions > "How do you use Outlook to communicate your work status?"
Shallow Questions > "Do you use Yammer for team discussions?"
Personal Bias > "I know I always struggle with invoices; what challenges do you have with your software?"
Unconscious Bias > "Where do you guys go to unwind after work?"

Knowing When to Break the Rules

Leading > "How much do your friends and family appreciate photo albums when you make one for them?
Shallow > "How many times do you log in to Facebook in a day?"
Personal Bias > "Do you think the Cubs actually have a chance at the World Series this year?"

Quantitative Research Methods

Method Name	Insight-Driven	Evaluative	Generative
A/B Testing		X
Analytics		X	X
Card Sorting	X	X	X
Customer Feedback	X	X
Email Surveys	X	X
Eye Tracking		X
Intercept Testing	X	X
Moderated Product Testing		X	X
Surveys	X	X
Taxonomy Review (Tree Jacking)	X	X
Unmoderated Product Testing

Qualitative Research Methods

Method Name	Planning	Discovery	Validation
Card Sorting		X	X
Contextual Inquiry		X	X
Diary Study		X	X
Heuristic Evaluation	X	X
Landscape Analysis	X	X
Moderated Product Validation			X
Participatory Design	X	X
Stakeholder Workshop	X	X
Surveys	X		X
Taxonomy Review		X	X
Unmoderated Product Validation			X

Heuristic Evaluation

Summary > Provide a quick summary (1 sentence) of the tasks that is performed for this heuristic violation
Page Identified > Provide the URL/page title that the violation is found
Strengths > Provide any positive factors about the task performed for the violation
Heuristics Violated > Provide the code of the heuristic it violates
Details > Provide any other detail that hasn't been captured above or short recommendation on how to resolve violation
Screen shot of violation

Faciliating Research

Key Body Signals

Open arms and legs > More approachable and agreeable overall
Closed arms and legs > Mindset is defensive and potentially closed off
Spread-out arms and legs > Attempt to expand your personal space/assert your overall presence
Leg positioning > Legs like to point in direction you want to move
Head movements > Look up: accessing imagination and potentially being deceitful > Look down: accessing memory and potentially being more truthful

Key Expressions

Surprise > Eyes wide open and jaw dropped
Fear > Eyes wide, mouth barely open, and forehead wrinkled
Disgust > Teeth barred, nose wrinkled, and eyes slightly closed
Anger > Hard stare, closed and tense lips, and nostrils possibly open wide
Happiness > Broad smile, crow's feet around eyes, and raised cheeks
Sadness > Pouting lips and drawn-in eyes
Contempt > Partial fake smile and squinting eyes

Communicating Insights

Research Artifacts & Diagrams

Experience maps
Personas
Mind maps
User flows
Swim lanes
Mental models
Severity scales
Click maps
Actionable recommendations
Change logs
Design specifications

As written above, these are just my notes for this title. I encourage you to read a copy of your own for further insight into the text.

Notes: "Calm Technology" by Amber Case

Carmen Wright — Tue, 22 Sep 2020 22:40:39 +0000

This article originally appeared on my website.

I'm a fan of writing notes while reading design books. The book belongs to the author(s). The notes are a quick reference for myself and others if they need it.

Calm Technology: Principles and Patterns for Non-Intrusive Design

Amber Case

Designing for the Next 50 Billion Devices

"Designing Calm Technology": understanding the impact of technology on people's behavior and well-being

Edge Cases: unpredictable problems that arise at extremes

oftentimes are discovered after products are launched > Example: Running shoe might work well on typical pavement, but melt on track material on very hot summer days

The physical technology that we live with and rely on daily must be resilient enough that it can work regardless of whether or not it's connected to a network

We can help make the future more reasonable by writing efficient code, using lower-level languages for mission-critical systems, and creating more local networks

Principles of Calm Technology

I. Technology should require the smallest possible amount of attention.

A lot of connected technology doesn't "just work" right out of the box
Consider doing away with an interface or screen entirely, replacing it with physical buttons or lights > Example: MacBook power cord > - Primary information system: Light indicator > - Secondary information system: Visual display

II. Technology should inform and create calm.

Technology can create calm by letting you know definitely that a system is functioning correctly and all is well
- Calm comes from knowing that you'll be alerted at the appropriate time if something needs to be addressed

III. Technology should make use of the periphery.

When a technology forces a low-resolution update into the high-resolution space of your full attention, it wastes your time, attention, and patience
Using touch, sounds, and peripheral vision opens up our sight to focus entirely on the road while doing secondary tasks in our periphery > Example: Van Halen's brown M&M's verified if a venue read the technical aspects of their show

IV. Technology should amplify the best of technology and best of humanity.

The best tech amplifies the best of both machines and people
The best interfaces connect us to other people
Amplify the tasks that humans are better than machines

V. Technology can communicate, but doesn't need to speak.

As voice-based interfaces become more common, it's worth addressing the problems with voice interaction specifically
Making a computer speak like a human without instilling it with a series of human context or relationships ultimately leads to a sense of dissonance in the person using it
A user interface requiring all of our visual focus distracts us from doing anything else
A simple positive or negative tone, symbol, or light can be designed in a way that's universally understood > Example: Not "Launch the Octopus"
Use a status tone instead of spoken voice.
Use a buzz instead of a voice-based alert.
Use a status light instead of a display
Sometimes having two notifications is useful, as it increases the likelihood of user noticing it without demanding their full attention

VI. Technology should work even when it fails.

The problem with edge cases is that their impact outweighs their frequency
The key to dealing with edge cases is providing redundancy

VII. The right amount of technology is the minimum needed to solve the problem.

Good designers aren't afraid of working through all the tiny details and all the edge cases they can conceive, removing unnecessary features until there is nothing left to take away
Empowering the user to get their goal with least amount of attention
"Is this something necessary to the product?"

VIII. Technology should respect social norms.

One that conforms with existing norms, or (more often) norms have adjusted to accept ___

Common Communication Patterns

Status Indicators

Visual
- Heat light on a stove
- Bedtime lamp
- Server status light
- Light-based faucet
- Light-up toothbrush
- Self-inflating inhaler
Tones
- Help button on a plane
- Washer and dryer with a melody
- Insulin pump
- Roomba vacuum cleaner
Haptic Alerts > Physical notifications that can be felt on body
- Feedback from video game controller
- Buzz on a smartphone
- Smartwatch alert
- AMBER alert or emergency alert
- LUMOBack posture sensor
- Turn-by-turn directions
Shouts
- Seat belt on/off alert
- Smoke detector
- Parking garage warning buzzer
- Emergency vehicle truck siren
- Recess bell

Ambient Awareness

Lavatory occupied sign
Directional tape on a floor
Weather-colored lightbulb (conceptual)
Email Garden (conceptual)

Contextual Notifications

Weather
Location
Time
Emotional and metabolic state
Proximity
Accomplishment

Persuasive Technology

Alpha wave synchrony feedback machine
GlowCap
OPOWER
Withings scale
Toyota Prius driver feedback
Salad bar tongs
Beeminder

As written above, these are just my notes for this title. I encourage you to read a copy of your own for further insight into the text.

Notes: "Tragic Design" by Jonathan Shariat and Cynthia Savard Saucier

Carmen Wright — Tue, 22 Sep 2020 22:35:26 +0000

This article originally appeared on my website.

I'm a fan of writing notes while reading design books. The book belongs to the author(s). The notes are a quick reference for myself and others if they need it.

Tragic Design: The Impact of Bad Design and How to Fix It

Jonathan Shariat and Cynthia Savard Saucier

To purchase or learn more about the book.

Introduction

Primum non nocere = First, do no harm

Blaming the last people involved in a process for making a costly mistake is not productive

Good visual design reduces the cognitive load required to complete a task

Badly designed products serve their creator or sponsor first and user second

Designers have responsibility to educate their clients, but often have to answer to clients

Failing to identify all of the hidden costs and impact of our designs on the world around us can lead to blindly and unintentionally causing harm to others

Designers are gatekeepers of technology

It is up to us to ensure the gates are as wide open and accessible as possible

Usability Heuristics for Interface Design [Jakob Nielsen]

Visibility of system status
Match between system and the real world
User control and freedom
Consistency and standards
Error prevention
Recognition rather than recall
Flexibility and efficiency of use
Aesthetic and minimalist design
Helps users recognize, diagnose, and recover from errors
Help and documentation

Design Can Kill

Bad design can cause physical harm or death

Harm doesn't always comes from negligence but may come from bad processes and lack of usability standards or user testing

Metrics are the opposite end of spectrum from empathy

All software, even if extremely well designed, will behave in an unexpected way under certain conditions.

There is rarely a single solution to any problem

Design Can Anger

Polite Software

Ask for the user's permission to perform an action
Offer alternatives
Explain all of the options and settings
Anticipate the user's need when possible
Respect and remember the user's decision
Be mindful of words and tone
Fake politeness if necessary

Dark Patterns: UI carefully crafted to trick users into doing things they might not otherwise do

Bait and Switch
Fake Content
Forced Continuity
Friend spam
Misdirection
Roach motels
Trick question

Design Can Sadden

When creating a feature meant to celebrate, allow users to opt-out

Smileys, thumbs, likes, stars, and hearts carry a great load of emotion

To avoid causing sadness, implement a "Sad Sheriff"

Design Can Exclude

Making your service accessible

Don't rely on color to convey information
Pick high-contrast text colors
Use alt text
Avoid text embedded in images
Provide context for hyperlinks
Simplify your textual content
Avoid automatic image sliders and carousels
Design accessible forms
- Keep labels visible when user is filling in fields
- Don't use gray placeholders inside field (screws up screen readers)
- Form can be filled using only keyboard and Tab key
- Group all error messages at top of page and repeat them next to erroneous form control
- Make sure there's textual explanation
Consider accessibility outside of browser
Treat internet access as a human right

Design is a bridge into technology

If a group of people is excluded, they get left behind in many ways: socially, economically, and creatively

Injustice can occur when a rule is conveyed through confusing design and when information is not accessible to people in need

Tools & Techniques

Knowing that people hate your product is much better than living in blissful ignorance

Don't overwhelm teams with hard data if designers want to engage them on an emotional level and create empathy toward users

Universal Facial Emotions

Disgust
Anger
Fear
Sadness
Happiness
Surprise
Contempt

Macroexpressions: 1/2 - 4 seconds
Microexpressions: involuntary, less than 1/2 second

Describing emotional states with precision and granularity is a great advantage for designers

What Can We Do

Vote
Speak up
Support others
Share good examples
Start your own company
Practice empathy
Everyone is a designer

What Designers Can Do

Work where you're needed
Learn to raise your voice
Take a stand

Be a Great Designer

Be a world-class communicator
Use the user-centered design methodology
- Understanding Your Users - Kathy Baxter and Catherine Courage
- User-Centered Design Stories - Carol Righi and Janice James
Use data as ammunition
Keep a student's mindset
Teach and mentor others
Polish your process
1. Understanding the problem (collecting user research, requirements from stakeholders, relevant data, etc.)
2. Exploring concepts (sketching, making wireframes and prototypes, etc.)
3. Building (UI, code, style guides, etc.)
4. Validating and Analyzing (more user research, understanding data and iterating)
5. The Design Process - Karl Aspelund
6. Design with Intent - Dan Lockton
Take your time
Be engaged
Take a step back
Branch out
Contribute
Ask who is losing and who is winning

As written above, these are just my notes for this title. I encourage you to read a copy of your own for further insight into the text.

I'm looking for a design job

Carmen Wright — Sat, 23 May 2020 17:39:52 +0000

Hello folks!

I'm Carmen Wright and I'm actively job hunting at the moment.

My ideal role includes user experience and inclusive design for the web. I love to create wireframes and prototypes. I'm a fan of working with Figma, but have used InVision in the past.

I have a working knowledge of HTML/CSS, responsive web development, and visual design (improving those skills at the moment).

I've dabbled in JavaScript, Python, Ruby, and PHP. Yes, that's a lot of dabbling, but I like to dip my brain into new technologies.

🚫 I'm not looking for a UX Researcher or Front-End Developer role.

📍 Las Vegas or Remote (especially ones that plan to stay remove post-COVID 19)

My portfolio can be found at my website.

*This would be my first formal design role, but I would be thrilled to work and learn from your company.

Squarespace vs. Webflow

Carmen Wright — Tue, 19 May 2020 01:43:14 +0000

If you're a Squarespace 7.0 user, you know there are downsides to using it. You're completely dependent on their templates (or others if you want to buy them) and need to use Spacer Blocks to create a grid.

If you want to use CSS to help your design around, then you have to have a business account. A lot of tutorials around are built by businesspeople who have purchased the business account. However, I noticed lately that I have those CSS capabilities without a business account, so I think this changed once 7.1 became available.

Squarespace 7.1

So what's Squarespace 7.1? It's their newest version of their website builder and it's really cool.

The #1 reason to try out 7.1 is the lack of template dependance. With 7.0 you were required to start with a template or a blank slate. With 7.1 you can start with a template and customize sections to your heart's content. You could start with one template and end up with something not even resembling what you started with.

This sounds amazing, right? I completely understand. I was entranced by 7.1 and all that it had to offer. I was ready to rebuild my site with the access to new sections, but then I did my research.

It's not possible to transfer your content from your 7.0 site to your newly built 7.1.

All right, fine. You can transfer the content yourself. This isn't too bad if you have the time or you can easily re-create what you have.

screech halt

What was that you may ask? That's your non-refund that's going to happen. If you can cancel your 7.0 site and you still have time left on your plan, you won't receive a refund for the remaining time.
I'm starting to think Squarespace isn't worth it. Are there any other website builders that seem cool?

Thoughts on Webflow

Webflow is a newer website builder that I'm seeing more and more people on social media coming over to it.

Some weeks ago, I decided to jump on the bandwagon and check out Weflow. After playing with their site builder, I came to three conclusions.

Read the documentation first.

You can jump into the Designer and start working on your site, but it's daunting. It looks like the Photoshop interface which brings some familiarity to what you're creating. The Webflow documentation is the 101 Crash Course videos on their website. It's about two hours long and provides more tips and tricks than messing around in the Designer for that same amount of time.

It helps to know HTML & CSS.

Webflow uses CSS to manipulate elements so it's in your favor to know a parent element is going to affect its children. It truly feels like you're working through an HTML document to get your site working.

CMS is robust.

The CMS (Content Management System) is great for case studies if your Webflow site is a portfolio. You're able to build out one page and you can get the same pages done automatically. Case studies that follow the same structure would benefit from this. If you're not building a portfolio site, then the CMS works wonderfully for blogs.

Why I'm sticking with Squarespace

Yes, you read that right. In the meantime, I'm going to stick with Squarespace 7.0 for a number of reasons.

Big Learning Curve

Despite the 101 videos, I still had trouble with building a site. I had a self-imposed time limit (my Squarespace renewal date). I knew there wasn't a way for me to be able to gain enough knowledge to rule the world with Webflow, but I didn't have enough experience to recreate my site the way I wanted to. In this case, I already know Squarespace and without my deadline, I can work on building my Webflow skills.

Analytics

I don't want to lose my analytics. These are already saved on Squarespace and rebuilding those didn't seem like something I wanted to do at the moment. Transferring my content from 7.0 to 7.1 was a no-go and even transferring to Webflow didn't seem practical.

Has anyone made the switch from Squarespace to Webflow?

Takeaways: Austin Kleon's "Show Your Work!"

Carmen Wright — Wed, 30 Oct 2019 19:35:45 +0000

This post was originally written and posted on Medium on September 12, 2017.

I’ve been a fan of Austin Kleon’s for a while now after picking up a copy of Steal Like an Artist. However, it’s Show Your Work! that I absolutely adore and find myself returning to it again and again. I even included it in my list of 5 sources to alleviate the pressure of creativity block.

Show Your Work! acts an alternative to self-promotion and acts like the perfect sequel to Steal Like an Artist. The goal of the book is to show your work process which in turn will influence others by having them steal from you. While the book’s target audience are creatives, I found that there was a lot of crossover between artists and web designing and development.

These are some takeaways that I found to be beneficial and how it’s similar to the learning process:

1.) Good work isn’t created in a vacuum.

No matter how much we wished we could avoid the outside world and create/code our way into a finished product, it’s not going to happen. The idea that the lonely developer is cranking away at their laptop in a darkened room is an image that hasn’t been true for a while. Designers and developers come together through meetup events and hackathons. They each can’t bring a product to life without input and a good soundboard. We reach out across Stack Overflow and Twitter to help others and improve on a product.

2.) Show your process

I’m a fan of artists showing their progress and even more so when it comes to developers. It creates a connection between you and your audience and you never know when you can crowdsource a question or the next career path. Social media is slowly becoming second nature for tech people and filling our feeds with our most recent work is the best way.

3.) Small things, over time, can get big

Instead of focusing on months and years, days are the goal. Even at the beginning of a project, there is something to share and getting in the habit of sharing a daily item creates a habit. For developers, #100DaysOfCode is the perfect example of working a little bit a day and it creates a streak. I’ve found documenting what I do whenever I work helps with remembering my progress and even found the little notes I leave behind to be informative. I document the books I’ve read related to tech and the tech industry along with courses I’ve taken, especially if they were quick ones. Knowing what I’ve learned and seeing my progress months later helps whenever I think I’ve hit a plateau.

4.) Share your knowledge

One of the greatest things I’ve found about developing is how whenever someone has a question, there is always someone there with an answer.

The cycle of “learning and teaching” allows you to figure out the concept and how to explain it in such a way that’s easier than tech-filled jargon.

I’m fond of sharing reading lists since I sustain myself through books. Knowing that other people at the same level as you helps with imposter syndrome and the belief that you’re never going to get anywhere. You will get somewhere and sharing what you know helps build a community.

5.) Having a hobby helps

Spending hours at your computer designing and developing can grow tiring on the eyes. Picking up a hobby can get you away from the computer (hopefully) and exercise other parts of your brain. You’ll find that you’ll look at coding differently. I started learning Dutch several months ago and found that I was retaining information differently while language learning and I blame coding on that. I was able to create a structure and ways of thinking and comprehending Dutch grammar. I took a break from my job and coding for five days and it allowed me to step back and set my priorities in order. It allowed for me to realize what I wanted out of coding and where I was going from there.

These are small takeaways from Austin Kleon’s book. I highly recommend reading it in its entirety because you’ll find yourself coming back to it again and again.

Austin Kleon’s Show Your Work! can found on his website.

3 Go-to Beginning UX Books

Carmen Wright — Tue, 10 Sep 2019 21:55:12 +0000

My journey into studying user experience started almost four years ago (damn, time flies). I was studying web design with ambitions of sailing through HTML and CSS, building awesome projects in JavaScript, and getting a job where I would kick ass as a web designer.

That plan didn't pan out, but I did find a fascination with user experience. Before, I believed that there wasn't a particular rhyme or reason to how a site's design was built. I should have known better. How many times did I see sites with similar components? How many times did I refuse to use a site because of a horrific experience?

Now, I know better.

I analyze the user experiences of digital products and real-life applications (checkout lines are a personal favorite). Through the lists, classes, and articles I consumed, I came across the "essential" list of books to read. I read a few, skimmed through less, and have too many on my to-read list.

If you look up the UX books to read, you'll see Don Norman's The Design of Everyday Things, Jesse James Garrett's The Elements of User Experience, and Nir Eyal's Hooked. I wanted to create a list that helps the beginning UXer who wants a quick, but comprehensive read. I've seen these books on a few lists before and have recommended them whenever someone asks for a good UX intro.

UX for Beginners: 100 Short Lessons to Get You Started - Joel Marsh

This book was one of the first I read on user experience. I was confused by what UX was and found Marsh's explanations to be helpful. There were a few lessons where I was still confused, but I took that as "too much information to be condensed." I would recommend Marsh's book to those like me who had no idea what UX was but knew it sounded interesting.

Tragic Design: The True Impact of Bad Design and How to Fix It - Jonathan Shariat

This book looks like it should be read when you're farther along in your UX journey, but it isn't. Your goal as a UXer is to "do no harm" as Shariat opens this book. Starting your journey into UX with this mantra and this book's knowledge will prevent pain for your users and will help you identify pain points in existing projects.

The User Experience Team of One: A Research and Design Survival Guide - Leah Buley

I'm starting to see this book on more must-read lists and it makes me happy. This book works better as a freelancer but can be read as a beginner. Buley does a great job breaking down the variations of the UX process. I've gone back to this book multiple times when working on projects. When you're starting out seeking out a little more advice, pick up this wonderful work.

I know there are other UX books out there plus articles, videos, courses, etc.

What are other UX books who haven't seen on any/many lists?

Adding Treehouse Badges Widget to Site

Carmen Wright — Wed, 13 Feb 2019 07:22:49 +0000

I originally posted this article on April 21, 2017 on the Codette Club's Medium account

Ever since my local library provided access to Treehouse courses for free, I’ve jumped on it and haven’t let go. I love the structure of the courses and the badge you receive when you complete courses are the tangible proof that makes me excited about learning.

The downside of the Treehouse badge system is there is no clear way to display the achievements on a non-WordPress website. After searching for some time for a way to display them, I found Riley Hilliard’s Treehouse Widget. I loved the honeycomb effect of the badges and how he broke down the code so you can customize it however you want (yay for comments!).

The downside of this widget is no way to insert it into your site. I followed the instructions with the Report Card, but those didn’t work and I’m not a fan of the Report Card widget.

It took a few days and several changes to the code, but I finally figured it out. With some modification to make it better for mobile devices, you can have your own Treehouse badge widget in no time.

** Fork the original Treehouse widget on [CodePen](https://codepen.io/rileyhilliard/pen/BovGu).
**NOTE: I’ve tried to copy and paste into a new Pen, but it didn’t work.

Read through the code in the HTML, CSS, and JS panels. You’ll want to replace the username with the one that is connected to your Treehouse account.

Export the CodePen project or you can copy and paste directly from the project. If you choose to do this, you’ll need to create a new .js file.

Transfer the .js file to your project’s JS folder.

In the HTML, create a new .container div to hold your new widget code. Paste the widget code int that div.

For my code, I called the div .row because I was working in Bootstrap and needed to add a .row anyway.

Copy and paste the CSS code into your main CSS file.

Add JS script link to bottom of HTML right before you close the tag.

At this point, the JS file should have linked.

I tried to add the JS script in the

and before all the other JS script. It didn’t work. Since my knowledge of JavaScript is still limited, I’m putting this step here in case another newbie comes across this.

All that remains is modifying the CSS to make sure the code appears spaced out for mobile devices. When modifying the CSS, I found the mobile size not as uniform as the desktop version.

I modified a bit and found I still didn’t like it. I stuck the original code back in and figured it looked wonky because of the number of badges I have I’ll try it again when I have more.

I want to give a big thank you to Riley Hilliard for building the Treehouse widget in the first place.