Re-design
Ryerson Careers
Status: Finished, 2018
Project Type: Re-design
Role: Ideation, user research, graphic design, copy-writing
Software: Adobe Photoshop, Balsamiq, Invision, Github
Code: HTML, CSS, Javascript
The Project
Ryerson University has a wide range of academic focuses and services. As a result, there are many departments in need of students to fill positions. However, it can be difficult for Ryerson students to navigate through current employment offerings. careers.ryerson.ca (now ryerson.ca/careers) is a website used by students as well as internal and external job seekers. The website, along with four others, was nominated by a group of 34 for a re-design its poor adherence to UX, UI and visual design guidelines. My team and I were assigned to the challenge of designing and coding a re-design for the website, as well as designing a mobile app version.
Before
The following are the main justifications for a re-design.
-
Oversimplified design, leading the website to appear dated and separate from Ryerson University's digital branding.
-
Hard to access – after the first couple of visits on this site, users get taken to a “site cannot be reached” error page
-
Creates more work than necessary
-
Links don’t open up in a new page
-
Slow feedback – a blue thinking wheel will appear in between pages
-
Once you click on a job for more details, it’s hard to go back to the general job postings list.
-
Empathy Mapping
Before beginning to wireframe, my team and I analyzed our website's target user and mapped out their persona, goals, pains, gains, as well as what they see, say, do, and hear. We identified our target consumer as "Jack," a Master of Digital Media student representing in dire need of an on-campus job.
The resulting goal of our re-design was to make the Ryerson careers portal more accessible, less time consuming, and more personalized.
Wireframing
Solution
Increasing functionality and personalization, as well as incorporating Ryerson University's digital brand identity, the re-design of Ryerson's Careers website is visually appealing, social, and accessible. In addition to creating the prototype using Adobe Photoshop and Invision, my team and I coded our redesign using HTML, CSS, and Javascript.
Try it on Invision.
Try it GitHub.
