Making Better Decks

[vc_row][vc_column width="1/1"][vc_single_image media="798" media_width_percent="100"][vc_column_text text_lead="yes"]

Overview:

This is an exploration blog feature for Tumblr. The ability to filter your dashboard by the “Blog Lists” you created instead of receiving a timeline of posts, you'll get favorite blogs or content you want.

Check out the "Blog List" Feature Prototyped: 

[/vc_column_text][vc_row_inner][vc_column_inner width="1/2"][vc_column_text]Problem:

Users have to “dig” through their dashboard to find the content they want. Difficult to find friends or top bloggers you love. Difficult to remember names of users

[/vc_column_text][/vc_column_inner][vc_column_inner width="1/2"][vc_column_text]

Solution

Implement a “Blog Lists” feature to help the user find content quicker of bloggers they love.

Inspiration: Twitter Lists + Youtube

[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_column_text text_lead="yes"]

Why do I care about Tumblr?

So let’s skip to 3 years later to 2010, when I met a friend after a dance performance. I was hooked onto Tumblr as a curious social media addict wanting to following a specific person. Little did I know I’d be part of the Tumblr community and a Tumblr addict within weeks. My 4th year anniversary was in May of this year (Tumblr told me!), I have 13,000+ likes, 4,000 posts, 300 followers, and following 790 blogs.

Tumblr has always been dear to my heart, I’m friends with people whom I’ve never met in real life. I have the steady 5-10 blogs I will check on weekly, My data plan hates me as I’m spent on public transit scrolling through the endless posts from my 700+ blogs I follow, and I remember when it was finals week and my best friend & I just sat across from each other in the campus library giggling at puns all night.

The demographics of Tumblr for those that are curious and keep asking “Who even uses Tumblr? Why not just facebook?”

[/vc_column_text][vc_separator sep_color="color-uydo"][vc_custom_heading]Design Process[/vc_custom_heading][vc_column_text]

1. Persona
2. Design Stories
3. Task Flow
4. UI Sketches
5. Wireframes
6. Prototype

[/vc_column_text][vc_separator sep_color="color-uydo"][/vc_column][/vc_row][vc_row][vc_column width="1/1"][vc_column_text]

1. Provisional Persona of Sarah

My first step is to create a persona. Sarah is an ideal user.

[/vc_column_text][vc_single_image media="804" media_width_percent="100"][vc_column_text]I love my followers, but them cramped into one dashboard system is inefficient when I want to see are my top favorite 10 blogs. Friends have told me they don’t use Tumblr as much anymore because the dashboard was filled with content they weren’t interested in.

My persona “Sarah” could find her favorite followers, her friends, her social work blogs, or her photography blogs to find inspiration, with a lists function similar to Twitter. The ability to share these lists could prove to be helpful to send to colleagues and social media.

Example of my process board of doing some various options…which didn’t work out. I tried asking current Tumblr users through social media what feature would they want and why. The reason being because we’re a little selfish and we have our own interests. It varies how much you use Tumblr and for what.[/vc_column_text][vc_row_inner][vc_column_inner width="1/2"][vc_single_image media="805" media_width_percent="100"][/vc_column_inner][vc_column_inner width="1/2"][vc_single_image media="809" media_width_percent="100"][/vc_column_inner][/vc_row_inner][vc_column_text]

2. Design Stories

With Blog Lists feature Sarah can…

Filter dashboard for specific content
Favorite blogs to Blog Lists

• Create a new blog list
• Edit name of a blog list
• Archive a blog list to remove from main lists
• Share a blog list with bloggers publicly
• Copy link to page to send blog list to other usernames
• Filter posts with a list
• Search for a specific blogger
• Choose a curated list for the content
• View how many blogs are in one list
• Favorite blogs to add them to a created list
• Favorite the blog after viewing profile

[/vc_column_text][vc_column_text]

3. Task Flow

1st iteration of a task flow[/vc_column_text][vc_single_image media="817" media_lightbox="yes" media_width_percent="100"][vc_column_text]After this first screen, I was ready to add another direction a typical user would go. The goal is to not only add or remove in a blog list, but to overall be able to filter your dashboard posts with the lists you created. In doing one specific route at a time, it helped be able to finalize and more clarity to what wireframes and screens are most important to focus on.

2nd iteration with more details[/vc_column_text][vc_single_image media="818" media_lightbox="yes" media_width_percent="100"][vc_column_text]

4. UI Screens

Gave me options to consider how I’d implement this feature. There’s a lot of different ways a user can go about it, but after studying the UI of Tumblr, it made sense to incorporate it into the same place as where “Followings people” page and “People you know” is. There’s also a small limited space in the dashboard, so putting it under the multimedia tab would be easy for the user to see.[/vc_column_text][vc_gallery el_id="gallery-147646" medias="824,825,826,827" gutter_size="3" screen_lg="1000" screen_md="600" screen_sm="480" single_overlay_opacity="50" single_padding="2"][vc_column_text]

5. Wireframes

Created wireframes of the route of how a user would filter the dashboard with blog lists. Wireframes helped figure out the structure of the frames and allowed me for quick iterations and moving the pieces around to finalize. It only highlights one route a user could take, which was the more complicated way, so I thought it would be a good way to illustrate.

Blog list allows user (for users with curated blog lists already) to:

• Select one blogs
• Select multiple blogs
• Select all blogs
• Unselect blogs
• Create a new list
• Filter Dashboard

[/vc_column_text][vc_single_image media="829" media_lightbox="yes" media_width_percent="100"][vc_column_text]

6. Prototype

With the prototype complete, I wanted to be able to know these things:

How is the flow? Is it intuitive on the blog list page? Does the filter dashboard idea make sense?

To do the prototype and next steps of usability testing. I focused on the task flow and wireframe of 3 tasks.

1. Enter dashboard (of user profile)
2. Blog list page
   1. Task: Create a Blog List
   2. Task: Add/Remove blogs to list
3. Dashboard (filter posts w/ list created)
   1. Task: Filter your dashboard with a list just created

1st Iteration Prototype: 

tumblr1 from t sripunvoraskul on Vimeo.[/vc_column_text][vc_column_text]Feedback:

User 1: didnt know where to go to add people to blog list. Needs next step in the filter post. Blog page was intuitive and easy to know how to add a user and create a new list.

User 2: Feels process was a little complicated, should simply go to page/profile and favorite or add to..(like youtube) I did sketch out alternatives of a user going through and adding a blog. I should definitely go back to show what other alternatives look like. Not sure about filter dashboard with posts (User only has 79 followers)

After User 2’s feedback, made me think about the “Favorite” aspect being a better interaction than “add to blog list” which would play into user’s profiles well. Having both filter posts inside blog lists came into consideration, but it would break the habit of a daily user of primarily using their dashboard to find content. Forcing the user to look at posts in the Blog Lists section wouldn't be ideal.

Before: Had it to where the user would click on profile settings to find
After: Turned into “Favorite” and adding the new button by follow button

[/vc_column_text][vc_column_text]2nd iteration Prototype

1. Enter dashboard (of user profile)
2. Blog list page
   1. Task: Create a Blog List
   2. Task: Add/Remove blogs to list
3. Dashboard (filter posts w/ list created)
   1. Task: Filter your dashboard with list just created
   2. Task:Favorite a profile by visiting their blog

[/vc_column_text][vc_column_text]

Summary

Keeping it at a lower fidelity than my usual design job helped me move quickly to get some feedback and to be able to quickly switch out elements or fix small details I had missed that could easily confuse a user. I was kind of all over the place, but doing one direction at a time and writing down the ui flow made sure I wouldn’t stray from the task. It was a long process and many sketches were thrown out, however I’m pretty stoked and satisfied with the outcome. Small breakthroughs came while I was in the prototype stage like when I wanted to go back and select all blogs, how would I show that? I wouldn’t want the user to have to uncheck all the boxes, so a easy “Back to all blogs/Show all blogs” is a simple fix. Going into prototype flushed out the details of the Blog Lists more. It greatly affected the task flows and design stories because previous versions didn’t include the more specifics.

Frustrations came more so during the prototyping part because I used keynote so I could share via icloud. Only to find out Apple isn’t allowing icloud share until Yosemite OS is upgraded. The next steps would be to test it again and do more small detail screens for a user to click through with Invision. Getting feedback beforehand helped do a small shift in how a user would save a blog on a profile page. Wish I had done it earlier, however better late than never!

Note: I’m not affiliated with the Tumblr (although I wish!). I love Tumblr and wish the best for future Tumblr interactions. 

Some vector icons in prototype by Freepik from www.flaticon.com is licensed by CC BY 3.0[/vc_column_text][/vc_column][/vc_row]

[vc_row][vc_column width="1/3"][vc_single_image media="746" media_width_percent="100"][/vc_column][vc_column width="2/3"][vc_column_text]

“You’re a designer, you can draw, right?”

Only if you want sloppy uneven lines and disproportional surfaces. I can draw, but that doesn’t mean it looks good. I’ve never been a sketcher in my life. When I was five, I had one of those cute whiteboard easels for children, allowing my inner artist to freeflow with weird creativity drawings, but when I started using the white walls of the living room as a whiteboard, it was taken away and thrown in the back of a closet, forgotten with the collected dust.

In high school, I picked up my dad’s Nikon film camera and found it easier to “draw” pictures with (not counting the film process).
As years progressed and camera technology got better over time, my trade as a photographer shifted to an editorial photojournalist in college. As a photographer, my first instinct was to unzip my bag and pull out my DSLR or camera phone to capture the reality of what I found intriguing. In addition to studying graphic design, I thought drawing classes would’ve helped my ability to do illustrative design work, however I couldn’t find any value in doing realistic drawings of nude models with charcoal sticks.

Two weeks ago, I took on a challenge to step up my sketching A-game. For three days, I spent hours sketching minute details and sceneries of San Francisco day and night. My goal was to reach 100 sketches using 4x6 index cards. As I journey into furthering my UX skills, it‘s important as a designer and photographer to be able to document inspiration from our daily observations.

[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column width="2/3"][vc_column_text]My toolkit for this exercise: 100 4x6 index cards sketches in 3 days using 1 black thin pen, 1 sharpie, and 1 black 40% grey marker. Each sketch was 5–7 minutes long.

[/vc_column_text][vc_column_text css_animation="alpha-anim" animation_delay="400"]

Observe yourself. Observe others. As the famous baseball player
Yogi Berra said, “You can observe a lot by watching.” Problem is,
you have to know how to watch.
— Don Norman, “The Design of Everyday Things” (2002)

[/vc_column_text][/vc_column][vc_column width="1/3"][vc_single_image media="722" media_width_percent="100"][/vc_column][/vc_row][vc_row][vc_column width="1/1"][vc_column_text]

4 Learnings I Drew From Sketching

With intentions to reach 100 sketches in 3 days, I rounded to 70 sketches total, but what I left with were parallels I found in my past photography and design experience. Sketching allowed explorations to unfold with emphasis on observational and problem solving skills. I’m hoping these connections will remind me to be keen and observant while moving forward to being a better designer.

What can I learn from sketching? Below are learnings I found. As a fellow creative, hopefully this inspires you to join the sketching movement.

[/vc_column_text][vc_gallery el_id="gallery-484814" type="carousel" medias="723,725,727" carousel_lg="3" carousel_md="3" carousel_sm="1" gutter_size="3" carousel_interval="3000" carousel_navspeed="400" stage_padding="0" single_overlay_opacity="50" single_padding="2"][/vc_column][/vc_row][vc_row][vc_column width="1/3"][vc_single_image media="728" media_width_percent="100"][/vc_column][vc_column width="2/3"][vc_column_text]

1. Assess the big picture first

Which marker did I need to use and why? Depending on what I was sketching, I heavily used the 1 black thin pen as the primary. However, sometimes I started with the 40% grey marker for sketches with large shadowed spaces over the thin black pen. It proved not drawing the correct outline made the process quicker and the lines cleaner by drawing in the outlines of the object later. As I was sketching, I noticed after the 40th one, I knew when to grab the 40% grey marker over the black pen based on my scope of the overall scenario.

Before any problem, we always have to address the bigger picture first to figure out the best approach. Should I jump into Sketch or Photoshop? or do I try usability studies over user interviews? or is it taking the photo of the scene at a wide angle or zoomed in?

We each approach a problem differently. However, the more practice you’ve done, the quicker you can make the assessment. If you were new in a giant mountainous forest with multiple trails to choose from, you would be a lost squirrel. After you’ve been to that giant mountainous forest your 9th time, you would know which trails to take based on the elevation, difficulty of the hike, or distance. After deciding the trail, your next step would be to know how much X amount of water to take, with X shoes to wear, with X gear to carry.

[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column width="1/3"][vc_single_image media="738" media_width_percent="100"][/vc_column][vc_column width="2/3"][vc_column_text]2. Observations can lead to incredible discoveries and opportunities

My typical commute along Embarcadero is better than most people on work days. I can’t complain my 10-minute bike ride along blue bay waters is boring.

Surprisingly, I had never seen the sunrise along Embarcadero before. On my third day, I woke up early at 6 a.m. to sketch. I figured 40 mins of walking to work would end up being 1 hour if I stopped and sketched on the way. If I hadn’t stopped at some of the points on this route, I would’ve missed interesting findings. When I was sketching Oakland across the bay, I found a random sharpie drawing of a cartoon character on a pole. Sketched it, then got entranced by the sunrise for 20 minutes. My sketching commute ended up being 3 hours long.

Till this day, I still remember my first ever 7 a.m. sunrise commute with my newly five sketches in mind. The same route can still present a new perspective. You might consider your current direction mundane, but take a moment to hit pause and reflect. Serendipity could be around the corner.[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column width="1/3"][vc_single_image media="740" media_width_percent="100"][vc_single_image media="739" media_width_percent="100"][/vc_column][vc_column width="2/3"][vc_column_text]3. Spending time with the subject makes an impact

When strolling one night in San Francisco, I noticed this guy with pink polka-dotted luggage and a black trash bag standing by a bank. In the same position for what felt more than 10 minutes while I was sketching him, he didn’t flinch once. If passing by him, you would’ve guessed he was drinking water or digging the trash can for scraps leftover. If you stepped to just the other side of him, you could’ve missed what he was really doing. Breathing into a portable oxygen bottle. At least, it’s what it looks like.

If I hadn’t taken the time to sketch him, I would’ve missed this interesting discovery about a typical guy found on the streets of San Francisco. Like how I said earlier, observations can lead to discoveries, but spending a considerate amount of time with a subject can break down any assumptions and pull out a better story.

In photography, we’re accustomed to shooting first, editing later. Those in the documentary field spend anywhere from hours to years at a time with a subject. Building the rapport can strengthen the relationship and trust between you and the subject. Not saying for sketching you have to spend a lot of time, but your sketches will turn out better.

Someone recently asked me how TIME magazine photographers do what they do. How can they approach subjects so easily? It’s not easy. You’ve got to be honest and transparent about what you’re doing. Take advice from Deanne Fitmaurice, a Pulitzer Prize-winning photojournalist, where she describes her bold moves and findings by observing baseball legend Barry Bonds with her camera.[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column width="1/3"][vc_single_image media="741" media_width_percent="100"][/vc_column][vc_column width="2/3"][vc_column_text]

4. Sketching is more memorable

People love sketches! It shows you took the 5–10 minutes to pay attention rather than taking seconds snapping a photo. With sketching, you’re more likely to prioritize which details you’re going to draw first right? Who stands out more and why? Below, I started with guy sitting in front of me and then moved to Jeff, the founder of Litterati, at the time. Later in the evening, I tweeted the photo of my sketch and was later featured on Litterati’s facebook.

[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column width="1/1"][vc_column_text]

Sketch more. Take photographs less.

Overall, there was a realization of remembering technology can make one miss the mix of nature’s finest and San Francisco’s cultural beauty. John Ruskin describes how if two people were to take the same lane, with one being a sketcher, you would get two completely depicted approaches. Of course, with the sketcher being the one with a more profound outlook.

But what will the sketcher see? His eye is accustomed to search into the cause of beauty, and penetrate the minutest parts of loveliness.
— John Ruskin

In only 3 days, I’m proud to say my sketching ability went from circle heads to real human-shaped heads after the 20th sketch. There’s a lot more definition in my drawings and my hand no longer shakes at drawing straight lines.

Lastly, The parallels found in simple sketching are learnings I’ve taken as part of my journey as a creative designer. Not to say I will completely stop taking photographs. I will still take photographs ever so often and will sketch on daily breaks. When I get super committed and pro at sketching, I’ll join the global urban sketchers movement. Until then, there’s a few more sketches found on my blog.

So, next time you’re out in your city, take a walk, observe, and sketch.

[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column width="1/1"][vc_gallery el_id="gallery-484814" medias="742,743,744" gutter_size="3" screen_lg="1000" screen_md="600" screen_sm="480" single_overlay_opacity="50" single_padding="2"][vc_column_text]

Read the original on Medium

[/vc_column_text][/vc_column][/vc_row]

Presentation Nov. 20, 2014

For Tradecraft UX 7, I did an intro lesson about why typography matters in setting tone, sales, websites, and more.

Slides:

Sum of the Parts is a speaker series held by Autodesk, where they invite innovative people to talk candidly about the hard problems they’ve faced and how they have succeeded. On November 11, “SOTP Flips the Stage” was led by Kate Rutter as the lead speaker followed by 10 other speakers telling design stories or projects. Guess what, I was one of them!

You’re welcome to check out my strange design journey. I was audience voted as best speaker.

Below are my slides.

From t sripunvoraskul on Vimeo.