Client: Seminole Hospital District
Agency: Standard Beagle Studio
Launch date: June 2016
Seminole Hospital District was going through a major renovation and expanding to compete with the larger surrounding towns in the West Texas area. Due to this major renovation, they decided they also wanted a redesign of their website to also show the quality of their newly renovated hospital. They hadn’t re-done the website in several years, so it was very outdated and the client and users had several problems they needed to solve. Some of those problems included irrelevant and outdated information on the website, all of the doctors weren’t listed in an easy place to find and were not well organized, there was a serious information architecture issue, and the job application process needed to be more seamless.
Design Part 1 – Style Guide
Seminole wanted a clean and modern feel to their site, which was the design approach I kept in mind for the look and feel of the site and when designing the style guide. There was also several icons that would be used throughout the design of the site, so I showed what icon types were possible to use as well.
The UX Process – User Research and User Personas
My team and I at Standard Beagle began by doing user research. We did a competitive analysis of other hospital websites to see what other hospitals were doing well in comparison. Then, we had two members of the team travel to West Texas to get a feel for the community and meet with the clients. They held interviews with staff and administration to figure out their pain points, especially when it came to their current website. I also came up with user personas so we could feel the empathy for these users throughout the design process. UX Design should be human-centered, so we wanted to figure out the best way to make the site user-friendly with different functionality than the current site offered.
After performing user research we began to create user stories based upon our research of the market, the pain points of the hospital staff. We created index cards of the user stories in order to organize them based on priorities of low, medium, high, and backlog items. Once we had these organized according to priorities, our project manager was able to create the tasks for the project.
Content Inventory and Information Architecture Design
Next I went through the content of the entire site and made a content inventory for the client to review and make changes accordingly. From there, I designed the information architecture of the new site and the sitemap by doing a card sort. Once I finished I brought in a few of my team members to review the cards and iterated through multiple rounds of sorting.
Sketches – Design Part 2
Once the information architecture was reviewed and approved by the client I was able to start sketching out multiple page designs for the site for desktop and mobile. Sketching out for more than one screen size is so important because often times mobile is the first place that someone looks at a website.
Wireframes – Design Part 3
The sketches were reviewed with my team for feedback and from there I was able to create wireframes on Balsamiq mockups to give a better visual guide. The wireframes show the skeletal structure of the site in a low fidelity mockup. Throughout the entire process, I got feedback from my team as well as the client to ensure I was on the right path. For the job application, I had to design the user interaction from page to page and how they would navigate through the process. I researched what other hospitals were doing and decided with the client based on current pain points how the application should be designed. We also were able to provide mobile designs for the client, because it was very important that the website was mobile responsive.
Hi-fidelity Mockups – Design Part 4
Once the wireframes were approved it was time for the high fidelity mockups to more closely match the visual and user interaction design of the final product. This gave the client a better idea of what the final product of the website would look like. As I designed and got the designs approved I was able to have the developers work on the site, which helped with having a great design and development collaboration for the project. The second high fidelity is before the client decided they wanted menu design changes, but this is what we originally wanted for the menu to make it easier to navigate for the user. All high fidelity designs were done on Photoshop.
We ended up iterating some of the design after it was developed but were able to easily do so, since the changes were minor. The developers I worked with built the site custom on WordPress, and were able to do a final documentation and training with the client on how to use the site. I find it very helpful to do this with clients so they don’t have to come back to you with minor things like content changes.
I delivered a clean and modern design to the client with the help of my team and in turn had very happy clients with an increase in traffic to their website after the site was launched.