Elemental Echo Galleries: Speculative Responsive Website
Elemental Echo Galleries: Speculative Responsive Website
Embedded Files
About the Project
About the Project
Elemental Echo Galleries is a domestic art gallery chain with locations in New York, New York; Huntington Beach, California; and Seattle, Washington. Their aim is to provide artists with the opportunity to showcase and sell their artworks as well as provide visitors with insights into the gallery, the displayed artworks, and the artists.
Additional case study information can be found on Behance at my Elemental Echo Galleries Case Study.
Project Duration
Project Duration
Start Date: April 14, 2024
End Date: May 23, 2024
Project Roles
Project Roles
Why this Project?
Why this Project?
I chose this as my second speculative project because I wanted to expand on my first project, E2 GalleryGO. Additionally, I wanted to have consistency with the mobile app while ensuring that the website incorporated additional details that users would expect. The biggest difference between these two projects for Elemental Echo Galleries is that the website is for the company as a whole, while E2 GalleryGO was only for tours.
Project Goal
Project Goal
Elemental Echo Galleries’ new responsive website will allow visitors to quickly find information about their local gallery, such as the address, hours, and current events. Additionally, the responsive website will provide detailed information on how clients can visit on their own or with a guide as well as how to join a workshop or limited time event. Finally, the updated website will provide key information for artists, such as the submission process, guidelines, and requirements on how to have their work displayed from their preferred device.
Project Challenges
Project Challenges
Elemental Echo Galleries have a basic website that only provides their hours, contact details, and location information. The current website does not display well on smart phones and other devices. Visitors must call, email, or visit for any information regarding the galleries from the gallery itself.
Understanding the User
Research Summary
Research Summary
Research from secondary sources such as blogs, historical records for each city, and artist biographies.
Interviews with a wide range of age groups and persons of different backgrounds.
Competitive audit on similar businesses. The competitive audit helped me to see how we could add intuitive features to better help our visitors and clients
Assumptions
Assumptions
Pre-Research Assumptions
Pre-Research Assumptions
Art Galleries have workshops and very clear events.
Art Galleries make it easy for artists to learn how to exhibit and sell their artwork.
Information on how to visit the gallery is available.
Post-Research Assumptions
Art Galleries usually have information on events and workshops, but there is no calendar view.
8 out of 10 competitors did not have information on how upcoming artists can request to exhibit their artwork on the website or what the process to exhibit is.
4 out of 10 competitors included their address, contact information, and business hours. Information on visiting the gallery itself was limited to where visitors could park or if there were renovations.
User Personas
User Personas
Jessica Martinez
Jessica Martinez
Jessica is a 22-year-old art student who dreams of becoming a professional artist one day. She is passionate about art and regularly visits local galleries to study different styles and techniques.
Needs & Goals:
To find galleries that showcase works by emerging artists.
To learn about the submission process for displaying her own artworks.
To stay up-to-date on artist talks, workshops, and other educational events.
Pain Points:
Lack of clear information about submission guidelines for artists.
Limited details about upcoming events and workshops
Poorly organized gallery websites or gallery website information is limited.
Motivations: To gain exposure for her artwork and learn about opportunities to showcase her pieces in local galleries.
Most Used Devices: Laptop, Smart Phone
Jessica's User Journey Map
Jessica's User Journey Map
Brian Taylor
Brian Taylor
Brian is a 45-year-old art consultant and avid art collector who enjoys discovering new and emerging artists. They often attend gallery openings and auctions in search of unique and thought-provoking works.
Needs & Goals:
To stay informed about upcoming gallery events and exhibitions featuring emerging artists.
To find opportunities to acquire unique and valuable artworks.
To learn more about the artists' backgrounds and inspirations.
Pain Points:
Limited information about the artists' biographies and past exhibitions.
Lack of in-person and virtual tours or detailed gallery layouts.
Event calendars that are difficult to understand or lack useful information to attend the event.
Motivations: To discover unique and thought-provoking artworks from emerging artists and to continuously expand their art collection.
Most Used Devices: Desktop, Tablet, Smart Phone
Brian's User Journey Map
Brian's User Journey Map
User Pain Points
User Pain Points
User Pain Points
User Pain Points
Starting the Design
Starting the Design
Sitemap
Sitemap
The goal with this sitemap is to be transparent with the user whenever possible so they are empowered to achieve their goals.
Paper Wireframes for Multiple Devicess
Paper Wireframes for Multiple Devicess
The goal of the paper wireframes was to start the process to design a responsive website that empowers Elemental Echo Gallery guests to visit and artists to work with the company with self-service options and information transparency.
The sketches below are the wireframes that I chose to use as a reference for my digital wireframes of the homepage for a desktop, tablet, and smart phone. These paper wireframes were created using Procreate on a 9.7’ Apple iPad Pro.
Paper Wireframes
Paper Wireframes
Low-Fidelity Prototype Video
Low-Fidelity Prototype Video
Usability Study Findings: Unmoderated Remote Study
Usability Study Findings: Unmoderated Remote Study
Research Objectives
Research Objectives
To see if participants understand the event listing and to discover how the events could be improved.
To learn if the location information is adequate for planning a visit to the galleries.
To see if the current site navigation intuitive and is easy to use for users to use.
To learn the current user pain points and improve the website prior to creating mockups.
Key Performance Indicators
Key Performance Indicators
Time on Task: We will be seeing how quickly tasks are completed by users with five minutes or less to complete each task being the ideal.
Drop-Off & Conversion Rates: How many times were users able to complete the task.
System Usability Scale (SUS): Scale will have “strongly disagree” to “strongly agree.”
Exit Survey based on the Low-Fidelity Prototype where additional comments could be recorded.
Findings
Findings
All users found that the event overview section needed improvements. These improvements include wanting the month/date listed, having the events section better, and having fewer events listed at a time.
All users found that the event overview section needed improvements. These improvements include wanting the month/date listed, having the events section better, and having fewer events listed at a time.
For the location information, all visitors liked the information that was available on the page.
Most visitors wanted the information pages to be less cluttered with improved spacing to make the page easier to read.
50% of the participants found that the navigation menu on the tablet felt “clunky or large” and that it was wasting valuable screen space as a sticky menu.
Affinity Diagram
Affinity Diagram
Each sticky note color represents one of the Low-Fidelity Study participants.
Refining the Design
Refining the Design
Mockup Comparision
Mockup Comparision
The Location pages have the most differences between the desktop, tablet, and mobile phone. They are different to best accommodate each screen size as much as possible.
Accessibility Considerations
Accessibility Considerations
Many of my accessibility considerations are focused in the typography. My goal was to use easy-to-read fonts. The sources I used for this research can be found in the attached resources document. In addition to an easy-to-read font, I clearly labeled my headings as “Header 1, Header 2, etc.” to help screen readers.
Another way I considered accessibility for screen readers was to capitalize words in the emails that I used when words would run together. For example, rather than having “NY-opentoall@elementalEcho.com” I used “NY-OpenToAll@ElementalEcho.com” so the screen reader would be able to separate the words.
Design System
Design System
Screens & Carosels
Screens & Carosels
For this project, I created 50+ screens that covered the most common screen sizes for a desktop, a tablet, and a mobile phone. For both the tablet and the mobile phone, I created both portrait and landscape screens. These screens I built include the homepage, Frequently Asked Questions, event information, location information, and exhibit information for artists.
I also built 16 image carousels that change after a delay and can be manually changed. In the final product, I would have these rotating carousels be able to be stopped with a pause button..
High-Fidelity Prototypes
High-Fidelity Prototypes
Below you will find the five high-fidelity prototypes for Elemental Echo Gallery responsive website through Figma. These prototypes include a desktop, a tablet in the portrait orientation, a tablet in the landscape orientation, a phone in the portrait orientation, and a phone in the landscape orientation.
Desktop
Desktop
Tablet
Tablet
Portrait: Click Here
Landscape: Click Here
Phone
Phone
Portrait: Click Here
Landscape: Click Here
Going Forward & Key Takeaways
Going Forward & Key Takeaways
Project Quotes
Project Quotes
User #2, Low-Fidelity Usability Study
"I like how the navigation has icons for each item. It makes it easy to read at a glance."
Participant E, first High-Fidelity Usability Study
"[For the homepage, it is] very nice, I love a clean layout. Helps me and my dyslexia find information easily."
Next Steps
Next Steps
Below are the next steps I would take if this project was to be launched and was not speculative.
I would do at least one more ideation phase as I believe that the amount of text and spacing for the mobile phone screens could be improved.
Ideally, I would have one more high-fidelity usability study once modifications were completed to see if user needs were met and if there were any additional high-priority changes that needed to be made before the website was published for public use.
Key Takeaways & Insights
Key Takeaways & Insights
I found this project to be both easier and harder than creating a mobile app. It is certainly easier to create a responsive website for a desktop, and then scale it down to a mobile phone. However, I found this project more challenging as ensuring consistency between all the devices that are being considered requires more attention to detail than a mobile app.
My favorite part of this project was thinking about the ways that the website would respond to different screen sizes, even though this is one of the more challenging elements.
Elemental Echo Galleries - Responsive Website - Resource Credits.pdfPage updated
Google Sites
Report abuse