Case Study – UI Redesign
Richmond Art Gallery
Richmond Art Gallery is a municipal gallery supported by the non-profit Richmond Art Gallery Association.There is no admission fee to enter the gallery. They provide events, school programs and art activities and it costs. I was challenged to improve the website for mobile and desktop, changing typography, layout and touch points. At the same time, their existing style is maintained.
Date
OCT 2022
Plateform
WEbsite for mobile and desktop
My ROle
Ui design
Tools
figma, illustrator
Problem Analysis
Assuming the main purpose of the website, there are mainly two, which are (1) to increase movie ticket purchase through the website and (2) to expanding advertisement revenue. For that, the website should:
- Revamp the layout and add more images to get the potential and existing customers to imagine how exciting the place is.
- Place the CTA buttons and encourage the visitors to lead to the touch points that the art gallery wants.
Solutions
Header & Footer - Desktop & Mobile
Original
Redesign
- <span data-metadata=""><span data-buffer="">Add the CTA button to improve to gain more customers to visit the museum.
- <span data-metadata=""><span data-buffer="">Change the mobile header to keep consistent. Also, add the hamburger menu for users.
- <span data-metadata=""><span data-buffer="">Remove the full and last name input boxes to look easier to register for their newsletter.
Home Page - Desktop
Original
Redesign
- Deleted one of the same articles that display closely to avoid being complicated.Make their main articles, which are exhibition details, more emphasized.
- <span data-metadata=""><span data-metadata=""><span data-buffer="">Changes the location of “What’s new” because not directly related to their goal on the website.
- <span data-metadata=""><span data-buffer="">The picture which represents the movie should be the main object and more outstanding.<span data-metadata=""><span data-buffer="">Modified for users to be able to reach the pages about school programs & activities and about pages of the Richmond art gallery from the home page. There are more than 5 of information about them and displays all of them by a horizontal scroll.
- <span data-metadata=""><span data-metadata=""><span data-buffer="">Overall, changed the number of columns to make the information hierarchy clear.
Home Page - Mobile
Original
Redesign
Exhibition Page - Desktop
Original
Redesign
- <span data-metadata=""><span data-buffer="">Indicate which page users are in now for better a user experience.<span data-metadata="">
- <span data-metadata=""><span data-metadata=""><span data-buffer="">Made the main image bigger to be eye-catchy and users can get excited to see the page.
- <span data-metadata=""><span data-metadata=""><span data-buffer="">Added more pictures related to the pages to encourage users to stay on the page. It helps the the visitors visually enjoy the website.
Exhibition Page - Mobile
Original
Redesign
Program Page - Desktop
Original
Redesign
- <span data-metadata=""><span data-buffer="">Made the main image bigger to imagine how the service is to grab more attention of the users.<span data-metadata="">
- <span data-metadata=""><span data-metadata=""><span data-buffer="">Restructured the object location and added cards and a diagram to fix the balance on the right and left sides. Additionally, reorganized the information hierarchy clearly and the CTAs are more obvious to the users.
- <span data-metadata="">Avoid a lot of lining up sentences to help users to read all of the contents easily and to find the information quickly that they want.
- <span data-metadata=""><span data-metadata=""><span data-buffer="">Removed the negative space that can be used more effectively.
Program Page - Mobile
Original
Redesign
About Page - Desktop
Original
Redesign
- <span data-metadata=""><span data-buffer="">Indicate which page users are in now for better a user experience.Displayed the pictures of the association board of directors to convey their atmosphere. It could motivate the viewers to get interested in the association and lead them to apply for volunteer positions.<span data-metadata="">
- <span data-metadata=""><span data-metadata=""><span data-buffer="">Added the "contact" button instead of just writing down the email address to encourage users to contact them. It encourages the users to contact the art gallery.
- <span data-metadata=""><span data-metadata=""><span data-buffer="">Inserted related page section to influence the users to stay at the website longer. That could help the art gallery to increase the number of potential fans.
About Page - Mobile
Original
Redesign
Typography
Colour Palette
Icons & Buttons
