Introduction

I was asked to provide a UX solution for a new sauna company. The founder was building a website and wanted help making it look good. I offered to provide feedback on what was already built and would apply design thinking to the logo, visual design, and user flow.

The Problem

I spoke with the founder to discover how they wanted their site to look. We came up with the following design requirements:

1. Clean, simple, and modern “look and feel”
2. Highlight the product
3. Smooth user flow at checkout

One of their original homepage iterations is listed below:

The Solution

I provided the following feedback:

• The logo didn’t read as well as intended
• The initial template had some unnecessary content that was distracting
• The site could create an experience for customers purchasing a sauna, rather than just showing a list of products
• We could create a more purposeful use of color and visual elements

I created the following landing page:

My design would put the product front and center while building upon the experience and tradition that is Sauna — inviting customers to enter the site and explore.

My solution would feature

• A call to action to invite the customer to explore products
• Gorgeous photos showcasing the product
• Blogs and articles to educate and inform customers
• Clean navigation, including a search bar to assist customers even further
• A wireframe logo — suggesting a new direction for the previous logo

My design was met with enthusiasm, and the founder got really excited about building an experience for their customers.

Project Constraints and Resolution

The project was subject to the following constraints:

1. The founder would build the website with little to no prior development experience
2. The site will be hosted on Wordpress.com
3. eCommerce tools were limited by budget

After receiving my design, the founder opted to hire a web developer as the product needs were greater than originally anticipated. The founder loved the direction I was headed and passed my designs to the developer. The website is still under construction and will naturally be subject to further iteration. My role as a consultant will continue, and I look forward to testing the live site.

The Process

1. Research

I spent a few hours speaking with the founder to discover why they were in business, why saunas, what kind of websites they liked, what needs they had, and what they wanted their customers to feel while using the site. We also talked about WordPress and the pros and cons of hosting the site there.

I spent an hour or two researching the traditions and health benefits of saunas. I wanted any claims on the site to be accurate. If the site was going to feature blogs and articles — they needed to be truthful and accurate.

2. Iteration

My first homepage iteration looked like this:

I put this design in front of a few individuals and received some feedback:

1. The spacing between the pictures was “weird”
2. The “explore products” button was too far down
3. The font wasn’t very interesting and didn’t quite fit in
4. “Why Sauna” was not very clear
5. The blur on the images wasn’t great
6. The images didn’t represent the product
7. The overall design felt a little dark

I’ve put the 2 iterations side by side to show the comparison:

As you can see, I added the following changes:

1. Images of saunas instead of random outdoor shots
2. Lo-fi logo (as it’s not yet finished)
3. Clear, crisp images
4. New font
5. More vibrant color
6. Left aligned overlay text
7. Fixed padding and alignment on images and buttons
8. Resized search bar to be less invasive
9. Tweaked copy to be more clear

To be Continued…

I look forward to working with the developer to help this small business succeed. I have plans to conduct heatmap tests to observe how users move through the site. I would also like to conduct user tests to ensure the checkout process flows nicely. As that’s not built yet, we will have to revisit that part of the process.

Thanks for reading this far! Since you did, might as well give it a 👏🏻 or 500. I wish I could take the time to write about every aspect of this project. If you have questions or comments, I’d love to hear from you! You can fling an email my way via mrtailsdesign@gmail.com, or find me on LinkedIn if you’d like.

Bye!

Mountainsaunas.com was originally published in mrtailsdesign on Medium, where people are continuing the conversation by highlighting and responding to this story.

I recently had the pleasure of working with 2 talented designers on a student planner app. I’ve written out the case study, so if you’re curious about the project as a whole — check that out.

I wanted to share more about one part of the project: Empathy. You hear that word a lot, and not just in the UX space. There are articles, videos, and blogs that explore empathy. It appears to range anywhere from a science to a mystical practice. The general understanding of empathy seems to be feeling compassion for others, or “putting yourself in another’s shoes”.

So here I was, designing this app. The project had recently taken a turn and it was decided in a vote of 2–1 that the app would target kids instead of “traditional” students. I will freely admit I was the outvoted voice there — based on the resounding, absolute fact that I have a general distrust of children. I’m sure kids mean well, and we’ve all hopefully been children at some point — but children are pretty much chaos incarnate: growing and learning and living life carefree like they do. I do not fault them for this, but for some reason, sometimes I struggle to relate to the tiny humans that ensure the future of society.

What business did I have, creating an app for kids? How could I design a product for a demographic I did not have much empathy for? I had concerns but decided to trust my teammates and rely on the excitement they had for the new project. Maybe if they had the empathy required, the project could still be a success.

We completed some additional research, and what I discovered during that process was life-changing:

I created the opportunity to interview parents about their kids. As I spoke with them I saw such intense and raw love for their families. I could see a fathers passion and hope that his 2-year-old daughter would learn how to focus on tasks or finish eating her meals. I saw joy and worry and desire to spend as much time with her as he could. I could see through him how excited she was to go to the park or talk about her day with her dad. I heard the pride in a mother’s voice as she talked about her elementary-aged son’s increased independence, and the care and worry she took when speaking about the things he still needed to learn. As I inquired and listened, seemingly out of nowhere these parents became the key to feeling and knowing and wanting to help.

By listening and learning these parent’s stories, I discovered empathy for their children. I now wanted to help. I wanted to create something that would help parents teach their children, while facilitating the creation of a deeper family bond. I remembered that kids are just smaller-sized people, trying their best — and not little monsters out to ruin lives. A project I was hesitant to start quickly became one of the most fun and meaningful projects to date.

This process was completed for a design challenge, but the principles learned can be applied to anything:

1. Ask People to Share Their Story
   People often like it to talk about their lives. Let them! Asking shows sincerity and vulnerability. If you are genuinely curious, folks will open up to you.
2. Be Sincere
   You need a real sense of curiosity and a desire to want to know. Even if you don’t initially care about the person — you have to at least want to have that desire.
3. Listen to Understand
   Don’t listen to respond or to get the chance to say something. While you’re listening, picture what your life would look like if you were saying those things instead.
4. Put Your Ego Down
   While your ego is part of you and impossible to put down, just realize it’s not about you. When someone is sharing their story, it may conflict with your personal beliefs — that doesn’t matter right now. Your personal feelings will be fine, and not everything gets to be a debate. If you can set your own assumptions and beliefs aside for the briefest of moments, there will be room to understand someone else. Don’t worry, you can always pick your ego back up again.
5. Empathy is Learned
   You hear about Empaths who have a natural affinity for understanding others. It’s ok if that’s not you. Like anything, it just takes practice and a desire to learn. If it’s something you struggle with, find a buddy it comes easy to, and let them help you. Chat with them about how they find empathy.

When we can view the world from different perspectives, we become better friends, employees, bosses, designers, artists. We can expand our own limited experiences and capacity to understand exponentially. Plus, shared understanding makes the world a more harmonious place.

I am grateful to be more than I was because of this experience.

Thanks for reading this far! Since you did, might as well give it a 👏🏻 or 500. A huge thanks to Jonathan Daniels and Evan Kirby from Unsplash for the photos. If you have questions or comments, I’d love to hear from you! You can fling an email my way via mrtailsdesign@gmail.com, mrtailsdesign.com, or you can connect on LinkedIn if you’d like.

Bye!

The design challenge was to build a native mobile student planner. I was assigned to work with three other designers, and could only design features that were currently possible on native mobile apps. We had three weeks to take the project from conception to hi-fidelity. The following design requirements were provided:

1. Ability to share progress and grades
2. Track schedules
3. Take notes
4. Create and edit calendars

While the requirements were flexible, the app ultimately needed to support the end goal of helping students get better grades.

Getting Started

I always start with research. Research is the best way to build empathy for your users. I started with what I already knew:

• Students favor either analog or digital planners, picking one over the other
• Students have established a routine they’ve found works for them
• There are two types of students — those who keep track of everything in their head, and those that write everything down.

I conducted user research and what I found changed my perception:

• Most students use a combination of analog and digital planners
• Everyone is almost always using their native calendar app
• Students who have an established planning routine have spent years practicing.
• Students don’t always track grades and rarely share progress
• Students intend to plan better, but don’t always follow through

This led me to believe that perhaps the solution was not in creating yet another calendar to manage but instead creating an app that would help students plan better.

I always use my collected data to create a persona. Personas help me avoid self referential design and facilitate the retention of any empathy created during the research process.

Ideation

I created a user story map with some flashy features:

• An all-in-one digital planner
• Calendars
• Picture and hand drawn notes
• Customizable reminders
• Group collaboration

This would be the best planner app ever! — but something still wasn’t right. My research told me that students already use native calendar apps and didn’t have many pain points there. I also knew that students who use planners consistently already have established routines. I didn’t want to create yet another calendar for users to manage, and I didn’t feel the app was solving the problem of teaching students who don’t plan well to plan better. I was ignoring the research I had so carefully collected. I could design this amazing app with all of these nice features — but if students picked it up a couple times and then never went back — it would fail.

Re-Ideation

To teach students how to plan better, perhaps the focus should be on elementary age students. Additional research was required and yielded some very interesting data:

• Kids are happier when involved in their daily schedules
• Kids generally express interest in their schedule
• Kids aren’t generally taught to schedule until high school or later
• No comprehensive planner currently exists for kids.
• Parents usually create routines for their kids but have trouble keeping it consistent.
• Parents want their kids to be able to learn to focus on tasks for longer periods of time

I utilized the new data to create 2 personas this time: an eight-year-old boy and a working father. Kids would be the primary users, with parents using the app in a support role. I created a brand new story map that would ensure the goals of both the kids and the parents were being met. The app became a game-like version of a standard planner:

• Parents and children would work together to create “routines”, a simpler version of a calendar
• Routines would feature whatever events the parents wanted, ranging from brushing teeth to homework and classes
• Parents could create goals, and kids could select which goals they wanted to work towards next
• Goals would reward consistent app use
• Pomodoro timers to help kids increase their attention span and learn the importance of taking breaks.
• Customizable reminders to help parents keep up the routine.

The app would feature different themes — balloons, rockets, gems, and so on. Kids could unlock new and exciting themes through consistent app use, lifetime number of events completed, etc.

Themes would influence events and timers (timer prototype featured to the left).

The timers would be set for a specific amount of time, and automatically include breaks. If this timer here were set up accurately, the balloon would contract during the break time, only lifting off when the timer was finished.

Testing and Feedback

I tested my prototype on parents first. I had them complete a simple list of tasks:

1. Log In
2. Create new child profile
3. Create a new timer
4. Add an event to “Danny’s Routine”
5. Create a new reward.

Almost every user got stuck adding a new event. The routines are listed on the “Home” page, but that didn’t register as a place for the routines to be located. Based on this result I changed the label on the nav drawer from “Home” to “Routines”.

The users who did find it, couldn’t find a way to add an event — this was an oversight on my part. I added a FAB button to make that function accessible.

The feedback I got from parents is they felt like siblings would meddle in each others routines — so I added the ability to require a four-digit passcode when signing on to different profiles. I also discovered that the game-like parts of the app could be unhelpful or uninteresting for older students — so I created a “list view” that would hide many of the themed elements.

The kids test was much simpler. They were to simply explore the prototype. I was delighted to find that they thought it was a game — but also recognized that it was “chores”. This means it wouldn’t be too distracting and would emulate an actual planner.

“It’s not really a game mom — it’s just CHORES”

Visual Design

I chose bright and bold colors for the theme and created a logo I felt emulated mystic and adventurous games to draw users in. I wanted the app to feel as much like a game as possible. It took some reiteration and testing to get the colors and fonts all working together but ended up with a visual hierarchy that would make the interactive content stand out.

The micro interactions (prototype pictured left) would be a very important part of the project. This is where a lot of the “game” feeling would come in. Balloons expanding, floating away, or filling up with air like the timer pictured above.

I received feedback that the colors of the balloons was a little too intense next to the purple and orange system colors. In addition, the text wasn’t passing contrast checks. To fix this I reduced the hue of the red and made the balloon text a modified version of the balloon color. To create more of a balloon feeling, I discarded the material design shadows and gave tweaked the radial gradient, to give depth to the balloons.

Takeaway

It’s always better to design to solve a problem. We can create another cool app, or another shiny feature — but we must remember which problems we’re actual solving
We think we have the best ideas, but we simply must get those ideas in front of users before we set them in stone. We must let users tell us what is easy and what is good.
All design is about reiteration. Our first idea is not always our best. We must be willing to let our designs evolve.

Conclusion

Given more time, I would create even more of a game feel. The game elements remained a on the low fidelity side — I’d love to explore how to bring those to life. Perhaps by adding a background to the week view or adding micro interactions. I would also like to build each of the themes fully and explore exactly how they would fit in with what was already designed.

I would like to discover precisely what age range the themes work for. The app currently targets a wide age range and it would take some very focused testing to see which ages preferred the theme view versus the list view.

The project took some twists and turns, I had to look at the problems and goals presented in a different way, but I’m confident this app would help kids understand the importance of good planning. Good habits start early and I believe I created a way for kids to learn those habits. During the design process, many parents remarked they wanted a live version they could actually use with their children — I believe a full development team could create a successful, helpful, and fun app.

P.S.

I worked on a team for this project. I had the help of two talented designers, Lexi Crandall and Colby Goetz. The wireframes and animations are my own, but many concepts were created together. Teamwork is so important and I could not have done this without them.

Thanks for reading this far! Since you did, might as well give it a 👏🏻 or 500. I wish I could take the time to write about every aspect of this project. If you have questions or comments, I’d love to hear from you! You can fling an email my way via mrtailsdesign@gmail.com, or you can connect on LinkedIn if you’d like. Bye!

Designing ScheduleQuest was originally published in mrtailsdesign on Medium, where people are continuing the conversation by highlighting and responding to this story.

The Team

It was the first week of design school. I had been waiting for this moment for the better part of a year, and secretly, my whole life. It was time to jump into my first project, with almost no prior experience under my belt. I was sorted into a team of three— fellow students whose names I barely knew at this point. We were to learn as we went, applying design principles learned in class as we worked together to solve a problem. My group excitedly met for our first meeting. Other than myself, the group consisted of Cass Koller and Miciah Buttars.

The Problem

My group received the following design requirements:

“Work as a team designing a web solution for low-income workers providing access to various types of technical training. The training needs to offer up-to-date technical skills and give the learner an array of technical skills and an aptitude to succeed.”

The goal is to help unskilled workers move into better jobs.

Technology is an integral part of life and as technology advances, we rely on it more and more to perform tasks for us. Menu kiosks allow us to select, place, and pay for orders without the help of attendants. Self-help kiosks provide automated services for grocery stores, hotels, and restaurants.

It’s estimated that by 2030, millions of jobs will become automated. Waiters, clerks, accountants, tellers, salespeople, laborers, and brokers are just a few of the jobs that will disappear. One industry that isn’t going away any time soon is Information Technology. Society may become more reliant on robotics, but we still need humans to design and code them.

The problem is that many low-income workers aren’t pursuing the necessary education to land them in positions that are more secure. Why is this the case? Surely something as important as a persons livelihood should take precedence.

The Research

I needed to understand why unskilled workers weren’t pursuing technical training. While I had been in the same boat — working hourly positions, trying to make rent, trying to figure out what I wanted to do with my life — I was here in my first week at design school, learning technical skills with all the hope in the world. But, I had recently been in that position and felt it was safe to assume a few things:

1. Education is expensive
2. People are busy and can’t make time for school
3. It’s scary to take that leap
4. There are an overwhelming amount of options out there

These are very valid, very real concerns. I set out to speak with individuals who may be working in low-income positions to see if I could validate those assumptions.

I got a mixed bag of respondents: a medical student, a barista, a ski instructor and three factory workers. The factory workers provided the most relevant information:

• They didn’t feel smart enough
• They had considered a career in IT at some point
• They didn’t know where to start
• They looked into online learning but got stuck when they didn’t understand a concept
• They felt there wasn’t anyone available to help or mentor them

“I don’t really have a math mind, so a career in IT is probably for someone else.”

Our data led us to another issue — if high school students don’t go to college right after graduation, they are taking low-income jobs and getting stuck there. After learning about this issue we decided to speak with someone in education. To get to the root of the problem, we had to shift our focus to what was happening in high school that was setting these students up for failure. We conducted an interview with a high school teacher in a low income area. What we found was surprising:

1. Most students are illiterate when it comes to desktop computers. Many students only mobile devices and don’t get to use traditional computers much — there is a 2:1 or 3:1 ratio for students to computers.
2. Many students are plagued by social issues like gang recruitment or addiction in their family.
3. Students who are accepted to four-year continuing education don’t actually attend — only about two per year.
4. Online schooling is challenging — many students can’t type well and lack the proper motivation or resources to complete courses.

We realized tech training started much earlier than originally assumed. If graduating students are computer illiterate, of course they aren’t pursuing tech training. My group decided to shift the focus of our design to high school and post-high school users — through the product would still be accessible to users of all ages.

The Solution

The next step was to take all that data, combine it, and create a persona. The persona was a high school senior worried about the next steps after graduation. We had found a lot of empathy for our users and wanted to be reminded of that. Once we had a persona to guide our designs, the next step was a user story map, to understand how our persona might interact with the product. Based on our story map we came up with the following features we felt would benefit our users the most:

• Courses on job skills, professional behavior, and tech literacy
• A Resume builder
• A skill assessment to help point users to the right courses
• A resources page containing job related articles
• A community page for users to connect with mentors.
• A way to track progress and badges to showcase learned skills.

After some debate we decided to move the mentor and badging features to sprint two, as they weren’t required to make the product function.

The Design

The next step in the process was to create sketches of the user story map. The way I found that worked best was to sketch each task in the story map using the 10x10 method until a solution was found

We opted to prototype our sketches in Balsamiq, and then linked them together in InVision.

Design Review and Feedback

We got a few notes from our first design review. The first was that we needed to think about where our content was coming from. We initially thought that they would be written and hosted on the website, but decided it would be best to host them on an external platform.

The second piece of feedback was that we had a lot of content but it seemed to be presented in a confusing way. We lacked the visual hierarchy we needed to present content in a way users could understand.

The last and biggest feedback we received was that we should focus on doing one or two things really well as opposed to many things kind of well. I reluctantly agreed. I knew from our research that many resume builders and skills assessments already existed. I also knew that there are multitudes of online education websites out there — that was a pain point discovered during our research after all. It bothered me that we weren’t doing anything particularly different. It could be said that we were putting all of those things together, but it just didn’t feel like a strong enough reason to keep doing what we were doing. So, back to the drawing board — or in this case, the wall of sticky notes.

Reiteration

While we were discussing how to restructure the designs, one of the things that stood out from our research was a comment that online courses feel like ads, and ads don’t feel trustworthy. This was a problem we could actually solve. What if we created a way for a community to verify and discuss the merits of different educational programs and resources, rather than creating our own?
This time our product would have two parts: Resources and Community.

Resources would include links and information about educational programs, resume builders, the job market, and other related articles.

Taking the feedback about how we presented our content, we created visual hierarchy using size and color. Educational programs, being the most important, would be large and feature a darker shade. Articles and links would be medium sized with a lighter shade, and so on.

All of this content would be presented to the user based on their recent activity.

Community would be a place for users to connect, create discussions around the resources offered, and otherwise network.

Users could create, edit, and delete posts

Ask questions about educational programs, resources or the job market in the question hub

Content would again be presented based on recent activity and trending topics, with search tags presented as cards to help with quick searching.

Visual Design and Testing

I spent a good two days with my group creating color palettes. We decided on blue and yellow. Blue because of its association with social media, and yellow to represent creativity. Blue was for Community content, yellow was for Resources. Yellow was a bit of a struggle because it’s hard pass contrast. We tested upwards of eight different shade pallets before we found a darker almost gold color to represent the resources section. The biggest takeaway from this is just to try different things and test them as much as possible.

Another issue found during testing was the categories button (pictured below). It served as a toggle to sort content by type, but most of our testers weren’t understanding that. I’m pretty sure we ended up beating our heads against the table before we found the solution:

During our testing phase, I was pleased to find that most of our users encountered the same problems with each round of tests, but none of the problems ever came up again once we fixed them.

In Conclusion

This was a learning project and I definitely felt like I learned a great deal. I learned how to conduct guerrilla research in appropriate environments. I learned how to be a better collaborator. I embraced being bold and became a better leader.

If I could start this project again or continue on, I would focus on a few things:

• Identifying more pain points from potential users who were actively seeking technical training.
• More initial research into what competing products already exist.
• Test more user flows. We had a complete prototype of the entire product, but we could have focused on testing specific user flows — new users, returning users, etc. In future projects, I will be thinking about user flow before I start wireframing.
• If we had more time, I would have loved to test more. I would have tested our color palette in an A/B test. Where we had so many issues with contrast, I would have liked to create a complete solution.

I also learned a lot about working with a team and collaborating with other designers. At first, I had a hard time speaking up because I wasn’t confident in my own abilities. I learned that it’s much better to be vocal and ask questions, especially if you don’t feel like you’re getting it. I also learned a lot about how to move forward without having established leadership: when a team is working together without a project manager, it takes a lot of thinking out loud and encouragement of fellow designers.

I can’t wait to apply everything I learned when solving future problems.

Thanks for reading this far! Since you did, might as well give it a 👏🏻 or 500. I wish I could take the time to write about every aspect of this project. If you have questions or comments, I’d love to hear from you! You can fling an email my way via mrtailsdesign@gmail.com, or you can connect on LinkedIn if you’d like. Bye!

Solving Technical Training was originally published in mrtailsdesign on Medium, where people are continuing the conversation by highlighting and responding to this story.