AP Creative

A showcase of design collaborations by Austin Caron and Myself.

Tools

Figma
Photoshop

My Role

UX/UI Designer

The Problem

Austin Caron and I have collaborated on websites multiple times. We each have our separate portfolios, but we wanted a way to display our knowledge of working within a team, as well as our understanding of modern visual design and web development standards. We set out to design a collaborative website to portray our understanding.

The Solution

A simple, fully accessible website that displays each project alongside a live link to use the product.

Because we had so many collaborative designs but didn’t want to oversaturate our portfolios with content, the live showcase was a perfect way to present more of our work while making it both a creative and interactive user experience.

Having researched many unique websites where the visual design and user interaction were the main draws of the site, I began to focus my design on the premise that interaction would play a key role in making the site out of the ordinary.

When designing the website, I had usability in mind as Austin and I wanted to showcase my design capabilities and understanding of UX principles and synchronously display Austin’s understanding and commitment to web development. The end design solution came in form of simple user interactions. With multiple ways for users to interact with content on the site, the combination of smooth animations and high-quality design contrasts perfectly and users are able to freely and easily navigate throughout.

Finally, colour contrast was a major aspect of my design process. I wanted a way to distinctly display each project and presenting the content over bright colour gradients and pastel backgrounds helped establish the projects as the main focus of each page. Users were able to navigate freely while also being subtly lured in to view each project on the site.

The Process

Identify The Problem

We wanted to showcase our collaborations, but our portfolios would become cluttered.

Define Web Principles

User Interaction
Colour Contrast
Easy Site Navigation

Design

Wireframing
Prototyping
Interaction Design

The Research

A colour wheel used to help select the best possible gradients for AP Creative's projects.

Once our team had analyzed the data we collected, I began working on the information architecture. I found patterns and differences between each participant's card sort and thus, created the information architecture.

I then started on low-fidelity wireframes, creating the structure of the website. The data our team had collected from the survey, interviews, and card sort, proved that user’s like to see both images and descriptions of the food they are purchasing, and because of this, prioritizing menu images and detailed descriptions were the most important part of designing the structure of the wireframes. Utilizing design heuristics to create an accessible UI was also a high priority for the wireframes.

Finally, prototyping the low-fidelity mockups to use during the usability testing phase was my next priority. Using Figma I created a scalable prototype where users were able to engage with the structure and “feel” of the website without any detail. The prototypes also helped our team analyze and adjust features and functions that user’s liked and disliked to improve the overall experience of the app.

The Design Process

A high-fidelity prototype for the AP Creative website.

After the card sort had helped determine the basic structure of the app, I designed the information architecture, focusing on ease of use and accessibility. Because identifying the weaknesses Crunchyroll and other streaming services displayed, Toksan Anime was designed while utilizing design heuristics to improve the ease of navigability of the site as well as eliminate any likeliness of user error.

Creating low-fidelity wireframes for each page helped shape the final strucuture of the site. Usability testing with high-fidelity wireframes helped provide insight to the final features and functions which would be included and the main focus for Toksan Anime was to combine the visual appeal of the website with full accessibility to allow as many user’s as possible to enjoy using the streaming service.

The Final Product

The Spotify Redesign landing page on the AP Creative website.

The end product, which is the AP Creative website, acts as an interactive portfolio co-created between myself and Austin Caron focusing on our collaborative projects. The simple site navigability, contrasting colours separating each project, and ease of use of the site as a whole help feature the projects as the main draw to our website.

The responsive capabilities of the design allow for the website to scale smoothly and continue to advertise engagement and interactivity within the site.

This project was a very fun way to not only add diversity to our design resumes, but to include multiple projects that although may not be featured on our personal portfolios, are worthy of sharing with others because the projects reflect both the quality of our work and our ability to work in a team setting.