Student Affairs: Web Redesigns
The Basics
Challenge
Utah Valley University's Student Affairs wants to unify and refresh its web content across all departments to ensure consistency in design and information accessibility for students, staff, and the community. Student Affairs has four main branches, each comprising multiple programs: Inclusive Excellence, Access & Outreach, Enrollment Management, and Student Development & Wellbeing, totaling 55 individual areas.
Team Roles
Jinny Valle —Web Developer and Project Lead
Shannen Angell — Copywriter
Michaela Brown — Web Designer
Tyler Mower — SEO Specialist
Tools
Microsoft Teams, Microsoft Word, Visio, Adobe XD, and Adobe Photoshop
Duration
Standard Timeframe for each Branch of Student Affairs: 2 months
All Projects Together: May 2023 to Current, 35 Branches of 55 accomplished
The Process
- Client Introduction(Led by Jinny Valle, involving all parties)
The team sends a chat group, sends a site questionnaire, and provides a process overview for clarity. During the kick-off meeting, they set goals to ensure accessibility and consistency. The focus remains on meeting content requirements and organizing information effectively.
2. Content Organization and Writing (Led by Shannen Angell, Tyler Mower, and the Client)
The site map organizes the website's structure to improve user experience and navigation. Existing content is gathered and revised to match the new site map, ensuring consistency and relevance. SEO briefs are incorporated into the content to optimize it for search engines.
3. Web Design (Led by Michaela Brown)
A layout is created without photos and then presented for approval. After approval, photos are added and edited using Photoshop. The final design, including images, is then approved before moving forward.
4. Web Development (Led by Jinny Valle)
The team builds the website, fixes issues, and prepares the site for deployment. Once everything is ready, the website is launched and accessible to the public.
Initial Contact with Client and Kick-Off Meeting
The client is contacted to initiate the process at the start of each Student Affairs website redesign. Using Microsoft Teams, all involved parties collaborate to update the website's content and appearance. The first posted comment explains the process the project will take.
The post outlines all the steps the team will take as the redesign progresses. First, a site map establishes the website's structure and navigation. Then, SEO content requirements are addressed to improve search engine visibility. Next, content creation is when the website's copy is written. Following that, web design focuses on creating an attractive and user-friendly interface. Finally, the website moves to the web staging phase after design approval.
A kick-off meeting sets the stage for the website redesign, focusing on core objectives like defining goals, content needs, and organizational structure. A provided questionnaire guides this discussion to ensure all essential aspects are covered. Attended by the developer, copywriter, designer, SEO specialist, and client, the hour-long meeting results in identifying content needs and organizing content for the site map.
Content Organization and Writing
Following the kick-off meeting, the content gathered is utilized to craft a site map. Card sorting categorizes content based on the client's requirements discussed earlier. The site map is constructed using Visio. Subsequently, the site map serves as a content outline, guiding the client in placing non-edited content into respective categories. Shannen Angell receives the content for rewriting and aligning it with web writing standards and SEO best practices. Client approval is necessary to ensure content alignment with project goals.
Web Design
Design commences after the client approves the content document. I adhere to the structure outlined in the content document, starting with the main navigation and the design predetermined. Subsequently, I design the remaining pages using placeholders instead of photos. Once the layout design is complete, the client provides feedback, and then pictures are added for final approval to move on to web staging.
The photos require editing to adhere to web best practices. I resize them to the appropriate dimensions, utilizing Photoshop's generative fill feature to adjust or remove elements as needed. After editing, I organize them into a folder and share the link with Jinny to access during website development.
I also created a style guide for all the assets consistently used within the redesign projects. This step is accomplished using Adobe XDs’ components feature. The designs live on an XD file called Student Affairs Template-components. Within XD, these components can be turned into a library from which you can pull your designs.
Web Development
After the design phase, development begins. Jinny Valle writes code to bring the design to life, implementing interactive elements, functionalities, and backend systems as needed. This stage involves Jinny building the website's structure, integrating content management systems (CMS), and ensuring responsiveness across different devices. The website then moves to the staging phase. Jinny deploys it to a staging environment and conducts final checks before the launch. Jinny reviews content, checks links, and ensures proper functionality across browsers and devices. With the website staged and ready, it's time for the final launch. Jinny configures the hosting environment, sets up domain settings, and deploys the finalized website version to the live server.
Outcomes
Final Words
This project taught me how to design and develop a website with an entire team. My previous experiences have all been chiefly individual endeavors where I am the sole person working towards completing a redesign project. This project started out that way, but with how seamless it has progressed, even with so many pages and sites to redesign, I wouldn’t want to work any other way.
To learn more about this project, continue reading the article titled “Student Affairs: Backlog Information.”
