DogCity is a local business based in West Seattle offering dog grooming, daycare, and boarding services.
DogCity Seattle
teammates
- Yuan Zhuang
- Mike Northcutt
- Tongfang Sun
- Aastha Malhotra
-
project
As part of the curriculum of HCDE 537 - User Centered Web Design my group approached DogCity and offered to completely redesign their website.
Over the course of ten weeks we conducted user research, client consultations, and iterative design to:
- ● Determine business goals
- ● Understand site users and identify customer needs
- ● Test and validate assumptions
- ● Define key focus areas where measurable improvements could be made
- ● Deliver a fully-functional redesigned website, along with strategy suggestions and research findings
-
process
During our initial research we identified several large usability issues with the site:
- ● Poor information architecture
- ● Key information is hidden within the site
- ● Text heavy pages result in heavy cognitive load
- ● Information is fragmented and stove-piped
- ● Design is outdated and visual styles are inconsistent
Informed by our initial research, we worked with DogCity's owner to identify our project goals. Eventually we settled on four primary goals. First was to seek strategies and design solutions to potentially increase grooming sales. Second, decrease the number of phone inquiries regarding pricing. Third was to identify user pain points, and fourth, improve first impression and overall feel of site.
-
user research
Our user research phase consisted of:
- ● Semi-structured interviews with staff and customers
- ● Market analysis
- ● Online survey (n=40)
- ● Usability tests (n=4)
- ● Competitive analysis
- ● Review of customer feedback (yelp.com)
- ● Email survey (image analysis)
From the data we gathered we were able to extrapolate several key user needs for the site. Users needed clearer pricing information, more images of the facility, easier site navigation, and they wanted in general to get a better understanding of the facility and services offered.
“It’s not easy to find… I don’t see where they talk about required vaccines.”
-P3
This research led directly into the development of our primary and secondary personas.
-
information architecture & conent analysis
From our initial research it was obvious that the site would require a redesigned information architecture (IA). The first step was to perform a content audit of what was already there. Using a spreadsheet, the written content of each page was separated out by URL, content type, destination, etc.
To help us determine our IA we conducted a moderated open cardsort with thirteen participants. This gave us a great starting point, but the data for one area was inconclusive resulting in different opinions about the need for a contact page link in the main navigation. Half of the team wanted a simpler navigation menu structure and half of the team felt that having a contact page link was a necessary affordance. To solve this, we created a TreeJack study and tested with several participants. After the study we concluded that a contact link in the top navigation was not required, and that displaying contact information prominently in the page footer and under the about section offered sufficient discoverability.
-
design
Since this was a group project we started our design process by having each team member create individual wireframes of three different web pages. We then came together and agreed upon the preferred layouts. New wireframes were sketched collaboratively and then digitized using Figma.
Before beginning additional design work, our group used research data and owner input to craft the brand tenets that would guide our design choices throughout the rest of the project. It was important to the client that we retain certain elements of their existing branding, so the logo and color palettes were carried over into the redesign. We established clear typographic hierarchies, and I did the initial design on a new bespoke icon set to replace the generic and pixelated icons currently in use.
We began creating our prototype with WIX, a cloud-based WYSIWYG editor. We initially wanted to use an actual prototyping software like Atomic, JustInMind, or Axure, but with our goal of delivering a fully functional website and not just a mockup, it was decided that it would be more efficient to prototype and iterate in WIX. Our client was also using WIX for their current website, and we felt that delivering a turn-key solution that could be easily implemented by the client was the best solution.
-
the final stretch
With our high fidelity prototype in hand we began a final round of A/B usability testing and noticed a marked improvement in time on task. Armed with the usability test data and feedback from our instructors and other industry professionals we made a final round of iterations which included:
- ● Removal of buttons and text in image carousel
- ● Changed the placement of CTA links
- ● Simplified IA and menu structure
- ● Further reduced the volume of text sitewide
- ● Increased cross linking between pages
One of the last tasks we completed was to do a brand impression survey and compare the results of the redesign with the original website. When we asked potential customers about their impressions of the original DogCity site the most frequent responses were: strict, concerned, unfriendly, and untrustworthy. Post redesign the brand impression responses completely changed for the better to: affordable, fun, caring, credible and dog-centric.
-
wrap up
All of our data, as well as access to our redesigned site was provided to the client on 6/1/2017.
**As of 8/1/2018 I am working directly with the client to finish and launch the new DogCity website.**