Published on <a href="https://blog.prototypr.io/ux-academy-journey-week-6-card-sorting-and-sitemaps-and-user-flows-oh-my-51b223493797?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Thea Chard <img alt="" src="https://cdn-images-1.medium.com/max/1024/0*pFa9Z9EaoJFfifBX.gif">Wait, what actually IS a sitemap anyway? (Illustration by <a href="http://trydesignlab.com/andrew_wilshere/">Andrew Wilshere</a>)
<h3>Hey there, design reader!</h3>
Me, me again. Chronicling week six of my <a href="http://trydesignlab.com/blog/category/uxa-journey/">UX Academy Journey</a> as a student in Designlab’s UX Academy, Weingart cohort. In the interest of time, let’s get right to it:
Remember last week, when I called the battle of the <a href="https://blog.prototypr.io/ux-academy-journey-week-5-research-an-origin-story-and-the-mother-of-effective-design-a0520e690ff6">big bad schedule boss</a> in my favor? Ha, ha.
Ha.
<img alt="" src="https://cdn-images-1.medium.com/max/200/0*9d16WipxDhubTNBP.gif">I just couldn’t help myself
And that’s all I will say about that. Week seven is here, and I can feel the pace accelerating again. There is no time for spending nearly all day on a two-hour project (something I did twice this past week), and there’s certainly no time for one of my long and contemplative musings.
I will be lean journaling here in the hopes that some of that lean will rub off on my UX skills. I am now actively training for this marathon (preferably before this side-ache takes me out). Think of it as a macro post — a kind of chronological empathy map meets task flow of me as user in bite-size thoughts, feeling, wants, needs, and of course, pains and gains as I go about the coursework for the week… probably captured on multi-colored sticky notes plastered all over my desk. And nightstand. And kitchen. And the front door.
(The inside part).
At the Start of Week Six…
I’m nearly caught up and feeling confident finishing up Module 4 (covering information architecture, usability, and navigation and search — aka, structural organization decisions and mapping). Next up was Interaction Design, where things will really get jamming!
<h3>Information Architecture &amp; Usability</h3>
It sounds more confusing than probably it is, but it’s certainly essential and shouldn’t demand too much excess design time for the projects, which is always rife with rabbit holes. But after thinking through a <a href="https://cl.ly/1E1X080g2O2N">personal content strategy</a>, and delving into the responsibilities and expectations of usability, the stakes slowly crawl just a little bit higher.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/0*9KzAvXccfe0PjvZN.jpg">You know when you fall in love with a product, and use it so much your family and friends are actively worried? And then support drops? I know, right…
The biggest takeaway: IA and usability have huge influence over the proliferation of a product — when done well they can make an experience easy and intuitive, and when done not so well they can really break the whole experience down by gunking it up with an overly involved and problematic navigation and loopholed UI.
And, as per the usual, the frame of reference is always what does the user need? What will make this process easier and more pleasurable for them — aka me (in this here journal), and you, my fellow newbie/soon-to-be newbie UX-ers out there.
<h3>Navigation &amp; Search</h3>
Card sorting! This is a fun little lean psychological experiment! I would have loved to be able to conduct these in person on actual cards and observe the participants as they talk through their process, but alas, there just wasn’t time for that. Lean! Lean!
<img alt="" src="https://cdn-images-1.medium.com/max/1024/0*1Efs1xGzNqJPCNP-.jpg">Hello, data!
And then, ye <a href="https://theuxreview.co.uk/sitemaps-the-beginners-guide/">good old sitemap</a>. It seems straightforward enough. But how to structure it? How in depth do I go? And most importantly, what tool should I use to create it? No, seriously, what tool? I don’t want to go clicking around in Sketch dragging rectangles and lines and arrows every time I want to reorder things just a nudge. There must be a better way.
Oh, there are hundreds of ways?!
I start at 8am, hoping to finish by 10:30am (padding for distractions while the coffee works its way into my system). I scour Slack for suggestions on the fastest and most flexible way to create sitemaps. I peruse examples. I sign up for half a dozen free or limited accounts for web-based tools and jump between them. The flow feature in <a href="https://app.flowmapp.com/">FlowMapp</a>, ironically, is not available yet. <a href="https://sitemap.mockflow.com/">MockFlow</a> hides color customization behind a paywall. <a href="https://realtimeboard.com/">RealtimeBoard</a> is pretty cool, but by this point I’m tired. I create four or five sitemaps, two-thirds of the way each, and finally settle on <a href="https://www.draw.io/">draw.io</a>, which seems simple.
And this sitemap — with a dash of user flow — takes me, more or less, all day.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/0*Edt2bYDE4cvf4tkK.png">Seriously, not two hours — all day
Am I supposed to be using all the categories from the card sort? I’m I laying out pages or flows? What, actually, is this deliverable supposed to look like? Every single example is different. I’m starting to feel like a kid playing with mismatched Legos that I just can’t seem to make fit.
By the end I have even less of an idea of what I’m doing than when I started. And after all that, there wasn’t even time for colorful categories, so the whole thing feels drab and a bit discouraging — and I’m entirely unsure at what point my sitemap will officially cross the line into user flow.
<h3>The Group Crit — An Empathy Experience (IRL)</h3>
I am encouraged to hear that other UXA students at various stages either currently are or frequently have been totally baffled by process, struggling to steer clear of design cul de sacs.
<a href="http://trydesignlab.com/profile/hellojoanna/">Joanna Liu</a>, a full-time student in the newest Xu Wei cohort, shares three sitemaps she made in the same tireless attempt to get it right that kept me trucking away for fives times as long as I needed to.
<img alt="" src="https://cdn-images-1.medium.com/max/976/0*m7GHw_5aZAcZUvy2.png">One!<img alt="" src="https://cdn-images-1.medium.com/max/976/0*TT40ICXFGORRvIOb.png">Two!<img alt="" src="https://cdn-images-1.medium.com/max/976/0*xxs1cj74Mk8lSri5.png">Three!
<h3>A Peek Into The Future</h3>
Moving on through Module 5: Interaction Design, I got a sneak peek into the KAUS insurance project I was currently working on fully formed and polished by another student, <a href="http://trydesignlab.com/profile/mgonz54/">Mike Gonzalez</a>. Mike, a full-time student from the Vignelli cohort, has just completed Phase 1 of UX Academy and is about to head into Phase 2 and three back-to-back rounds of capstone projects.
It was heartening to see work from someone who had not only selected the same project I had, but had a beautiful, working prototype and polished, professional case study to show for it.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/0*4me-dzET18xT7_MS.png">Mike’s Sitemap, made of a combination of two nested Sketch and symbol libraries, after draw.io glitched out mid-map
The takeaways: there are a million and one ways to do these things and it’s a steep learning curve for (most) everyone. That, and, it gets easier — especially with the help of dynamic arrows and user flow Sketch plugins.
My feelings of woe quickly turned into enthusiasm. I’m finally learning a vital lesson — there isn’t so much a set of absolutes as a world of gradient. UX design is kind of like living in the Matrix; opportunity for creative ingenuity is governed by no rules that can’t be bent (or better yet, broken).
Armed with tips and stories from fellow ux-ers, I now power forward undeterred and a little less afraid of missing the mark (at least, for the most part). And with that, I will close with a glimpse at my low fidelity KAUS wireframe options, followed by Mike’s high fidelity finished product — a map flowing to the road ahead.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/0*hRuL-AdJQCABelAY.jpg">I was actually pretty proud of these!
And then I was totally stunned by this!
<img alt="" src="https://cdn-images-1.medium.com/max/1024/0*Z7m999NFnyx8TjxC.jpg">One of Mike’s finished screens from his KAUS case study
Check out Mike’s full <a href="https://projects.invisionapp.com/share/NCG12H2FY2Z#/screens/284249008_DESKTOP_HOMEPAGE">desktop</a> and <a href="https://projects.invisionapp.com/share/NCG12H2FY2Z#/284249007_MOBILE">mobile</a> pages for some real inspiration! And check back next week as this train speeds right into wireframes.
<h3>Looking for a change of careers?</h3>
Designlab’s UX Academy program offers rigorous curriculum, personalized mentor support, and a thriving, global student community. Ready to launch your new career as a UX designer? <a href="http://trydesignlab.com/ux-academy/">Get all the details here</a>.
<a href="http://www.trydesignlab.com/ux-academy">Check out UX Academy</a>
This post was originally published on the <a href="http://trydesignlab.com/blog/ux-academy-journey-week-6-card-sorting-sitemaps-user-flow/">Designlab Blog</a>. You can follow the <a href="http://trydesignlab.com/blog/category/uxa-journey/">whole series here</a>.
<iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fupscri.be%2Ff51076%3Fas_embed%3Dtrue&amp;dntp=1&amp;url=https%3A%2F%2Fupscri.be%2Ff51076%2F&#038;image=https%3A%2F%2Fe.enpose.co%2F%3Fkey%3DdRXnS9Gplk%26w%3D700%26h%3D425%26url%3Dhttps%253A%252F%252Fupscri.be%252Ff51076%252F%253Fenpose&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=upscri" width="800" height="400" frameborder="0"><a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a></iframe><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=51b223493797" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://blog.prototypr.io/ux-academy-journey-week-6-card-sorting-and-sitemaps-and-user-flows-oh-my-51b223493797">UX Academy Journey — Week 6: Card Sorting, and Sitemaps, and User Flows, Oh My!</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

UX Academy Journey — Week 6: Card Sorting, and Sitemaps, and User Flows, Oh My!

Top Stories