![FireShot Capture 18 - Spencer Psychology – of Bloomington, Indiana - https___spencerpsychology.com_ FireShot Capture 18 - Spencer Psychology – of Bloomington, Indiana - https___spencerpsychology.com_](https://i0.wp.com/penceldesign.com/wp-content/uploads/2017/01/FireShot-Capture-18-Spencer-Psychology-–-of-Bloomington-Indiana-https___spencerpsychology.com_.png?w=714&h=459&ssl=1)
![File Jan 26, 2 43 11 PM File Jan 26, 2 43 11 PM](https://i0.wp.com/penceldesign.com/wp-content/uploads/2017/01/File-Jan-26-2-43-11-PM.png?w=258&h=459&ssl=1)
Design Roles
- Brand development
- UI design
- Front-end development
- Print design
The Process
Spencer Psychology was gearing up to open a new location and add new staff. With so many changes needed to their website, it seemed like a good time to reevaluate the user experience and do a redesign. PenceLdesign updated the Spencer Psychology brand, transformed their website, and as a finishing touch, redesigned the business cards to match the updated brand look.
1Site Audit
The old site was not mobile-friendly, and while loaded with information, weighed in at a clunky 26 pages. The appointment scheduling process was disjointed and confusing.The web typography was inconsistent with the business’s print materials.
2Mood Boards
In the early stages of the redesign, we explored options for web typography, color palettes, and imagery through iterative mood boarding.
![Screen Shot 2017-01-15 at 3.57.19 PM Screen Shot 2017-01-15 at 3.57.19 PM](https://i0.wp.com/penceldesign.com/wp-content/uploads/2017/01/Screen-Shot-2017-01-15-at-3.57.19-PM.png?w=650&h=571&ssl=1)
![Screen Shot 2017-01-15 at 3.58.43 PM Screen Shot 2017-01-15 at 3.58.43 PM](https://i0.wp.com/penceldesign.com/wp-content/uploads/2017/01/Screen-Shot-2017-01-15-at-3.58.43-PM.png?w=322&h=284&ssl=1)
![Screen Shot 2017-01-15 at 3.59.06 PM Screen Shot 2017-01-15 at 3.59.06 PM](https://i0.wp.com/penceldesign.com/wp-content/uploads/2017/01/Screen-Shot-2017-01-15-at-3.59.06-PM.png?w=322&h=283&ssl=1)
![Screen Shot 2017-01-15 at 3.57.35 PM Screen Shot 2017-01-15 at 3.57.35 PM](https://i0.wp.com/penceldesign.com/wp-content/uploads/2017/01/Screen-Shot-2017-01-15-at-3.57.35-PM.png?w=490&h=426&ssl=1)
![Screen Shot 2017-01-15 at 3.59.28 PM Screen Shot 2017-01-15 at 3.59.28 PM](https://i0.wp.com/penceldesign.com/wp-content/uploads/2017/01/Screen-Shot-2017-01-15-at-3.59.28-PM.png?w=482&h=426&ssl=1)
3Color & Typography
In the battle of the brands, color palette 1 was the final winner. We chose Google font Monteserrat for its similarity to existing Spencer Psychology print materials.
![SpencerPsychology-ColorPalettes SpencerPsychology-ColorPalettes](https://i0.wp.com/penceldesign.com/wp-content/uploads/2017/01/SpencerPsychology-ColorPalettes.jpg?w=378&h=495&ssl=1)
![Screen Shot 2017-01-27 at 10.28.52 AM Screen Shot 2017-01-27 at 10.28.52 AM](https://i0.wp.com/penceldesign.com/wp-content/uploads/2017/01/Screen-Shot-2017-01-27-at-10.28.52-AM.png?w=594&h=495&ssl=1)
4Information Architecture
The site was completely transformed, with new navigation, a restructured appointment scheduling experience, individual bios for each staff member featuring interactive sorting by each practitioner’s specialties and modalities, and tailored storytelling from page to page.
![FireShot Capture 28 - Jennifer Spencer, Ph.D HSPP_ - https___spencerpsychology.com_jennifer-spencer_ FireShot Capture 28 - Jennifer Spencer, Ph.D HSPP_ - https___spencerpsychology.com_jennifer-spencer_](https://i0.wp.com/penceldesign.com/wp-content/uploads/2017/01/FireShot-Capture-28-Jennifer-Spencer-Ph.D-HSPP_-https___spencerpsychology.com_jennifer-spencer_.png?w=435&h=694&ssl=1)
![FireShot Capture 11 - Meet Our Staff – Spencer Psychology - https___spencerpsychology.com_staff_ FireShot Capture 11 - Meet Our Staff – Spencer Psychology - https___spencerpsychology.com_staff_](https://i0.wp.com/penceldesign.com/wp-content/uploads/2017/01/FireShot-Capture-11-Meet-Our-Staff-–-Spencer-Psychology-https___spencerpsychology.com_staff_.png?w=537&h=345&ssl=1)
![FireShot Capture 9 - EMDR – Spencer Psychology - https___spencerpsychology.com_services_emdr_ FireShot Capture 9 - EMDR – Spencer Psychology - https___spencerpsychology.com_services_emdr_](https://i0.wp.com/penceldesign.com/wp-content/uploads/2017/01/FireShot-Capture-9-EMDR-–-Spencer-Psychology-https___spencerpsychology.com_services_emdr_.png?w=537&h=345&ssl=1)
5Responsive Design
You just have to see the fantastic responsive interface to believe it. Coded from a mobile-first perspective, it has a responsive menu, fast load times, smooth animations, and as a little icing, icons for iOS, Windows, and Android devices.