Recent Projects
Following are a few case studies from projects I've recently completed. This section will be updated regularly with new projects so please visit often.
Westside German Shepherd Rescue
Enabling Greater Outreach to Adopting Families through a
Mobile-first Digital Design Solution
​
THE DESIGN TEAM
The design team consisted of Lacy Omon, Steph Spiegel, Kevin Li and me. My role on the team played to my strengths of management, analysis and design and included setting up the initial project plan and schedule; heuristic analyses; card sorting; information architecture; wireframe design; user testing and prototyping.
OVERVIEW
Westside German Shepherd Rescue (WGSR) is a non-profit animal shelter in Los Angeles, California, with the mission to rescue German Shepherds from high-kill shelters and from homes no longer able to adequately care for the dogs, and place them in well-qualified homes. WGSR is able to place dogs throughout the United States and Canada, tests their dogs for compatibility with other dogs and with cats, uses volunteer fostering families to get younger dogs used to being in homes, and has alliances with trainers to assist with behavioral issues that may arise. Since their inception in 2002, WGSR has successfully saved more than 13,000 dogs.
Westside German Shepherd Rescue redesigned home page. Click image to go to prototype.
DEFINING THE PROBLEM
Our first step was to gain a better understanding of the shelter: what was its stated mission, how was it performing, and what issues might there be. Since this was a conceptual project without client involvement, much of the information had to be inferred from the shelter’s website. WGSR’s mission is included in the header of several (but not all) of the site’s pages, sandwiched between the logo banner and the global navigation. And on the FAQ page was a spreadsheet tallying the number of dogs brought into the shelter vs. dogs adopted out which, despite WGSR’s efforts, indicated an overall increase in the year-to-year number of dogs in the shelter. Further online research through the American Humane Society, the ASPCA and IBIS World’s 2020 report on the business of animal shelters, convinced the team that increasing the number of adoptions would best serve the mission of the shelter by:
​
-
Reducing the overhead costs of the shelter (food, veterinary services, cleaning, utilities, etc.);
-
Reducing the need for volunteers and donors to assist with and pay for the maintenance of the dogs in the short term, and care for more dogs with equal or greater volunteerism and donations over the long term;
-
Enabling the shelter to rescue more dogs;
-
Improving the reputation of the shelter as an efficient and worthwhile charity; and,
-
Enlarging the network of families and individuals associated with the shelter, increasing the likelihood of word-of-mouth referrals for adoptions, donors and volunteers.
With the adopter in mind, the team set out to gather more information on potential users of the site, competitors, and on the WGSR website itself. The design team first focused on understanding the motivations and potential concerns of the people most likely to intersect with an animal shelter. A short, five-minute survey was created and distributed online to find qualified participants for interviews. The primary intent of the survey was to find persons who had previously adopted household pets (as opposed to large animals such as horses) from an animal shelter or were actively considering adoption of an animal. Secondarily, we were looking for people who had donated to or volunteered with an animal shelter so as to better understand their motivations and concerns. While we waited for responses to the survey, we proceeded with crafting interview questions, doing competitive and comparative analyses, and doing a heuristic analysis of WGSR’s website.
​
HEURISTIC ANALYSIS & INFORMATION ARCHITECTURE
While the team worked on interviews and competitive analyses, I conducted a heuristic analysis of the existing site based on industry standards of Learnability, Efficiency, Memorability, Error Management, and Satisfaction (LEMErS). My research uncovered a number of elements that could be improved, most of which fell into three categories.
​
-
Inconsistency: The appearance of the various components on the site is inconsistent, which, beyond being visually discordant, can make visitors uncomfortable with the site.
-
Lack of Hierarchy: Compounding the visual inconsistencies is a lack of hierarchy. From our understanding of WGSR’s business, we hypothesize that finding people to adopt dogs is the primary function of the site, but that’s not readily apparent based on the layout of the information and navigation on the website: Dogs up for adoption are not shown on the home page, and are buried below a couple screens of text on the “Available Dogs” page; and the application to adopt is buried below that. From the shelter’s perspective, this layout may make sense: Welcome people to Westside, explain the adoption process basics, then introduce the dogs available for adoption. But from the user’s perspective, the lede has been buried.
-
Ontology: A number of the terms and titles used on the site are confusing. Subsequent testing with dog lovers who have not been to WGSR’s website indicated that, while familiar to the shelter, elements such as “Tails of Joy,” “Courtesy Postings,” and “Your Life’s Passion” need further explanation.
Heuristic Analysis: Click image to see enlarged file.
COMPARATIVE ANALYSIS
When comparing WGSR's website to local and regional competitors, and organizations with comparable business models, a few items stood out for the best sites:
​
-
Navigation is clear and consistent.
-
Images of the animals (or people, for non-shelter charitable websites) that are being helped by the organization are placed in highly visible locations.
-
Card elements combining images and text summaries were effectively used to provide quick overviews of information.
-
The mission statement of the charity was prominently placed on the home page to illustrate the importance of the organization's values and to appeal to visitors.
-
A consistency of the organization's brand, through color, typography and layout, was apparent.
​
INTERVIEWS
The intent of the interviews was to better understand the highlights and pain points of the typical companion animal adoption process, and to discover unanticipated insights where possible. Of the persons we interviewed, approximately 65% had successfully adopted an animal from a shelter, another 25% had adopted through avenues other than shelters, and 10% had been unsuccessful in their adoption attempt.
The interviews brought to our attention three items of interest:
-
The adoption process is stressful, particularly after the hopeful adopter finds an animal they want. Waiting for the applications to be processed without clear knowledge of the progress was, for many, the worst part of the adoption.
-
More than a third of persons we interviewed would not be eligible to adopt from WGSR given their policy of adopting only to households with a back yard.
-
Finding an animal suitable for the potential adopter's particular situation was key.
​
​
Affinity Map Click image to see enlarged file.
Journey Map Click image to see enlarged file.
THE PRIMARY PERSONA
The design team developed a persona for the primary user based on interviews with individuals who had intersected with animal shelters previously, either as adopters, donors or volunteers. The persona developed included:
​
Name: Ida Dopte
Tagline: “A dog would make our family complete.”
Bio/Demographics:
-
Lives in a suburban home with a backyard
-
Has a family with young kids
-
Works full-time (from home during COVID-19)
-
Prior dog owner
Behaviors:
-
Cares for the family and animals, especially dogs
-
Doesn’t believe or support euthanasia of animals
-
Wants to provide a safe and loving home for a dog
-
Not willing to support organizations associated with puppy mills.
-
Willing to pay for a trained dog by professional
-
Makes careful and informed decisions
Goals and needs:
-
Adopt a dog that will fit her family’s needs
-
Find a children-friendly, house-trained dog.
-
Have an informative adoption process with good service and advice
-
Wants to provide the dog with a family
PROBLEM STATEMENT
Ida, who is working full-time from home and is a mother of two young children, is in search of a dog to adopt in the Los Angeles region. Due to her beliefs regarding puppy mills and breeders, she prefers to find a dog at a shelter. She finds browsing on her smartphone to be the best manner for her research of the various shelters due to its mobility, and wants to see the available dogs and better understand the shelter’s adoption policies and procedures. Any dog she considers must be good with children and a house-trained dog would be a plus.
CONCEPT STATEMENT
WGSR needs to bolster their website to capture more adopters by making it more user-friendly for smartphones, clarifying the navigation, including the addition of faceted (filtering) navigation; and prioritizing the dogs available for adoption. The adoption process should include greater clarity and, if possible, online status updates to ease adopters minds as they wait for approval. And, as an audacious goal expanding WGSR's stated mission to get dogs out of high-kill shelters, WGSR should consider adding resources for those adopters who do not meet certain criteria for adopting a German Shepherd (such as not having a suitable back yard) but otherwise would provide a good home for a dog.
​
INITIAL WIREFRAMES
Building on the research conducted by the design team, I began wire framing using Figma. The decision had been made to do a mobile-first website solution which would be easier to scale up to a desktop site. WGSR's current site does not scale well for mobile, and would not work for our persona who is likely to start her search on mobile before moving to a laptop or tablet to do the application paperwork. The initial wireframes included thoughts on how to bring the dogs available for adoption to the forefront of the site, an improved information architecture based on my card sorts, and highlighted the shelter's mission to facilitate users' connection with WGSR.
​
​
Holly Jean Greene portfolio/website homepage, click on image to go to site.
DEFINING THE PROBLEM
Holly had an existing website to showcase her body of work, however, my interview with her identified several items with which she was concerned, including:
​
-
Improving the editability of the website;
-
Improving the legibility of the website for end users;
-
Ensuring her website was mobile-friendly; and,
-
Improving the appearance of the website.
Digging further, we were able to better define the bases of her concerns and outline what a successful portfolio would entail.
​
WEBSITE EDITABILITY
Holly's existing website lagged behind in displaying her most current work in part because it was difficult to reorder and add new projects to the portfolio pages. She had built the original website herself using the Wix suite of tools and platform to host the site, but did not take the need for future modifications into account during the build. By moving each of her projects to an individual "strip" (a horizontal band that can contain and organize text, images, buttons and other media), we were able to simplify the process of adding, deleting and moving projects, ultimately enabling her website to be more current.
WEBSITE LEGIBILITY
The target end user for Holly is hiring managers and recruiters, the gatekeepers to her next contract. Hiring managers and recruiters are notoriously short on time, sometimes spending as little as six to seven seconds looking at the resumes coming across their desks. Reviewing Holly's original website was problematic in that there was too much information amassed on a single page in her site, making it difficult to find specific projects relevant to the recruiter's open position and her next interview. The strips used to improve the editability of her site also improved the legibility somewhat by providing a differentiated background between each project, but we opted to take the design a step further. Wix does not provide the tools to create accordion menus, however, they do have a standardized 'FAQ' template which is an accordion-style menu. I was able to reconfigure the FAQ template to allow each of Holly's projects to exist within the accordion menu. This enables the time constrained recruiter to quickly get a summary of all of Holly's work, find the type of project that is most relevant to the position they are looking to fill, read an overview of the project itself, and, if desired, click on the project image to see samples.
Holly Jean Greene Website
Differentiating My Client from the Competition through Distinctive Design and Improved Access to their Work Samples
Holly Green is an Instructional Designer who works mostly in the contract world, giving her a wide variety of project types to display and requiring her to keep her website fresh, updated with her latest project samples, and accessible on both mobile and desktop. Holly provided to me a color palette and a list preferred fonts, along with access to her existing portfolio on Wix to use as a starting point. The end result is a website that is unique to Holly, readily modifiable as she adds projects, and mobile-friendly.
​
​
_edited.jpg)
Readily accessible summaries for each project.
Clicking on images opens samples of each project.
Accordion menus provide project overviews.
Screenshot of portfolio page
Screenshot of mobile home page
​
IMPROVED APPEARANCE
Given the level of competition in the profession of Instructional Design, Holly wanted a website that would allow her to stand out favorably in the contract market. She provided to me several color palettes and font pairings that she favored from which I developed multiple variations of her home page and of a typical page template to match for her review. I started with hand sketches of the concepts as a means of quickly conveying ideas, from which we selected four options to prototype in Figma. Once in Figma, I created medium and high fidelity prototypes, checking in with Holly frequently to ensure the designs were to her liking. The final design utilized a collection of overlapping shapes that defined zones for text with a subtle background image of an office to add texture to the composition. The home page was intentionally unique from the standardized pages that followed, which was not the most simple option to implement in Wix given their template system but created the eye-catching appearance Holly was looking for. Click here to visit Holly's full website.
​
MOBILE-FRIENDLY SOLUTION
One of Holly's requirements for her website was to ensure that it functioned equally well both in desktop and mobile formats. Using the design Holly had approved for the home page of her website, I was able to create a complementary mobile version with some simple edits to the layout and menu appearance. Below is a screen capture of the mobile site design.
Aframerican Bookstore
Enabling a local minority-owned business to reach a larger audience through improvements to its website’s functionality.
Aframerican Bookstore is a Black owned business in North Omaha, Nebraska, with the self-described mission to provide, “...conscious-raising literature about issues, history and religion, with the belief that, “...a people who know themselves...do better about themselves.” Their existing website was selected for a conceptual redesign - the bookstore did not participate in the project - using a persona crafted by the instructors to reflect a real world shopper typology.
The purpose of this two-week sprint was to:
-
Build upon our skills in ascertaining user needs;
-
Introduce heuristic analysis as applied to web design;
-
Introduce competitive and comparative analysis methods and principles; and,
-
Introduce the basics of information architecture.
The problem we were presented with was to redesign the business’s website to better respond to the proposed user persona. My approach started with getting to know the business better. Had the owners been involved in the project, I would have conducted interviews with them to gain insight into their goals and priorities, asked them to connect me with current customers to better understand the business’s perceived strengths and weaknesses, and asked about the maintenance process and budget for the current website. As it was, I had to make do with the information available in the website itself, and shoppers’ reviews on Google, Yelp, and similar sites. From these sources I was able to infer that Aframerican Bookstore is well regarded in their community: They have received glowing reviews, there are mentions of the owners’ commitment to education and mentoring, and they speak of their passion for bringing the history and culture of African Americans to the forefront.
Given the community-centric nature of the bookstore, the store and its owners being held in high regard, and the likelihood that the site is maintained by the owner or one of the staff on a minimal budget; my approach to the redesign was one of ‘do-no-harm’. The refinements needed to further their mission and generate more revenue towards that end without alienating current patrons. My secondary focus would be to bring attention to the items and services they provide beyond books.
The customer persona with which I was presented described a “Spontaneous Selector”. As written, this user is motivated by:
-
Shopping locally and online;
-
Picking items up curbside, or having them delivered expediently;
-
Finding items that are not trendy or on a best seller list;
-
Having a quick and painless checkout process; and, above all,
-
Discovering unique and unexpected items.
​
LANGUINE
A conceptual mobile application to build confidence in language skills for English as a second language (ESL) speakers.
​
OVERVIEW
Languine is a conceptual design for a mobile-specific application for the purpose of building users' confidence in their language skills. Intended to fill the gap between traditional language learning applications and real-world interactions, Languine would allow users to monitor and review conversations they have throughout the day and receive feedback from the application regarding opportunities for improvement and reinforcement of those elements in the conversations that went well.
​
UNDERSTANDING THE PROBLEM
The need for Languine became apparent after interviews with Xiaoqing (name changed for privacy), a young woman who had immigrated from China six years prior. Xiaoqing expressed concern that her difficulty with the English language was preventing her from finding rewarding career opportunities, and made new relationships difficult. It was clear from my discussions with Xiaoqing that her vocabulary was strong, and her grammar and pronunciation were not preventing her from expressing herself clearly. So what was holding her back? Further discussion revealed that Xiaoqing hesitated to speak up in conversations, in the classroom and in public, because of her perception of her language skills. Xiaoqing lacked the appropriate confidence in her skills.
​