I’m New to UX Design. Will You Help Me Refine My Process?
“Art is an idea that has found its perfect visual expression. And design is the vehicle by which this expression is made possible. Art is a noun, and design is a noun and also a verb. Art is a product and design is a process.”
— Paul Rand
Process.
I never realized how much I feared this word until I became a designer.
I’m currently three weeks into a ten-week course for user experience design, and I’ll be looking for a job as a UX Designer when the course comes to an end in August 2017 (yay for career changes!). The biggest lesson I’ve learned throughout these 120+ hours of UX Immersion (so far) is: design is a process, and documenting that process is incredibly important.
I’m familiar with the writing process, which looks a little something like this:
Luckily, the design process looks similar:
The biggest difference here is documentation. UX hiring managers want to know: How did you tame the scribble beast? You need to showcase the inner workings of your brain and present how you discover root problems, come up with viable solutions, and validate those solutions.
So, to get over my fear of process I’ve decided to ask the design community for help. My goal for this quasi-case study is to expose my current process and gain some insight into how I could improve it.
If you have thoughts or feedback on things I should consider or do differently during my next project, please comment below.
About the Project
Team: Brittany Leaning
Project Duration: One week (outside of class)
Project Type: E-commerce website (project requirement set by instructors)
Focus: Information architecture, the design process
Software: Axure
The Client
Rock N Dirt Yard is a brick and mortar landscaping supply depot in Austin, Texas. They have a website, but it functions mostly as an online brochure. The company gets most of its business through in-person visits and orders via phone or email. We were given this website in class and asked to come up with an e-commerce redesign with a focus on restructuring the information architecture.
Discovery and Research
Personas
Since this was only a week-long project, we were given two personas at the beginning to help speed up the process. Elaine most closely aligned with the people I interviewed, so I focused on her needs and pain points for this project.
“I enjoy the experience of working with the Earth.”
Elaine is a 47-year-old gardening enthusiast who cares about ecology, experience, and personal connection. She is a longtime gardener and self-described granola. She is currently working on building an organic garden in her backyard. She is passionate about environmental causes and enjoys working outdoors as a way to relieve stress. She is willing to pay the price for local and organic but appreciates value pricing. Her favorite brands are Nordstrom, Honest, Prius, and Kate Spade, and her favored media is HGTV, PBS, and Facebook. She has a relatively low tech-proficiency, a slow purchase cycle, and uses Mac products such as the iPhone or MacBook.
What Elaine needs from an online store:
- Feeling of relationship with the brand
- Understanding of level of products
- Clear pricing and flexible shipping options
- Social proof from others to know what works
Elaine’s pain points:
- Lack of sufficient product descriptions
- Overwhelmed by choice
- Wants to be sure of small product details
- Having no person to talk to
Opportunities for improving Elaine’s experience:
- Establish trust and relationship
- Show product ratings and certifications
- Give suggestions based on past purchases
Interviews
Here are the steps I took to conduct user interviews:
- Determine if I need to gather qualitative data, quantitative data, or both.
- Write up a list of non-leading, open-ended questions.
- Identify how many users I should interview and where to find them.
- Interview users in person and record the conversations.
- Replay user interviews and summarize the top 3 observations or takeaways from each.
The first real, in-the-weeds step of my process was going to gardening and landscaping stores in the Austin area. These included Home Depot, The Great Outdoors (local), and Rock N Dirt Yard. For this project, I focused on collecting qualitative data so I could learn how to conduct effective in-person interviews, but also because Rock N Dirt is a local, community-oriented business that cares deeply about creating an emotional connection with its customers.
The most prominent things I learned from user interviews were:
- Rock N Dirt customers are not all contractors and landscapers; a huge number are DIY enthusiasts who enjoy working on projects at home.
- The biggest problem customers run into is not being able to visualize material quantity and what their project will look like when it’s completed.
- Customers don’t feel comfortable buying plants or stones online without looking at them in person first, though they might buy items such as dirt or mulch online.
Competitive Analysis
I went to several competitors’ websites and drafted a competitive analysis, which included a basic heuristic evaluation and feature, element, and layout comparison.
Here’s a list of several competitor websites I looked at while in the discovery phase:
- Home Depot
- Lowe’s
- Whittlesey
- Austin Landscape Supplies
- ASAP Stone & Landscape Supply
- Daniel Stone & Landscaping
- Round Rock Landscape
As I reviewed each website, I performed a task analysis and walked through the checkout experience (if they had an e-commerce functionality) for each one. This involved documenting how a user would buy an item on each site, and how many steps it would take to reach a confirmation message at the end.
Challenge(s)
After conducting research and examining my notes, I arrived at two main challenges:
- Elaine couldn’t visualize what materials she needed for her project.
- Elaine had no way to purchase those materials on Rock N Dirt’s website.
Keeping these two challenges in the forefront of my mind, I proceeded to the next phase of my process: sketching and ideation.
Sketching and Ideation
Information Architecture
The main focus of this project was to reorganizing the website’s information architecture. To have a clearer picture of Rock N Dirt’s current priorities and taxonomy I took a content inventory and organized it in a Google Spreadsheet. The list included all the pages linked to in the main navigation and the footer.
Once I had a clear view of Rock N Dirt’s priorities, I wrote down terms or phrases for how competitors’ labeled their navigation.
I took the navigation labels from Rock N Dirt and competing websites and wrote them all on sticky notes, which I then arranged in a random order:
My goal for this activity was to organize my thoughts through card sorting or affinity mapping, but what actually developed was a strange quasi-sitemap:
(Clearly, I should work on this part of my process moving forward.)
From here, I drew a sitemap that was essentially the same information as the sticky notes, but in a different format:
When I completed the sketched sitemap, I still wasn’t happy with the way I organized the site’s information. I decided to proceed to sketching anyway, mostly because I was on a tight deadline, but also to see if I could work out a few of the kinks and get my brain working differently in the next phase.
Narrowing Scope and Structure
Sketches and Paper Prototype
I started sketching a homepage for the Rock N Dirt website based on all the information I had from interviews and competitive research. Once I started sketching, I found myself mulling over the challenge of adding an e-commerce element to help Elaine purchase materials on Rock N Dirt’s website.
Thinking about my task analyses from competitors’ websites, I sketched about ten different steps for purchasing limestone from the Rock N Dirt homepage.
See the paper prototype in action:
If I had more time with this project, I would have liked to:
- Come up with several user flows, which offer solutions to both of Elaine’s challenges.
- Draw each user flow in well thought-out sketches.
- Run several user tests on the paper prototype(s).
- Iterate and work out all the kinks before moving to Axure.
I did make a few changes to my low-fidelity prototype after going through the paper prototype, but these were based on personal preference and opinion. Ideally, these decisions should have been rooted in research and learnings from user testing, but I regrettably skipped this step for the sake of time.
Here were a few lingering questions I had after going through the paper prototype:
- Is the additional level of hierarchy in the drop-down navigation necessary?
- What happens after you click “add to cart” in the popup? (That interaction doesn’t currently make sense.)
- Seeing the calculator after you’ve already added an item to your cart is confusing. Is there a way to add this feature beforehand? Or should it be nixed altogether?
Wireframes
My first attempt at a wireframe for the Rock N Dirt website redesign was laughable. For some reason, I thought the definition of a wireframe was just that it had to be black and white. I essentially jumped right into a high-fidelity wireframe, albeit black and white. I then got some feedback from my instructors and realized I needed to take a step back so I could focus on the information architecture and user flows.
Here was my first wireframe:
Nope… that’s not a wireframe.
Once I realized my error, I corrected it and created a more consistent, low-fidelity version:
That’s better.
This wireframe includes six menu items in the main navigation, a search bar, and some links above for Rock N Dirt’s phone number, the user’s account information, and a shopping cart. You can see a hero image gallery close to the top of the page, which would include photos of customers’ yards, patios, and other landscaping projects that showcase Rock N Dirt materials in use. Just below that, you can see a section for Featured Products, which would show product details from the gallery. Finally, in the footer there’s a map, Rock N Dirt’s address and phone number, and a contact form for questions.
During this process of lowering the fidelity, I also reexamined the navigation and took out Pricing, Delivery, and Resources and replaced them with Inspiration, FAQs, and Blog. I realized that Pricing and Delivery were redundant and could be combined with Products. The original separation of these had a lot to do with the legacy Rock N Dirt website and the way the information was originally laid out. I also came to the conclusion that Resources was too vague as a solution to helping Elaine visualize the materials she needed for her yard.
I had high hopes that I would work out the information architecture kinks in the sketching phase, but I just couldn’t wrap my brain around how to solve the problem until I saw it laid out in a higher fidelity design. I think two things could have helped me solve this earlier in the process, which I will remember for next time: 1) proper card sorting, and 2) sketching and creating multiple user flows through multiple paper prototypes.
Prototyping and Testing
The final deliverable of this one-week project was to create a low-fidelity prototype in Axure and present it to the class. This was my first time using Axure, so most of the time I had dedicated to this phase was spent Googling how-tos and watching Lynda.com tutorials.
Considering my deadline, I stuck to simple designs and interactions. I focused on providing solutions to Elaine’s two major challenges: visualizing the materials she needs for her project and purchasing those materials on the Rock N Dirt website.
To address the first problem, I created an inspiration gallery where Elaine could look at photos of other customers’ DIY projects. When you click on a photo, a lightbox pops up with numbers placed over specific elements of the photo (for example, limestone used in a customer’s patio project). If you click on a number, you see a little information about the specific Rock N Dirt product that customer used, with a call-to-action (CTA) to see more details about that product. From there, you can choose to check out or browse related materials.
User Flow: Inspiration > Place Order
Here are the steps:
- Inspiration
- Justin’s Patio
- #4 (Limestone)
- See Details
- Add to Cart
- Checkout
- Confirm Order
- Place Order
With this user flow, there are eight steps between Elaine’s curiosity and purchasing her products. Of the three user flows I chose to showcase, this is the most complicated and takes the longest to complete.
Another option Elaine has for purchasing her limestone would be to click on Products in the navigation, select Rock & Stone, and dive into Limestone from there. On each product page, I chose to lay the content out visually with a sidebar menu to help the user navigate further. Finally, I included some breadcrumbs so users wouldn’t get confused about which product page they were on (or how they got there).
User Flow: Products > Place Order
Here are the steps:
- Products
- Rock & Stone
- Limestone
- Add to Cart
- Checkout
- Confirm Order
- Place Order
This user flow removes one step, leaving Elaine with seven steps from the homepage to placing her order.
Another way Elaine could find limestone through the homepage is in the Featured Products section below the hero image gallery. Here, you’ll see a popup modal with more information about the product, some similar products, and an option to learn more.
User Flow: Featured Products > Place Order
Here are the steps:
- Featured Products (Limestone)
- See Details
- Add to Cart
- Checkout
- Confirm Order
- Place Order
Now, we’re down to six steps. As you can see, Elaine has a few different options for adding limestone to her cart, but this last user flow is the quickest.
Since this was a quick project aimed towards learning software and fundamentals of UX design process, I didn’t get the chance to user test my prototype. In future iterations of this prototype, I would absolutely user test each of these flows with multiple “Elaines.”
Iterating and Launching
Though this project never advanced beyond a low-fidelity prototype (or even a fully-functioning one, at that), there are many things I discovered throughout my process that I’d like to redesign and test again. For example, one major oversight that I’d like to fix is the ability for users to add the amount of stone they’d like to purchase, whether that’s per pound, bag, yard, etc. It would be great to revisit the calculator idea that I was throwing around in my original paper prototype, which I nixed in the low-fidelity prototype for simplicity’s sake. At the end of the day, I had to focus on learning how to use Axure, show how I organized the site’s information, and walk through a couple of user flows that addressed Elaine’s biggest challenges. There are still several logistics and details that need attention and iteration, but this will require a bit more time to tackle.
So, what’d you think? I’m three weeks in, seven weeks to go. I still have a ton to learn. But am I on the right track? Am I thinking through these problems the right way? Please leave a comment below if you have any thoughts or feedback on my process.
If you enjoyed this case study, please click the ❤️ button below.
Thanks for reading. 😊
