Art Archive
User Interface (UI) | User Experience (UX) | Prototyping | Wire framing | Adaptive UI | Front-end Development | Content management
The concept behind Art Archive is to bridge the gap between the physical and digital realms of art. By incorporating QR codes into art displays, visitors can effortlessly access a wealth of information, enhancing their understanding and engagement with each piece.
Live Website![New Tab Icon](assets/artarchivehome.png)
Problem Statement
In today's art world, there is a significant lack of accessible and comprehensive information about artworks, hindering individuals' ability to fully engage with and appreciate artistic creations.
Project Goals
To create an immersive art exploration experience that goes beyond a traditional website. By scanning the QR code associated with an artwork, users will not only receive information about the artist and the artwork but also gain valuable insights into the specific techniques and materials utilized in the creation of that artwork.
Project Objectives
The platform should provide a seamless and engaging experience for users scanning QR codes and accessing artwork information. The information should cover the artist, artwork ,techniques and links to learn about the techniques and the materials.
Target Audience
- Primary Audience: Students at SUNY Oswego.
- Secondary Audience: Anyone who’s coming to SUNY Oswego.
Role
- Researcher
- Designer
- Illustrator
- Developer
Tools
- Figma
- Illustrator
- Photoshop
- HTML/CSS/JavaScript
![New Tab Icon](assets/artcase-2.png)
Design Strategy
Design strategy is a systematic approach that involves several steps to create innovative solutions. It follows the principles of design thinking and includes empathizing with users, defining the problem, ideating solutions, designing prototypes, developing the final solution, validating through testing, and iterating based on user feedback.
![emphatize icon with two heads and line in between](assets/iconsdesign-15.png)
![emphatize icon with two heads and line in between](assets/iconsdesignwhite-23.png)
Empathize
![board and the arrow in middle](assets/iconsdesign-16.png)
![board and the arrow in middle](assets/iconsdesignwhite-24.png)
Define
![bulb with lights as a line showing the conceot of ideation](assets/iconsdesign-17.png)
![bulb with lights as a line showing the conceot of ideation](assets/iconsdesignwhite-25.png)
Ideate
![pen tool with the lines demonstrating the concept of designing](assets/iconsdesign-18.png)
![pen tool with the lines demonstrating the concept of designing](assets/iconsdesignwhite-26.png)
Design
![screen mockup with the blocks showing the concept of prototype](assets/iconsdesign-19.png)
![screen mockup with the blocks showing the concept of prototype](assets/iconsdesignwhite-27.png)
Prototype
![hand with the scale and the mechanical nut in the background](assets/iconsdesign-20.png)
![hand with the scale and the mechanical nut in the background](assets/iconsdesignwhite-28.png)
Develop
![code validation with the arrow](assets/iconsdesign-21.png)
![code validation with the arrow](assets/iconsdesignwhite-29.png)
Code Validation
![hand interacting with the screen shows the user interaction and experience](assets/iconsdesign-22.png)
![hand interacting with the screen shows the user interaction and experience](assets/iconsdesignwhite-30.png)
User Testing
User Flow
To create an immersive art exploration experience that goes beyond a traditional website. By scanning the QR code associated with an artwork, users will not only receive information about the artist and the artwork but also gain valuable insights into the specific techniques and materials utilized in the creation of that artwork.
![the flow that shows how the user interacts different page of the website](assets/userflow2.png)
Prototypes
Lo-Fidelity Prototypes
![top four images shows shows rough pencil drawn sketches and bottom are the rough figma lo-fidelity prototypes](assets/lo-fiprototypes2.png)
Hi-Fidelity Prototypes
![hi-fi prototypes of the website](assets/project3mockup.png)
What made this web experience
Interesting & User friendly
Mobile-Centered Design
Integrating a mobile adaptive website with QR code scanning offers numerous conveniences for users.It ensures a seamless and optimized mobile experience, allows for easy access and engagement without the need for manual typing or searching, bridges the gap between offline and online experiences.
![two mobile screens showing the website is designed for mobile screens](assets/artmockup2.png)
Read more option
The "Read More" option in websites enhances the user experience by providing concise content summaries, reducing cognitive load, improving scan ability, optimizing page performance, catering to mobile devices, giving users control over their browsing experience, and encouraging interaction and engagement.
![gif shows how the read more option works on the website](assets/Gif2.gif)
Dark Mode
Incorporating dark mode into the web experience enhances the user experience in several ways. In this case it provides the option of customized user experience. For those who prefer to have such experiences.
![three different screens demonstrating the dark mode feature of the website](assets/darkmode.png)
How it works
Scan the QR code
Scanning a QR code is an essential component of the user experience, providing convenience, seamless transitions between offline and online worlds, access to additional information or services, interactive and personalized experiences, and smooth interactions. User will scan the QR code provided with the artworks that leads to the webpage for that artwork.
![hand holding a mobile phone pointing at the artwork with the website showing about the artwork open](assets/artarchivescan.png)
Get accurate and concise information
By offering concise and accurate information accompanied by visuals, users can better understand the content and navigate through the webpage with ease. This approach ensures that users have a comprehensive understanding of each artwork and can delve deeper into the provided information, resulting in a more engaging and satisfying user experience.
![hand holding a mobile phone pointing at the artwork with the website showing about the artwork open](assets/secondproject.png)
Conclusion
The case study of Art Archive highlights the transformative power of QR codes in enhancing the user experience of an art-focused website. By implementing a web beyond experience, where users can scan QR codes associated with artworks to access specific information, Art Archive has created a unique and engaging platform for art enthusiasts and visitors.
![person passing by and there are two posters on the wall behind that person](assets/posterperson2.png)