Some of my first tasks at Raccoopack Media were to improve the design of several pages and functions on our website. This allowed me to become more familiar with our brand and style, while also taking on some smaller scale design tasks.
My first task was to upgrade our contact modal. The original design was unorganized and hard to navigate, resulting in users missing important information and calls to action. Raccoopack also wanted to change the look and graphics to display more of their app development side. Below is the original page and contact modal.
After familiarizing myself with the current contact modal design, I started to look for some inspiration on Pinterest, Dribbble, and Behance. I also started to look for examples of layouts from other websites. Below is a mood board that I curated with all of my findings.
Once I gathered all of the layouts that I thought would best suit Raccoopack’s new contact modal, I started to work on some lo-fi mockups. I made several different variations which took inspiration from my findings, and added some fresh ideas as well.
After presenting the options to my project manager, we decided to narrow it down to two designs for the mid fidelity mockups. At this stage I added the company colours and theme to the designs to get a better idea of how they would look on the page.
Finally my team and I decided on the final version. This decision was made based on results from our user tests. I added the final touches to the design and we updated the website shortly after.
My next task for the Raccoopack Media website was to redesign the services page. The original design was inconsistent with the other pages on the website and didn't display the information in an effective manner.
I started to create some lo-fi sketches to get a few ideas for the mobile design layout. For this process I set a timer for 10 minutes and began quickly sketching ideas. The purpose of this exercise is to develop as many ideas as I can within a 10 minute time frame.
After reviewing my sketches I chose the strongest design to develop further into a lo-fi mockup. I made this decision based on the criteria that I was given at the start of this project.
After presenting my low fidelity designs to our team and project manager, we further modified the mockups before upgrading the designs to a higher fidelity.
After finalizing the mobile mockups, it was fairly easy to create the Desktop version. With all the elements such as buttons, text boxes, and graphics already created, it was just a matter of rearranging them on a larger screen.
