EZPhoto

Responsive Website - Adobe XD

Maintaining the role of Lead User Experience Designer for this project meant I was responsible for all parts of the design process from conception to delivery.

The Product: EZPhoto is a concept for a mobile application as well as responsive website that focuses on giving users the opportunity to quickly and efficiently set up photography sessions. This specific case study will follow the creation of the responsive website.The target users are working parents who desire affordable and timely photography sessions. This project was done within Adobe XD.

The Problem: Users need a convenient website that provides them quick and easy access to booking of photography sessions, in order to have precious memories.

The Goal: Create a responsive website for desktop and mobile, that allows users to quickly schedule sessions.

Project Duration: March 2023 - May 2023

Responsibilities: Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs, determining information architecture through sitemapping, and responsive design for mobile and desktop.

INITIAL DESIGN PHASES

Initial research was done through user interviews and a competitive audit, which then allowed for the creation of personas as well as user stories. I outlined user journey maps and began iterating on what users would need within the application. I also created a sitemap to guide me through the design process for the app and responsive site.

After the initial sketching and paper wireframes were created, I began designing the digital wireframes, which you see above.

The images that you see here give a visual overview of the original homepage desktop wireframe created for the application. You'll also see the low-fidelity prototype below.

Utilizing sitemapping was a wonderful way to keep my thoughts organized and ensure that each page of my design contained all the necessary elements for proper functionality and flow. Once wireframing for the mobile app was complete, I then began iterating for the responsive website.

USABILITY TESTING AND MOCKUPS

Testing through a moderated usability study allowed me to gather information and insights based on real user experiences. I learned that accessibility needed to be addressed and increased, and some clarity among elements was needed.

Homepage Mockup

Book Session Wireframe

Transitioned into Mockup

Cart Page Mockup

Impact:  User feedback confirmed that the application would be helpful in terms of quickly and efficiently scheduling photography sessions. Participant A: “The whole page is easy to understand and follow. I could quickly navigate through and everything seems readily available. Nothing was confusing!”

What I learned: I learned an entirely new software program, Adobe XD. I thoroughly enjoyed that. I also better learned the process of transitioning from wireframes to prototypes and really increased my skills in this area. I was able to focus on the user more easily and keep their needs front of mind.

Accessibility Considerations: I considered accessibility when I chose the colors for my color scheme within the website, to ensure those with visibility disabilities are accounted for. I included alternate text for each image within the website, to ensure accessibility for screen readers. I considered accessibility when designing my high-fidelity prototypes, in regard to the speed and duration of motion within each page. 

POLISHED, FINAL DESIGNS

Dedicated Mobile App

Responsive Website