Rukaj Gallery
CATEGORY
Application Migration and Design
MY ROLE
UX Designer and Data Architect
TIMELINE
6 Months
METHOD
Agile Data Migration, User-Centered Design
DELIVERABLES
Data Mapping
Data Migration
Content Rendering/Dynamic
High Fidelity Prototypes
Fully Functioning Prototype
RESULT
During the course of 6 months, I worked with Rukaj Gallery to implement the complete migration of their database and redesign a modern, responsive website on Wix.
BACKGROUND
Why does Rukaj Gallery need to migrate?
Rukaj Gallery has recently expanded its offerings to include works by Contemporary Artists, marking a shift from its traditional focus on museum-based artists. To support this growth and better serve both audiences, the gallery felt it was important to create a clear distinction between the two categories. This strategic separation will allow Rukaj Gallery to develop both areas independently, with the potential for separate physical spaces tailored to each demographic. It will also enable more focused participation in exhibitions and art fairs specific to each group.
There was also a need for greater customization to effectively categorize these distinct groups. The existing CMS on Artlogic offered limited flexibility, requiring all changes to go through their team. Transitioning to Wix—with its fully functional backend inventory system and the ability to implement custom changes independently—was a necessary and strategic move for Rukaj Gallery.
Challenge
The challenge for this project stemmed from switching the website from a fixed CMS to a more fluid CMS.
Using the "Agile Data Migration" method, I was able to structure information with Content Modeling that enabled seamless data binding across pages, while keeping the system both scalable and dynamic.
The "Parallel Run" method allowed me to move data from one system to another with accuracy and eliminate unnecessary data in the transition.
GOALS
- Structure content for dynamic pages
- Maintain data integrity (e.g., artist–artwork relationships)
- Improve usability, customization and visual presentation
PROCESS
1.
Audit and Data Mapping
The first steps of this project included:
- Auditing the current site, documenting what needed to be added, taken away of changed for the new site
- A comprehensive competitor analysis to see what others were doing to tackle their gallery database
- Creating a map that would help me understand how the relationship between the data and which content types and fields to use
2.
Design Thinking Stage
Developed a low-fi template that mapped out blocks for dynamic pages, and incorporated new branding including typography and colour
3.
High-Fidelity Prototypes
Created hi-fidelity prototypes of each page on 3-4 view ports in Figma that I could then start translating into wix
4.
Data Migration & Implementation
Successfully migrated all key Contents, fields and references along with the implementation of the design for dynamic pages into Wix on all viewports
5.
Testing
Ensuring that the website is responsive on all viewports and that information is accurately being pushed from the database into all dynamic pages
DESIGN METHODS
User-Centered Design
This methodology helped me design user flows, components, and interactions that met both user and stakeholder needs. The site was split into “Gallery” and “Now” sections to simplify content management and allow users to explore either contemporary or museum-based artists. .
Using Information Architecture, I mapped out the site structure to ensure a clear, intuitive flow for each content type, supporting both user experience and the business’s growth goals.
Agile Data Migration
One of the core concepts from this method that I applied during the project was Content Modeling. This approach helped me organize and structure the information being transferred, and determine how it would be mapped into Wix’s backend. Its flexibility allowed me to move fluidly between Artlogic and Wix, evaluate what worked, and adapt the content effectively to fit the new system.
Below is an example of how I applied Content Modeling to structure the “Artists” page. This page was divided into dynamic sections, each linked to a different dataset. These dynamic sections ensure that content flows seamlessly and updates automatically whenever new information is added.
Design Highlights
Inquiry Form
An inquiry form was essential for a User-Centered design, as it allowed clients to easily contact gallery staff and request more information about specific artworks. I designed a simple, user-friendly form that auto-filled key details about the selected piece and included check-boxes for users to specify their needs. To reduce user error, the submit button was highlighted, and error messages were triggered if required fields were left incomplete.
To ensure the form functioned properly, a backend dataset was created to capture submitted information. I used JavaScript to pass the artwork’s image URL into the backend, allowing the image to be stored alongside the inquiry data. The submitted details were organized in a spreadsheet-style format within the gallery’s dashboard, making it easy for staff to access and manage inquiries.
Filtering Artworks
Rukaj Gallery's audience includes both art buyers and local designers, so one of the primary goals was to create an intuitive way for these users to discover artworks based on key attributes. To address this, I designed a dedicated Filtering Page, divided into two sections: Recently Added works and a comprehensive filter panel. Through collaboration and research with the gallery owner, we identified the most valuable filtering categories: Artist, Medium, Size, Period, and Colour.
On mobile devices, particularly iPhones, the artwork grid was optimized to display two artworks per row, enhancing visibility and reducing scrolling. Additionally, I implemented a sorting system through the back-end CMS, allowing control over the order in which artworks appear, whether prioritizing paintings, recent works, or a combination.
Additionally, an availability button was implemented on all artwork listings. The button dynamically changed colour based on the artwork’s availability status, serving as a clear visual indicator. This helped prevent user error by allowing clients and customers to easily identify which pieces were currently available.
Design System
An updated Design System was implemented in Wix to maintain flexibility and efficiency across all viewports. Customization within Wix allowed me to display two artworks simultaneously on mobile, optimizing screen space and reducing user drop-off by enabling more content to be visible at once. Each component was thoughtfully designed with multiple states to support user navigation and clarity throughout the experience. For instance, incorporating success and error states in the inquiry form was essential to reassure users that their submission was either completed or required attention.
Below are just some the components included within the design:
Impacts
Migrating from Artlogic to Wix allowed Rukaj Gallery to gain greater flexibility, enabling faster updates, dynamic content management, and better support for its expansion into contemporary art. By separating the site into distinct “Gallery” and “Now” sections, users can easily navigate between traditional and modern collections, improving engagement and supporting targeted growth. Features like advanced filtering, mobile-optimized grids, dynamic availability buttons, and a smart inquiry form streamlined the user journey, reduced drop-offs, and increased high-quality inquiries. A consistent, responsive design system ensured visual clarity across all devices, reinforcing the gallery’s credibility and preparing it for scalable future updates.
*These are hypothetical impacts as the full design requires further testing and a complete launch
WHAT’S NEXT STARTS HERE.
Get in touch at meagan.mallough@gmail.com