.png)
Shauna Crouch Design
.png)
.png)
.png)
Paper Wireframes
I explored a variety of formats searching for an easy, eye-catching layout with the most relevant information prominently displayed for the user.
Digital Wireframes
I started with the desktop wireframes as my baseline. Once the larger screen was developed, I scaled the layout down to fit on a phone screen while retaining the integrity of the initial user flow.
While creating the lo-fi prototype, several reviews and iterations occurred. An initial round of usability study was completed, and final changes occurred during mockups. To view in Figma, use the links below the images.
The usability studies consisted of two rounds. The first round was used to examine the layout and user flows in the low fidelity prototype. The second round examined the user experience in the high-fidelity prototype.
During a moderated study, participants were given three tasks and asked to rate the ease of the task. Afterwards, participants were asked to give overall feedback on their experiences navigating the website.
Findings
1. Some users expected to see the selected date of their visit in the cart summary.
2. Most users want to save or print their purchase confirmation.
3. Some users expected the location of the checkout button to be below the cart contents.
The results of these studies were used to refine the high-fidelity prototype.
A design system was used to provide consistency in the visual design of the mockups. I wanted the museum website to have a clean classic look that reflects the style and feel of an art gallery. The color scheme consisted of black and white with goldenrod as an accent. Courier Prime was chosen as it resembles the classic and nostalgic look of a typewriter.
After finalizing the mockups, the high-fidelity prototype was created with consideration for accessibility and transitions. As before, the desktop prototype was created as the base breakpoint and the mobile was adapted.
Web Content Accessibility Guidelines were considered when choosing colors and creating contrast. This will assist users with low visibility and any user to more easily distinguish important elements. Hierarchical headings were used to assist with the use of screen readers and site navigation. The site also follows a standard navigation order.
Now that the website is ready for development, I would like to explore the payment system and how that would be reflected on the museum’s end. Perhaps the client may want to have other payment options such as Apple Pay or Google Pay.
The museum website creates a digital space that draws the user into their welcoming and engaging atmosphere.
"I love the website. This is a place I would want to visit!"
- Sara, frequent art museum patron
"This art museum website looks very good, clean and crisp."
- Elaine, art museum member
