What happens when passion needs vision?
The Problem
Joe’s site needed updating and direction. To highlight the potential for Poppin Joe’s, I created a mock portfolio including a content strategy, web analysis, style guide, and website design in Adobe XD with a prototype. The driving force behind this project was to utilize Joe’s passion and humble attitude to create a website that reflected his personality.
Content Strategy
The content strategy identified Joppin’ Joe’s users and the company’s goal for its website. For this project, I determined who the target audience was and what their needs and motivations were. In addition, I completed a competitive analysis on three similar websites and a content analysis about information that should be included on the website.
Website Analysis
I created an analysis of the best purpose, rhetorical appeals, writing style, navigation, page layout, and visual appeal for the website. This was a constructive step in the redesign process because it established the type of content necessary to meet the audience and business needs.
The website analysis focused on improving the site’s visual appeal and provided several opportunities to improve usability.
Style Guide
The style guide included brand voice and tone, writing guidelines, and design elements. While creating the style guide, I focused on each component of the website individually and ensured they worked together to create an overall pleasing look and feel for the final design. Additionally, the style guide is essential to maintaining future usability by ensuring that the proper font, colors, and white space are followed.
User Persona
Before starting the design process, a key aspect is knowing who the intended user is. Knowing who you are designing for makes all the difference.
​
This project did not allow for user surveys, so I had to base the persona on what I knew about the users. I read customer reviews and stories on the company’s website. Customers love Joe’s story and background as much as they love his product. While reading reviews, stories, and social media comments, I found that Joe’s story inspiring to people.
Once I found commonalities including user’s behaviors, motivations, frustrations, and demographics I was able to create a data based persona. In addition, I included a user scenario to offer real user insight into how and why customers uses their product.
Wireframes and Redesign
My intention for the design was to create a simple, easy-to-navigate site. The previous design contained a lot of content and created a cognitive overload for users. Before the engaging content could be added strong skeletal structure for the site was created. My objective on the wireframe was to ensure that the most important content was above the page fold and the content was properly layered.
​
During the redesign, I focused on increasing the image sizes and creating more whitespace to focus on the relevant content. Branding was a vital part of this project. The inspiration behind the design was vintage popcorn ads from movie theatre. The most important aspect to the project was creating a prototype that could be tested with users to validate the new design.
