How do we prepare someone to interact with a loved one who is going through depression?

I’m sure anyone reading this has at least one person in their life who has struggled with mental illness. Whether that be depression, anxiety, an eating disorder or any other, these issues take a toll not only the afflicted but also on their loved ones.

At trying times it can be difficult to open up about one’s darkest thoughts, they can be hard to describe and even harder to find help for.

Hack Mental Health is one of the largest hack events in the world to focus on mental health. This year it was hosted at UCSF with over 600+ attendees and over 60 submitted projects. Hack Mental Health covered a broad spectrum of mental issues, from practicing meditation to living with psychogenic pruritus, a form of chronic anxiety that causes one to constantly scratch themselves.

This past weekend, I was lucky enough to team up with a talented group of individuals I had never met before to brainstorm and prototype a possible solution to tackle depression in adolescent teens and college students.

Our Team of Six

• UX/UI Designer (myself)
• Product Designer (Belinda Huang)
• Dental Students (Rebecca Lerman & Karisa Yamamoto)*who were also working on a research project for depression in Dental students
• MD/PhD Student (Abrar Choudhury)
• Web Developer (Huan Ji)

Besides Karisa and Rebecca, who are classmates, the six of us all came together by happenstance. During our team formation, the six of us shared stories about how we came to the event and what interests we had in mental health.

As we shared stories, a common experience began to reveal itself. All of us had a close friend or a romantic partner deal with a serious mental health issue. A common issue we all dealt with was wanting to communicate with our loved ones but not knowing how to do so or what to say. Because of this common theme we took the unique approach of helping the friend of the person in distress. We also decided to narrow our scope towards the ailment of depression.

The question then became — How do we prepare someone to interact with a loved one who is going through depression?

Through multiple discussions and solo ideation sessions, we were able to come up with some sketches of an idea. After getting the user journey nailed down we showed digital mocks to some of the surrounding groups who were also busy hacking away. Many of their suggestions, such as grouping most of our help documentation into one section, sharpened the core experience of our app.

Core features of the app

Knowledge and Resources

A Wikipedia of sorts to learn more about mental health issues: its history, effects, and treatments. In addition, it included a library of links to hotlines, therapists and places to find certified help.

Communications Guides

Research backed Interpersonal Psychotherapy (IPT) and Cognitive Behavioral Therapy (CBT) techniques to use in conversation with someone going through depression. The communication guides and techniques listed within them are not meant to train a layperson to become a therapist but rather to use proven methods to guide discussions in more productive directions.

My People

Where a user is able to track the history of their friend’s issue through journaling. These notes are a way for a friend to decompress after tough conversations and be able to share them with other supporting parties. In this section we also built out a reminder feature which would text an individual on a given date to check up on their friends, hopefully promoting consistent feedback and support for those in need.

We had our final designs done by around 10PM Saturday when we handed them over to our single developer, Huan. Huan voraciously coded all night with zero sleep in order to get us a working prototype to show Sunday. By deadline we had half the app done in code, and the other half presentable as a clickable prototype, as well as a couple of slides to add to our presentation. Continually tweaking till the last second, we rehearsed our story and refined our visuals. You could feel the frenetic energy in the entire hall as groups crammed to put the final touches on their projects.

A Winner!

After all was said and done we were fairly happy with our product. Our team came up with a cohesive solution to a very specific problem sector. In fact, we were one of two teams selected from the 33 submissions to win the HopeLab Sponsor Challenge, which was geared towards “hacking a solution to address social isolation in young people.”

Next Steps

To further develop this product we would probably have to go back and do a bit more user research. We need to interview and survey more teens and college kids going through a mental illness. Although we came up with some resources we haven’t refined their effectiveness.

We would also like to develop our content to be more interactive and impactful. Perhaps adding video or audio to our communication guides would be a more effective learning tool. We also thought about adding a social component to the app where multiple people could coordinate their efforts on a singular loved one.

Summary

Hack Mental Health was a great way to challenge ourselves, work as a team, and build something that might actually one day help many of our friends and family. I’d like to thank Stephen Cognetta and the amazing team of volunteers for organizing the event. Truly a first-class hackathon in terms of resources, venue, and organization. There was a great mix of speakers, access to resources in the mental health space, as well as interesting activities involving mental fitness and well being.

I’d also like to thank every one of our amazing team members for the effort they displayed this weekend. The support our team gave to each other throughout the weekend was single most important factor to our success. Whether it was not being overly territorial over tasks or an idea, to bringing our one coder a taco during breakfast while he debugged, it was truly was a unified effort.

One more special thanks to Dr. Rebecca Klein, a resident in adult psychiatry at New York Presbyterian/Columbia. Rebecca gave us almost an hour of her time over the span of the hackathon offering her knowledge and experience as a psychiatrist. Her insights and understanding of the field were critical in guiding us away from possibly unoriginal solutions as well as sharpening the one we eventually built.

What I love about hackathons is the adrenaline rush of being creative with a diverse group of individuals. What makes for a great hackathon is passionate and talented people working in coordinated and cooperative efforts. If this project continues, I’ll be sure to add to this post in the future.

Thanks for reading! I hope this piece encourages all readers to go out, meet strangers, and build something positive for the world!

The contest was to design a few different UIs using XD with a chance to win various prizes. So I jumped on Lynda, took their 2–3 hour crash course, watched a whole bunch of Youtube vids, and decided to give it a shot. Here are the two entries I was able to come up with.

All Posts

So after around 35 hours of total investment into XD what did I think? Well…

Adobe XD is fast, blazingly fast in terms of performance

Sometimes with a big project in Sketch, even moving rectangles around is a chore for my Macbook Pro. I’ll often get the spinning beach ball of death if I have a lot of layers, especially with images. But in XD I never felt that lag when designing. Even having multiple projects open with tons of nested symbols I never felt the drag of the program on my computer. Cheers to the backend engineers on Adobe XD team!

Native prototyping is awesome, albeit not that complex

Linking art boards together and creating simple slide animations is simple and intuitive. And to have it right there in the app, without having to use a plugin or open another program like Principle, Marvel, Framer, InVision, etc is a blessing. You’re not gonna be able to show off more complicated interactions, but stringing art boards together, connecting buttons to screens — that can get you pretty far when presenting an idea.

Sharing your design with others is a breeze

I love how easy it is once I create a prototype that Adobe creates and hosts my design with a few clicks. No more logging into Invision, importing screens, drawing boxes for buttons, etc. It’s way easier in XD. Once you’ve connected your art boards, send your prototype with a simple hyperlink and see the comments fly in.

Intuitive and visual repeat tool

Yes, sketch has its own repeat tool(grid) but that requires a little bit of math and trial and error. XD’s repeat feature is a bit more fluid in the way you can drag to increase or decrease spacing between elements.

So it seems like XD’s pretty great, time to switch?

Not so fast… here are some of the negatives I experienced.

Identifying elements in the layers panel is a pain in the @ss

Look at the difference in contrast in the layers panel.

Numerous times when I was renaming a layer, or placing one above another, I had to squint and rub my nose against the monitor to see which layer was selected.

No keyboard shortcut for renaming layers!

XD “designing at the speed of thought” … not if I have to double click every single element in order to keep my file neat, labeled and organized! XD uses (command + R) for their repeat tool instead.

Weak photo editing ability

I know I know… that’s what Photoshop is for. But XD could at least give you a cropping tool. Yes, I know you can just create a mask but that method requires more user actions. Same for applying a gradient on a photo. In Sketch it’s right there in the options menu, in XD you have to create another shape, specify the gradient, then place it exactly on top of the photo.

No “Right click — select layer”

In a project you may have multiple layers stacked on top of each other. It may be a text, in a button, on top of a background, with a mask all on the same pixel. So being able to click on the same pixel and select each of the four layers is critical.

Weaker Export Options

Sketch gives you much more flexibility when deciding how you want your art boards & elements exported. It takes fewer clicks to create a pdf and png. Also you can add a personal tag to each of your different types of documents. In addition you can export at pinpoint percentages which comes in handy when you want to scale an image or file 2x or .5x etc.

Submit your Adobe XD Feature Request: https://adobexd.uservoice.com/

Summary

Although XD is improving, it’s still missing some features power users would want. Yes it’s fast and light weight but the negatives mentioned above drastically lowered my productivity.

• Sketch hasn’t stood stagnant, they are constantly improving and adding to their product. Sketch 49 just brought us native Prototyping! Yes, Adobe has massive resources behind their team, but never underestimate a front runner who’s listening to their users.
• Sketch has a HUGE head start with their plugin community. For the same reason WordPress is so commonly used, having a community filling in all the functionality gaps to your product makes for a very robust tool. If Sketch is missing a feature you want there’s a good chance someone out there has built a delightful new feature that will make you squirm with joy.

So if you’re a Windows user and want to create UI’s, XD would be a fine fit. If you’re a Adobe Cloud subscriber and thinking of adding UI to your skill set, XD can take your fairly far.

But for the native Sketch user, there’s no compelling reason to invest time learning XD based on my user experience.

What do you think? Have you used XD and Sketch? How did you like it? Let me know below.

NOTE: I’m currently looking for more project/work in the Bay Area! If you know of any projects hit me up. [ jordan@jfongs.com ]

Is Adobe XD worth investing time into as a Sketch User? was originally published in Jordan Fong UX Design.2 on Medium, where people are continuing the conversation by highlighting and responding to this story.

That being said here’s an amalgamation of different tips I’ve found through various sources.

1. Setting up your environment

Having a fertile environment is paramount to harvesting good efforts, ask any farmer. Most of the work we do as designers comes from the mind but if we are to extract those creative juices from that resource hogger we call a brain, then it’s best to set the stage right.

SPACE. A clean work area. It helps if all your possessions are in the right place. This means papers stacked, clothes in the closets, dishes cleaned.

BODY. Similar to putting a movie on for the kids, you want those primal bodily cravings at least somewhat satisfied before trying to get your mind into work mode. Eat something light or have a snack nearby that you can munch on and a beverage to satiate your thirst. Empty your bladder and bowels, brush your teeth, wash your face. Do 3 minutes of stretching.

MIND. For the mind the most important thing is that you feel comfortable setting aside this amount of time to get into the zone. You have accepted that this time is for work there’s not something else in your life that more important than the task at hand. If your mind is chattering, you can do 10 minutes of meditation or free write to empty out your mind.

SOUND. Set the mood. How are we expected to dance when there’s no music playing? For me, I usually play music without lyrics. I find that music with lyrics can often trigger memories or emotions from the past. We’re trying to stay in the now. Silence is also works for some people but I find that the rhythm of a beat keeps me moving forward and helps to regulate my mood.

2. Protect your environment from distraction

Turn off social media. And make sure you don’t have to respond to any messages in this time period. Phone on silent. Mail app hopefully closed for the next chunk of time. The best thing is to close your web browser, but if it must be open be sure to use a website blocking extension (ex: blocksite) for those annoying temptations to browse.

However all this being said, sometimes you can’t wait for your environment to be perfect. Time is a wastin’ and if you procrastinate every time conditions aren’t ideal you’ll never accomplish anything.

3. Time box & map out your goals

Figure out how much time you can allot for this concentrated period of work. List out 1 to 3 things you want to work on in this time and ONLY work on those 1 to 3 things.

Create a schedule of how your going to work through them.

• 5 minutes to outline
• 25 minutes to write
• 15 min to edit
• 15 minutes for feedback
• 15 minutes to revise and fine tune

Then actually visualize yourself going through your schedule, accomplishing each item one after another. Also take 15 seconds to visualize how you’ve previously accomplished similar tasks before. Remember how you felt when you were really making progress. This will psych yourself up with the confidence to attack the problems you’re about to face.

4. Start

Produce work, it doesn’t even have to be great in the beginning, the main thing is to create momentum of movement. Whether it’s typing, sketching, drawing or coding, sending out requests, just keep those hands in motion. Focus on producing more and more, ignore perfection. As you continue to work your mind will consciously start to sharpen and eliminate inefficiencies.

5. Pace yourself

Keep working and if you start to hit a road block. Go back a few steps and review what you’ve just done. Reread something you’ve wrote or touch up a drawing that wasn’t quite right. You don’t always have to attack the hardest part of the problem. Sometimes going back and getting easy wins will help you maintain your focus and boost your confidence. Let your subconscious start to take over.

6. Take breaks when needed

When faced with overwhelming resistance take a break. When inspiration is not hitting and all efforts seem to hit a dead end, get up and reset yourself.

• Maybe you’ve been siting too long and you need to take a walk.
• Maybe there’s a suspicion that you’ve received an really important email or message in the last hour and you’re dying to check.
• Maybe you need to take your dog out.
• Or maybe your snacks have run out and your hunger is started to kick in.

Whatever it is that’s nagging you, address it quickly but don’t get involved in it.

7. Back to work

Hopefully while you were taking a break you mind was still churring in work mode, like a bicycle that still coasts for awhile after you’ve stopped pumping, your mind still moves forward without you consciously addressing it. When you feel like you’ve satiated whatever was bothering you from before direct your attention back towards the work and start again.

Remember — not perfection, just forward action

8. Repetition

Once you’ve set up your own work routine, refine and repeat. The more you practice this routine the faster you’ll be able to get into the zone and the longer you’ll be able to maintain it. It just takes practice to be good at being productive. Don’t despair if you’ve suffered set backs of days or months of being lazy and distracted. It doesn’t come easy, you have to work at it. If you haven’t done it in awhile you’re going struggle in the beginning. Getting in the zone becomes easier each time you practice it.

Consistency leads to mastery

Helpful reads:

• The One Thing… — Gary Keller
• The Art of Learning… — Josh Waitzkin

What do you think? How do you get into your most productive zone? Leave your comments below.

How to Get into the Zone was originally published in Jordan Fong UX Design.2 on Medium, where people are continuing the conversation by highlighting and responding to this story.