Hannah Metzger's Portfolio

Hannah Metzger's PortfolioHannah Metzger's PortfolioHannah Metzger's Portfolio

Hannah Metzger's Portfolio

Hannah Metzger's PortfolioHannah Metzger's PortfolioHannah Metzger's Portfolio
  • Home
  • Project One
  • Project Two
  • More
    • Home
    • Project One
    • Project Two
  • Home
  • Project One
  • Project Two

Artist's Website

I needed a website to serve as a quasi-gallery site, showcasing my paintings and allowing for customer engagement.  I  worked within the UX design cycle and front-end website development. 

My Personal Artist's Website: an endeavor into UX

Involvement

This project was executed entirely by myself. My roles were UX researcher, designer and front end developer. 

Key Take Aways

I saw and executed a 12 week project, in which I managed my time properly, defended my design decisions in checkpoint meetings with peers and an advisor, and utilized my "quick learner" skills to pick-up Adobe Xd and export my designs in code through Anima for the first time. 


This website will allow me to play around with google analytics in the coming months, and grow my own personal art business. 

Duration

12 weeks, with 4 checkpoints. At checkpoints I clearly articulated the newest designs or code implementation to a group of peers and my advisor. The checkpoints were outlined with goals to hit in a project proposal my advisor and I agreed on at the beginning of the semester. Each entailed around 2-4 deliverables per checkpoint. Leaning design heavy at the start and ending code intensive by the end of project. 

Research and Design Approach

I started by looking at contemporary artist's websites, studying usability heuristics of each website, I liked sites with a consistent design format, prioritizing necessary content and features over design fluff, and easy navigation throughout the site. 


Because I was researching for a very specific type of website, I organized my research documentation by artist, and then the types of pages each had; landing, bio, exhibitions, contact, and works. Summarizing what worked for the website and what didn't. 


This research  provided a solution to a problem, selling my work on the website, something I wasn't sure how to implement the proper security for. However, I learned artists use enquiry forms for their art/ commissions, and a form was something I was very capable of implementing.

Journey Map

WireFrames

Here I worked through the flow of the website, the elements of each page, and what types of data fields I would need to collect from a user.

WireFraming in adobe xd, exported through anima

Code Implementation

Editing Anima Code

I found Anima’s HTML and CSS exports tedious, when it came to formatting responsively.  I solved these issues by using Bootstrap's grid and applying its hierarchy to the code by myself.      

Back-end Forms

I used Formspree to handle sending an email to my permanent email address whenever a user submits an enquire/contact form. 

Images of running website

Here is my code in AWS. I am using rails to serve the site, and bootstrap classes to layout my site, and create responsive designs. 

1/5

testing

Interviews

Key take aways from my tests which included 5-second tests, First click tests, and A/B testing: 

  

  • users guessed the intended target audience for the website
  • users could navigate fairly easily, but need more options to navigate between views. 
    • ex. need an exit button on enlarged painting view
    • need home tab
  • users liked minimalistic view, but wanted the cards on the works/blogs pages to line up better 

Next Step

Implemented those take aways for a better experience, giving the user more options for site navigation. 

Future enhancements

I would like to bring the website to Firebase.  A classmate introduced it to me two-thirds into my project, so to keep things moving smoothly I stuck with AWS for the remaining weeks. However, after graduation I plan to move the project into Firebase where I'd have access to google analytics. On top of a ton of other metric based analysis to inform my design. I'd like to also continue to get feedback from my users / clients and see how they feel about the design/ what they would want for a better experience. 

Hannah Metzger's Portfolio

Copyright © 2021 Hannah Metzger's Portfolio - All Rights Reserved.

Powered by GoDaddy Website Builder

This website uses cookies.

We use cookies to analyze website traffic and optimize your website experience. By accepting our use of cookies, your data will be aggregated with all other user data.

Accept