In a professional context it often happens that private clients corder a publication to be made.
John Doe
September 30, 2019
HTML5 / PHP / CSS3
These words are here to provide the reader with a basic impression of how actual text will appear in its final presentation. This is dummy copy. It is not meant to be read. It has been placed here solely to demonstrate the look and feel of finished, typeset text. These words are here to provide the reader with a basic impression of how actual text will appear in its final presentation. Only for show.
These words are here to provide the reader with a basic impression of how actual text will appear in its final presentation. This is dummy copy. It is not meant to be read. It has been placed here solely to demonstrate the look and feel of finished, typeset text. These words are here to provide the reader with a basic impression of how actual text will appear in its final presentation. Only for show.
UX/UI Website Redesign Case Study
Dan Smith
August 8th, 2020
Figma / Bootstrap / HTML5 / CSS3 / Github / Netlify
Vegetable Vagabonds is a company focused on providing plant-based food. It functions as a pop-up restaurant giving the business mobility and the possible benefit of catering events. Their online presence lacked a professional website. Their online social media presence was gaining traction but their linked website wasn’t fully developed due to the skills necessary to complete and lack of funding.
The project was simple. Create a one page website that gaines organic traffic, directs new customers to inquire about hiring Vegetable Vagabond for events, include an events and an instagram feed to highlight Vegetable Vagabond’s current attraction.
Using a structured but iterative design process by taking methods from agile, I deliver the full lifecycle of this design. From ideation to implementation, I promote congruity with the customer needs, user needs, and creative needs.
During discovery, I’m focused on understanding the client needs, user needs, and pain points. As I develop a general idea of where to being, I move to define the persona and user flows and interpret the old information archetecture to develop a new map. Once I am able to explore, I begin understanding the user directly using surveys and the client’s main competitors with competitive analysis. Finally, I have enough information to begin building and reiterating during the visual designing the wireframes, user testing, and prototypes. Once the client is satisfied, I code out the website using a Bootstrap framework and deploy on Netlify.
To better understand the website and client needs, I conducted an interview with the owner of the restaurant.
Vegetable Vagabonds focus on the comfort food culture more than the health food culture. With Portland, Oregon’s saturated plant-based restuarant market, Vegetable Vagabonds creates a niche market within plant-based restuarants offering pub and soul food.
Build a simple single page website for new and returning customers to easily navigate. Include a life Instagram feed for recent updates and an event calendar using Google Calendar for customer awareness of availability and upcoming events.
Original design lacked information, function, and graphics. The owner informed me he attempted to learn Wordpress but got distracted along the way and left an incomplete website. Missing functions included contact button directing to contact section, Instagram feed, events feed, and contact form submission.
Based on interviewing the owner, the target market has three distinct target markets; people who attend festivals, farmers market shoppers, and event hosts. Highlighted below are the top two personas that help make my design decisions.
I use a simple SWOT analsis framework to evaluate the restaurant’s competitive position creates a strategic plan and identifying Vegetable Vagabonds opportunity to grow and capture a niche market.
Following a basic sitemap structure, the purpose was to create a simplified single page site. Instead of seperating each subpage, creating a single page with the basic information makes the website easy to find information. The site includes a menu with anchor links for easy navigation.
Originally, the site was going to include multiple pages. Considering the client wants the site to be accessed easily and quickly, I used a mobile-first design method for access on the go. When carving out rough ideas for the site, I focus on features first.
Client continued to approve multiple site ideation through high-fidelity wireframes. After reviewing the low-fidelity wireframes with the client, he provided me with feedback, edits and revisions. The high fidelity wireframes included a responsive calendar function and downloadable sample menu.
I coded the design using a Bootstrap framework and used an existing old template for speed. In addition, I included script from Instafeed.js and embedded Google Calendar in iframe for a responsive design.
Once satisfied with the coded site, I hosted on Github and deployed on Netlify. Creating a simple and affordable site is important for the client due to starting business with minimal capital.
Concept: Karuna connects clients and therapists with an engaging platform. Track progress, activities, and messaging.
Keep the therapeutic relationship strong in and outside the office.
Dan Smith
March 11, 2020
Sketch / Adobe Photoshop / Adobe Illustrator / InVision
Sanskrit: करुणा
English: Compassion
Karuna dates back to the Sanskrit and Pali texts with a deeper meaning of self-compassion and attaining a happy present life.
In Eastern Philosophy, the practice of Karuna leads to purifying one’s mind, avoid toxic-induced consequences, and leads to happiness in one’s present life.
With over 10 years of experience as a Licensed Professional Counselor (LPC) and working in a wide range of clinical environments, the same problems persists in every clinic; Client follow-through, oversight, and quantifying progress.
Client report is the highest utilized reporting method. For example, assigning homework to a client will include a check-in the following session yet oversight of completed assignments is rarely followed through.
Clients frequently report distressed emotional states outside of services yet struggle with reaching out. Providing oversight and the opportunity for emergency-based correspondence with the clinician offers higher chances of deescalation.
Clinics attempt to administer assessments such as the PHQ-9 and GAD-7 to provide quantitative data on progress but the problem is subjective on the immediate situation (i.e. when the client is in the clinic). Administering viable assessments randomly throughout a clients week gathers data points frequently missed.
The Therapist - Client relationship is the highest determining factor in client outcomes yet the average therapeutic relationship accounts to less than 3% of time spent in a normal 40hr work week.
In addition, 70% of clients who follow through with Therapist recommended assigned homework report better outcomes, however difficult for therapists to measure.
A platform that connects therapists and clients outside the office. In addition, Therapists can assign engaging evidence-based content as homework for clients to complete. Assigned treatment homework is tracked creating transparency and increased outcome in treatment services.
Using basic screen outlays and color coding, The sitemap gives a brief picture of how the interaction works. Using this lo-fidelity keeps the focus on the big picture of the apps function.
Focused on keeping the UI basic, the development still focuses on the overall purpose of the app. Designing clean wireframes for the homescreens, message center, assignments and progress begins to unfold.
Building a map using the lo-fi wireframes focused on the apps function gives a brief model of how the user interacts.
UI Design:Using Sketch, Figma, and Adobe CC, I built out Hi-Fi Comps for testing. I have other eyes look at the work for clarity, functionality, and ease of use before moving to building the prototype.
Color Palette: Choosing colors that are calming, I followed analogous color rules to pick colors around the main blue color found on the header and footer of the app. Text and text background involved easy to read white and off black.
Typography: Using Raleway paired with Open Sans suggests an approachable app with readable text.
Iconography: With a mix of generic icons and icons found on Flaticon, the set focuses on clean and familiar to guide the user.
Using a fluid prototyping method on Invision, the app focuses on feedback and suggestions. Creating iterations and changes focuses on the quality of the final product.
Sources:
”Research summary on the therapeutic relationship and ...." https://psycnet.apa.org/record/2002-01390-002. Accessed 11 Mar. 2020.
2. "Meta‐Analysis of Homework Effects in Cognitive and ...." 8 Jun. 2010, https://onlinelibrary.wiley.com/doi/abs/10.1111/j.1468-2850.2010.01204.x. Accessed 11 Mar. 2020.
Design an app centered on the COVID-19 pandemic and solve a current problem when facing COVID-19. Problems may include deficiencies in the health care system, inadequacies in information or resources, or infrastructure problems.
Dan Smith
March 2020
Figma / Sketch / Adobe Photoshop / Adobe Illustrator / InVision / Google Suite / Github
The COVID pandemic is a containment crisis with an inadequate number of tests and monitoring system. Containment is the main priority, however there is no current solution for collecting location and contact history. How can we contain if we don’t know who has been in contact with COVID?
Through research I found that users were open to share location data and contacts securely in exchange for joining a testing waitlist based on priority. In addition, users wanted a single point to access reliable COVID updates.
An app that exchanges user location and contact data for a virtual COVID screening and testing waitlist based on screening results. After being screened on the platform, users’ results determine their waitlist number. Data is used to monitor and inform other users of potential contact with COVID.
I began by first understanding if users were comfortable sharing location and contact data. Survey results showed comfortable or somewhat comfortable with sharing data. Noticing how people share helpful and reliable resources related to COVID, I wanted to build a platform that stressed the importance of sharing its function as testing and containment. I built personas based on users who may be at risk but unsure if they are infected. This determined the user flow and goals. The main function was testing and data collection, however the app needs to remain installed for future notification thus an additional COVID update function was added based on the survey feedback.
Accessibility was important to address early due to COVID being a cross generational problem. I designed simple wireframe layouts for ease of access. I focused on using calming blues accented with familiar COVID colors. Seeing as the data collection function is behind the scenes, I focused on showing the screening function. Based on the user flow, I build out a screening function following the CDC guidelines. After the screen, users are given their results that informs their spot on the virtual consult and drive-thru testing waitlist. As more people who screen with higher priority, the algorithm will move people around accordingly thus the importance of having a waitlist update panel on the home screen. The COVID updates feature found on the home screen pulls reliable news from local, national and global sources. The map tab pulls data from the current John Hopkins COVID data collection shared on GitHub. The prevention tab include CDC directions for personal and community prevention.
Instructions: Design a location tracker. Consider the icon, placement, and purpose of location. Mapping something? Is it a tracking beacon? Is the NSA tracking you? ok, maybe they are ;)
Dan Smith
April 22, 2020
Figma / Sketch
Instructions: Design an Email Receipt. What was purchased? On what date? Consider other elements such as a customer support info, a tracking number, pictures, related items, etc.
Dan Smith
April 22, 2020
Figma / Sketch
Instructions: What's the main focus? Is it for a book, an album, a mobile app, a product? Consider important landing page elements (call-to-actions, clarity, etc.)
Dan Smith
April 22, 2020
Figma / Sketch
Created a rating feature for an after appointment review system after telemedicine/telehealth appointments. Purpose was to capture appointment satisfaction results with quick and simple interaction.
Dan Smith
May 2nd, 2020
Figma / Sketch
Feature was inspired after a virtual doctors visit and receiving the review query by email hours after the visit. I noticed the review function could be trimmed down and prompted directly after the telemedicine visit as part of the visit.
Graduate school PhD Clinical Psychology at the Univeristy of Wyoming
Daniel Smith
May 2011
Quantitative Research / SPSS / ABCT Presentation
While sorking towards my Masters in Clinical Mental Health Counseling from the University of Wyoming, I pursued extra curricular research work through the Clinical Psychology PhD Department. Working under Dr. Walter Scott and PhD candidate Alicia Mousseau, I reviewed statistical data, peer-reviewed articles, generated multivariate analysis, and presented work at the Association of Behavioral and Cognitive Therapies (ABCT) 2011 Conference.
Two research projects were conducted studying the link between self-efficacy and resiliency to depressive symptoms found in Northern Plains American Indian youth.
The first research project was a correlational study on the role of self-efficacy or optimism found in Northern Plains American Indian Youth predict resiliency to trauma-related symptoms. The study used the Recent Negative Life Inventory (RNLI) to measure trauma symptoms, Self-efficacy Questionnaire-modified (SEQ-M) to measure academic self-efficacy, and Life Orientation Test (LOT) to measure optimism. The study used a correlational analysis to examine the relationships between traumatic symptoms, optimism, academic self-efficacy, and recent negative life events.
Results showed that optimism and academic self-efficacy were negatively associated with traumatic symptoms. In addition, optimism showed a strong correlation to academic self-efficacy and negative life events showed a strong correlation to traumatic symptoms. This demonstrates the benefit of high optimism and academic self-efficacy as a resilence factor to trauma-related symptoms.
View the ABCT 2011 Conference Poster
The second research project studied the relationship between self-efficacy, stressful life events and depressive symptoms among Northern Plains American Indian youth. The study used the Child's Depression Inventory (CDI), Self-efficacy Questionnaire-modified (SEQ-M), Cultural Identification Scale (CIS), and Recent Negative Life Events (RNLI) measures for a correlational analysis.
The study found influential evidence supporting self-efficacy is strongly correlated with lower depressive symptoms. Specifically, the study found academic self-efficacy, social self-efficacy, negative influences self-efficacy, and experiential self-efficacy as influential factors to decrease depressive symptoms.
Read more about this study: The Relation between Self-Efficacy, Stressful Life Events, and Depressive Symptoms among Northern Plains American Indian Youth
Helped design, develop, and implement a treatment program for managing chronic pain
Dan Smith, LPC
March 2016 - August 2018
Evidence-Based Program Development / Team Leadership / Treatment Manual Development / Patient Workbook Development
The Pain Rehabilitation Program (PRP) is an interdisciplinary chronic pain rehabilitation program designed to help clients return to a quality of life without medical or medication intervention. The program consists of Evidence-Based Practices from Licensed Counselors, Occupational Therapists, Physical Therapists, Biofeedback Technicians, Yoga Therapists, and Acupuncturists.
The program follows a Clubhouse Model with the importance of building a community and support network. The program is split into cohorts that follow set schedules depending on which timeblock works best for them. For example, a cohort on a Tuesday and Thursday morning would attend classes, support groups, therapeutic yoga, and community acupuncture together. Individual services were also offered with licensed counselors. The individual pain management counseling used an ACT and CBT framework to help clients accept their current pain and find solutions to living with pain (opposed to fighting their pain).
As the Team Lead of the Portland PRP program, I acted as manager, program development and implementation, coordinating schedules, client intake, liason to referring doctors, and ran clinical consultation groups. In addition, I provided ongoing individual therapy, taught two classes a day, and ran support group.
From Portland PRP's inception, I dedicated time to building the program. From designing the clinical content in the workbook to executing new clinical practices per cohort, I joined in the program development. The program started slow and had little traction with referring doctors. This led to developing a marketing strategy. I hosted luncheons, traveled to all referring doctor's offices to discuss the program, built marketing materials, and developed a warm-handoff strategy with engaged referring doctors.
Developing the curriculum manual and client workbook involved leading the team to coordinate their treatment plans together to design an engaging, easy to digest, and informative model built for different learning styles. In addtion, developing graphics and infographics to help facilitate learning in each class. As time progressed, the clinical manual and workbook grew to an 8-week model that is currently used today.
The workbook followed the clinical manual. Each class involved clients to flip to different chapters in the workbook to follow along with. In addition, the workbook included homework assignments that involved insight driven CBT and ACT work. Assignments were then discussed the following treatment day in class or in individual sessions.
The Portland PRP was established in tandem with the Vancouver PRP. Progressive Rehabilitation Associates headquarters is in Portland and housed the Portland PRP, Brain Injury Rehabilitation Center (now called Comprehensive Brain and Pain Program), and the Pain Program (a workers compensation program). Due to the limited space at the Portland office, Portland PRP merged with Vancouver PRP. This gave the opportunity to grow the programs together and increase the catchment area for potential clients.
Throughout the program, assessments on client satisfaction, reduction in pain medication, reduction in ER visits, sleep quality, and overall pain reduction was assessed. Outcomes data showed 72% of clients reduced or eliminated pain medication, 77% of clients eliminated emergency room visits related to their chronic pain, 56% of clients improved their sleep quality, and 56% of clients reduced their own overall pain levels without medical or medication intervention. The outcomes data was presented at national conferences by Greg Smith, PhD (Founder) and curriculum was published. Currently, the program continues to grow and adapting to an online virtual model.
Designed, developed, deployed, and generated content for a travel website including travel guides, blog posts, and videos.
Dan Smith
Aug 2018 - Sept 2019
HUGO / HTML5 / CSS3 / Netlify / Adobe Photoshop / Final Cut Pro
"There is, however, this consolation to the most way-worn traveler, upon the dustiest road, that the path his feet describe is so perfectly symbolical of human life"
- Henry David Thoreau
During a 13 month sabbatical, I traveled with my wife through India, Nepal, Taiwan, Saipan, SE Asia, Spain, Morocco, Portugal, Switzerland, France, SE Europe, and the Czech Republic. During this time, I kept an up to date blog that included unique travel guides, travel videos, and showcased my wife's photography. Thorove is the combination of Henry David Thoreau and Rove
The website was first built on a WordPress. I found WordPress to be clunky and time consuming so I switched to Wix for the first year using their introductory rate while we traveled. While generating content, I was also learning basic website coding. Towards the end of the first year subscription with Wix, I converted the website to a static website using Hugo, a static site generator. This was my first attempt at using Hugo and applying basic coding skills.
Throughout the trip, I dedicated time to produce unique travel guides around the world. Guides such as 17 Day Annapurna Circuit Trek Guide detailed a buyers guide, GPS track, and day to day guide inlcuding logistics. The guide was shared on different social media groups that generated a traffic increase after one week.
Every guide created increased the sites user base. Using Google Analytics, I coordinated social media campaigns on Facebook and Instagram at high traffic social media times. This created a cross-platform marketing strategy that grew the website. As time progressed, the site naturally generated it's own traffic with every new post from any category on the site.
Follow these links to see examples of travel guides: Northern Vietnam Motorbike Guide, 17 Day Annapurna Circuit Trek Guide, Angkor Wat Bike Guide.
The travel blog was a straight forward blog. 17 blog posts in every location visited. The posts started as an update for friends and family, however as time progressed and the site grew in traffic, the posts pivoted to target other travellers and inspire future travellers. Each post was written in tandem with a travel video. Each post includes photography and an end video.
Using Google Analytics, the blog posts were also strategically posted around target dates and times. Posts that were linked to guides tended to generate more traffic. In addition, posts with videos that had higher view counts on YouTube tended to show an increase in traffic.
Follow these links to see examples of travel blog posts: Adventuring in Laos, Two Months in Vietnam, Dalmatian Waters to the Balkan Peaks.
As another side project, I wanted to learn how to make and edit travel videos on every country we visited. Each video is shot with a GoPro because it was the easiest to travel with and edited in Final Cut Pro. I experimented with different filming and editing strategies in each video.
Videos were posted on YouTube to generate cross-platform traffic and conserve server space. The videos were posted at the end of each blog post and shared on social media (i.e. Instagram and Facebook).
Follow these links to see examples of travel videos: Jalan Jalan, 瑞秋去台湾 - Rachael Goes Taiwan, Portuguese Way - Camino de Santiago.
This was my first experience building a website. It was a crash course in a basic understanding of HTML/CSS coding, layouts, and best SEO practices. It was an iterative process and included 4 redesigns. As I learned more about web design and development, I also learned about data and analytics. I learned how to utilize Google Analytics and Google Console for best search results. I learned Instagram Business profiles and how to utilize insights for strategic social media marketing campaigns. With every new skill opened doors to how much I didn't understand and wanted to learn more about.
The most important learning experience was an existential realization about my career path and how much I enjoyed building something digital. It was my first taste in the creative digital world of website design and development that led to learning UX and Product Design. As cliché as it sounds, taking a year off to travel and dedicate time to these new projects made a lasting impact on me. When I returned to the States, I felt sure in my pivot to learn and build digital products geared to making a positive impact. I still felt a draw to mental health but in tandem with building digital products felt like the obvious path that was exciting to pursue.
Note: The fourth rebuild of the site was intended for archival purposes. Although the site is live, it is in need of an overhaul. The site has a Lighthouse Performance score of 31 so, yes, it needs to be rebuilt again. With that said...
Consultant with Progressive Rehabilitation Associates (PRA) helping the company pivot during the COVID-19 pandemic to a digital model.
Dan Smith
March 2020
Digital Program Conversion / Marketing Strategy and Assets / Website Design and Development / Learning Management Systems (LMS)
In March 2020 at the beginning of the COVID-19 pandemic, Progressive Rehabilitation Associates did what majority of clinics did; furloughed up to 80% of staff. This led to company panic and a need to pivot if the company were to survive. As a previous employee and team lead, I volunteered time to brainstorm ideas and develop actionable steps to rebuilding. With the staff leftover, PRA began developing new, virtual models of the acquired brain injury and chronic pain rehabilitation programs.
As time progressed, I joined with other staff to help develop video resources for clients, help convert and design an LMS version of their Pain Rehabilitation Program, and develop marketing material for the new hybrid brain injury program. Eventually, PRA was able to bring back all of the furloughed staff and resume treatment services under the new hybrid model.
I continue to volunteer my time with PRA when they need me. PRA is still developing their online Pain Rehabilitation Program LMS and recovering referral sources from the beginning of the pandemic.
Design meets Evidence-Based Practices. Specializing in mental health product design.
Linkedin : Profile
City : Portland, OR
Mail : Contact Me
Degree : Master
Certificate : UI/UX Design - CalArts
License : Licensed Professional Counselor (LPC)
As a UX and Product Designer with a background in mental health, my expertise adapt clinically proven healthy behavior changes with engaging digital platforms. Focusing on behavior as a medium, studying how people use digital platforms and what keeps people engaged as a means of creating healthy change in individuals. I provide over 10 years of direct clinical work as a therapist, creativity in designing digital products across platforms, and technical understanding of full-product life cycles.
With a second bachelors degree and experience in business management, I’ve developed a consultation practice working with mental and behavioral health clinics. From developing clinical programs to outreach in marketing, I have experience building clinical programs from the ground up. In addition, healthy workplace and equity and inclusion is a core stance I take in creating diverse and innovative team environments.
User-centric design models, full product life-cycle design, research, iterations, wireframing, prototyping.
Over 10 years experience, individual and group services, eclectic modalities, telehealth and in person, managerial experience, program development experience.
Design and coding experience, HTML, CSS, Bootstrap, CMS, asset production.
Digital marketing, strategy and competition, hiring, clinical program development, clinical program implementation, clinical management and supervision.
" Dan is knowledgable and dedicated. He is always accessible and has answered my questions thoroughly and thoughtfully. With his help and expertise I have become a more confident! "
"Dan has been an incredible source of help during my career transition. His feedback is always constructive and extremely valuable in helping me compete in the online career-search landscape. Not only is he knowledgable, but also easy to get along with. He takes an individual interest in my progress and caters his advice to my specific needs. I'd highly recommend him for any team."
Copyright Dan Smith© 2020.