Senior Projects: SCERA Redesign (2020)
The Basics
Challenge
The SCERA website was outdated and needed to be updated to be mobile responsive. The owners of the SCERA wanted to have the website updated to modern standards while also keeping their heritage and style intact.
Team/Role
2 Designers: Myself, Kylee Apple
3 Developers: Darrin Harvard, Austin Bennett, Daniel Purrington
Mentor: Bryan Thacker
UI Designer, UX Designer, Graphic Designer
Tools
Adobe XD, Adobe Illustrator
Duration
8 months
(during two college semesters)
The Process
1. Wireframes
Started with the homepage already designed for mobile. From that base template, the other pages. From there, I made the tablet and desktop wireframes. Went back and adjusted spacing and features as necessary.
2. Surface Compositions
Took the finalized homepage design for the surface compositions shown to us by our mentor and added additional background textures to improve the design. Took those designs and implemented them on every other page.
3. Prototyping
Using Adobe XD and its prototyping function prototyped all the functionalities for eventual testing. The program was for the wireframes and the surface compositions.
4. Development
Handed off the designs to the development team to start making the website on WordPress.
This project spanned two semesters and involved fand along with a mentor during the second half. We began by building upon the work done by the previous group, which included user interviews, client interviews, a creative brief, a project proposal, personas, a sitemap, and a wireframe for the mobile homepage.
Wireframes
We started by creating wireframes, beginning with the events page and progressing. Once the mobile pages were complete, I began adapting them for tablet sizing while Kylee Apple simultaneously worked on the desktop wireframes. We then made gradual adjustments to the wireframes for text sizing and spacing.
Surface Compositions
At the end of the first semester, I began creating my version of Surface Compositions, which got rejected. In the next semester, I added additional pages, implemented transition styling, fixed the menu system, created a podcast player, adjusted spacing, and worked on tablet and desktop sizing. I went through this process two more times. I followed a style guide created with the help of Bryan Thacker, our project mentor. I designed a few extra pages, adding the pages for the desktop version, including a calendar in both list and calendar formats. Finally, I completed the project.
Prototyping
During both phases, I put together a prototype for the website’s design phase. I accomplished the prototype using Adobe XD’s built-in prototype builder.
View the Prototypes
MOBILE
https://xd.adobe.com/view/418b3890-4586-4e42-9e09-664371851117-14d8/
TABLET
https://xd.adobe.com/view/38509bc8-32bb-4967-b01b-fc7bf9b178af-6d03/
DESKTOP
https://xd.adobe.com/view/65ea08ff-704c-443a-809e-999242c3c6ed-30b9/
Development
We handed off the designs to the developers on my team. The semester was almost over, so they didn’t get very far.
Outcome
A finalized mobile, tablet, and desktop design and prototype for each.
Final Words
The most significant lesson I learned from this experience was keeping a project moving forward even when not all team members were fully supportive. I persevered, striving to meet individual deadlines and putting in over 325 hours of work. Despite my efforts, the designs couldn’t be developed or tested. Nevertheless, I intend to maintain my commitment to meeting deadlines and working diligently on every project. I find satisfaction in being someone others can rely on.
