Redesign of the AJ’s Fine Foods Website as a Prototype

About This Project

Broken links, content that doesn’t make sense, and navigational issues. These were some of the many issues with the AJ’s Fine Foods website that I uncovered. What makes it disheartening about the AJ’s Fine Foods website was that I was a cashier for AJ’s Fine Foods and I knew full-well that this was a premier grocery store therefore I had first-hand knowledge toward what makes a grocery store top-notch. A usable and accessible website should contribute to refining AJ’s Fine Foods as a premier store. The fact that Bashas (The corporation that owns AJ’s Fine Foods) couldn’t develop a proper and high-quality website for their AJ’s Fine Foods division is poor for customer service and how the store is received amongst the public. I found it best to take it upon myself to accomplish a project that consisted of evaluating this website and developing a more usable and high-quality design for this website. This would be in the best interest for AJ’s Fine Foods and lead to higher conversion rates and improved customer service.

A redesign of the AJ’s Fine Foods website to improve its usability

Length of the Project

Lasted from January 2020 to May 2020

Tools Used

Adobe Photoshop and Adobe XD


The development of the prototype

The Stakeholder Analysis

The Stakeholder Analysis was developed to gather input about the redesign of the website. All levels of employees were involved in this project and I determined the impact of the respective employees of Bashas and AJ’s Fine Foods dependent on their positions within Bashas and within AJ’s Fine Foods stores. I also decided how frequently I would meet with certain employees what responsibilities they would have dependent their own positions. The Stakeholder Analysis was useful in determining who I needed input from and how their input would be beneficial in the redesign of the AJ’s Fine Foods website.


The Heuristic Evaluation

A Heuristic Evaluation was developed for the purposes of inquiring about the AJ’s Fine Foods current website’s usability strengths and weaknesses. Jakob Nielsen’s 10 Usability Heuristics was utilized to evaluate the overall usability of the website. Utilizing the 10 Usability Heuristics and its rating scale, I evaluated the website based on each heuristic, gave a rating for each heuristic when applicable. I also explained why the website got such a rating for its respective heuristic and how the website could be improved respective of the specific heuristic.


User Research and Personas

User Research

User research consisted of producing a survey on Google Forms with these specific questions:

  • Age Range
  • Gender
  • City and State
  • Length of Internet usage on average per day
  • If they shop at AJ’s Fine Foods
  • How often they shop at AJ’s Fine Foods (if applicable)
  • How much do they spend on groceries at AJ’s Fine Foods (if applicable)
  • Why they would want to utilize the AJ’s Fine Foods website?
  • What they would expect from the AJ’s Fine Foods website?
  • How the AJ’s Fine Foods website could meet their needs

Five people participated in the survey and the data collected from the survey led to the development of the personas based off the user data.

Data from survey conducted for User Research

Personas

Three personas were developed based off of the user research. The personas have various intentions to why they would want to utilize the AJ’s Fine Foods website. The User Goals highlight what the average user intentions are in utilizing the website. The personas also include potential barriers meaning what obstacles they might face when looking to accomplish their user goals on the AJ’s Fine Foods website.

Persona #1
Persona #2
Persona #3

Content Inventory and Audit

The Content Inventory and Audit consisted of using a spreadsheet template meant for a way to provide for a detailed review of the current AJ’s Fine Foods Website. I reviewed every single page of the website to determine what types of content was on each page and flagged pages that had usability issues. I also made recommendations regarding certain web pages that I thought could be improved.


Usability Test Plan for the current AJ’s Fine Foods website

The test plan above provides all the details of the usability test for the current AJ’s Fine Food website.


Usability Test in Action


Results of the Usability Test of the current AJ’s Fine Foods website

A Usability Test Data Management Spreadsheet was utilized in Google Chrome to document usability issues, record how long each user completed each task and provide solutions for usability issues based off recorded test data for the current AJ’s Fine Foods website.


The prototype and the usability testing of it

Upon review of the the heuristic evaluation, content inventory and audit, and test data of the current AJ’s Fine Foods website, a functional prototype of a redesigned version of the AJ’s Fine Foods website was developed. The prototype consisted of fixes to usability issues uncovered in my overall examination of the current AJ’s Fine Foods website. I used Adobe Photoshop to create the web pages and then imported them into Adobe XD to create a prototype of a redesigned version of the AJ’s Fine Foods website. The prototype was then tested with two different test users in accordance with the following test plan.

Usability Test Plan for my prototype of a redesigned version of the AJ’s Fine Foods website

The test plan above provides all the details of the usability test for my prototype of a redesigned version of the AJ’s Fine Foods website.


Usability Test in Action


Results of the Usability Test of my prototype

A Usability Test Data Management Spreadsheet was utilized in Google Chrome to document usability issues, record how long each user completed each task and provide solutions for usability issues based off recorded test data for my prototype.


Usability Recommendations for the AJ’s Fine Foods website presentation

Once all usability testing with my prototype was completed with the results documented, I created a presentation to document the development of my prototype such as my user research and the usability testing I conducted on the current AJ’s Fine Foods website to determine usability issues of the current website. I also touched upon the usability testing of my prototype I conducted and discussed the usability issues I uncovered with my prototype. In the presentation, I present recommendations stemming from the usability issues that I uncovered in the usability testing of my prototype.