Redesigning a Website as a Team
I recently had the chance to work with a team to redesign and develop a website for a non-profit organization over the course of four months. This allowed me to further enhance my interpersonal skills as well as work for an actual client as part of my coursework.
Project Overview
I worked on a nine person team to redesign the website and create videos for the new site. Within the nine person team, there were three smaller teams each tasked with different aspects of the website redesign. One team created videos for the website while the other two teams handled design and development. I was primarily on the design team but I also helped out the development team because of how tasks were distributed.
Initial Kick-Off Meeting
Early in the project we met with the client to discuss the needs and goals for the site redesign. Ahead of time, the whole group examined the current website and we developed a list of questions to ask the client. During the meeting I took notes on the client’s remarks.
From this initial meeting we were able to begin creating a strategy for the website. The development and design team worked together to come up with a site map. At this time we also worked on drawing wireframes for some of the pages of the site.
Managing Collaboration Between Teams
We used two tools to share files and communicate with each other outside of our group’s meeting times. For communication and file sharing we used Base Camp. Once we had started to develop a prototype for the site, we also used Invision.
Invision proved to be better for sharing wireframes and surface comps. This was because we could easily replace a wireframe or surface comp with a new one so it wasn’t difficult to determine the most recent version of a file.
After the initial brainstorming and organization was done, it was time to start designing the individual pages of the site. Because this project was done in a class setting, creating the wireframes fell to the development team so that they could contribute to the project before they began coding the site.
I was moved over to this team temporarily to assist with the wireframes while the the other two designers worked on creating a surface comp for the landing page to establish the overall look of the site.
Wireframes Turned Out to Be a Headache
This part of the project turned out to be a challenge for us. The developers on the team each had different software for creating wireframes than I did. This made sharing elements of the page that needed to be consistent more difficult.
For example, we had to use a PNG image for the header and footer so that we could have a consistent viewing experience for the client when they used the prototyping tool, Invision. We would import these images into the different software programs that we each used.
This led to some issues with elements being off by a few pixels, creating a potentially jarring viewing experience for our client. That’s one reason why the footer looks so different from the rest of the page in the image above. We fixed that issue before presenting it to our client of course.
Hindsight is 20/20
In hindsight, it would have been better for the design team to do the wireframes because we all had the same software (Sketch) and we had more experience creating wireframes. Had we done it this way, we would have been able to get into developing a rapid prototype much sooner.
This would have allowed the developers to contribute their specialty of coding sooner and would have allowed us to do rapid prototypes instead of having to cram all of the development in at the last minute. Nevertheless, the development team (plus myself) divided up the web pages that we needed to do for the site and then we uploaded them to Invision.
Next Step: User Feedback
After the desktop and mobile wireframes were done, I moved back to the design team. They had created several versions of the landing page and we even went to the non-profit organization’s office to conduct a focus group with some of their patients—the actual users of the website.
Testing was tremendously helpful and should always be part of the budget.
We were able to gather a lot of insight into what worked well and what didn’t work well when it came to the verbiage and usability of our website prototype.
We took this feedback and made some changes to the landing page accordingly. The other two designers had already started creating surface comps from our wireframes and I was tasked with making surface comps for two of the remaining pages.
Making the Complex Simple
The biggest challenge I had to overcome on this project was the “Provider’s Page” as shown above. There are three primary categories on the page; Medical Providers, Dental Providers, and Medical Services. Within those three primary categories there are 34 sub-categories of specialty doctors such as cardiologists, dermatologists, and orthodontics. Within those categories there were over 200 names of medical providers.
To solve the problem of having way too many choices, I decided to use progressive disclosure to only show 3 doctors in each sub-category and include a “View More” button that leads to a pop-up window that displayed all of the practitioners in each respective doctor specialty.
I also chunked the information into cards. Each row has a maximum of 3 cards allowed. Laying everything out in a Pinterest style grid was a suggestion from a fellow designer on the team that I implemented, and it worked out really well.
Handing off to Development
We handed our surface comps off to the development team as we completed them. Within a few weeks we were ready to present the website to our client. Overall, she was pleased with the site. We had been conducting video meetings with her every week throughout the course of the project.
By receiving feedback from her early and often we were able to implement changes throughout the project and not just at the end. There were only a few minor changes to be made at the end. This is a much better way to do it.
As of writing, someone on the development team is working with the professor to publish the site.
*The Site is Now Live
(Edit: 7–26–18) — The site is now live and can be viewed at the following URL: https://www.utahchc.org/providers-network/
This URL is one of the specific pages I designed.
Post-Mortem
During this project, I had a chance to enhance my ability to communicate with others by sharing ideas and both giving and taking feedback. This has proved instrumental to my career as a designer. This class was an experimental one and we were the guinea pigs.
Ideally, we would have done rapid prototypes and have done a better job of letting students do their respective roles in regards to design and development.
The class has improved greatly for future students as a result of this first trial run and there is something to be said for adapting to the unknown.
Working with an actual client as opposed to just doing a school project for a grade has also helped my communication abilities. I find it to be rewarding to have delivered results that are benefiting people in our local community.
Russell Andlauer is a Digital Product Designer at DevSimplified and a UX Freelancer. He is also finishing up his Bachelor of Science degree at Utah Valley University in Interaction & Design. This article relates to the Digital Design Practicum course and is representative of the skills learned.
