Studio M
- Choose your photographer -
________________.Role:
_________________Tool:
_____________Duration:
_UX designer
_UX researcher
_Pen and paper
_Adobe XD
_February to May 2023
- Find your ideal Photographer -
In the photography studio I work for I have noticed some frustrations among clients, number one is not being able to choose the photographer who will do their shooting, clients prefer to select someone with whom they feel more comfortable than someone who surprises them. Number two, clients sometimes don't find appointments available on the day and time they want to do their photo shoot. And number three, the category they choose, is not always available because some photographers don't do them. According to these situations, I decided to start this project, an application that helps connect clients with professional photographers who meet their needs.
My goal:
Design an App that helps connect people interested in having a photoshoot with professional photographers who can satisfy their needs in terms of schedules, expectations and categories.
My responsabiities:
User research, conduct interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iteration on designs and responsive designs.
01
- Understanding the User -
To delve into clients' pain points, I interviewed some participants, people of all genders, between 18 and 60 years old, who had done a photo session in a photo studio. I had previously prepared the interview, some notable questions were: how they would improve the service they received, and how they scheduled their appointments, by phone, website or directly on the site.
User Research: Pain Points
01.
Clients cannot choose their photographers, they would like to see a bit of their work before doing a session with them.
02.
Sometimes clients cannot choose the date and time they want to do their photoshooing.
03.
The desired categories are sometimes not available because not all photographers can do these photos.
Persona Development
With the information I obtained from the interviews I created empathy maps, user stories and finally personas. The personas you see below represent what users experience.
Amelia and Rodrigo need to have a photo session, an application that shows different photographers, their profiles, styles and prices would help them find their ideal photographer, one that fits their needs, expectations and schedules.
- Starting the Design -
Starting to create a design from scratch requires a lot of imagination, having an open mind to changes, and of course, putting the craziest ideas on paper, from which the best design for the prototype will come out.
Based on the data I obtained during the empathizing phase, I began the design process.
User Flow
To organize the ideas I had about the process users should take, I made the following user flow, it shows the steps the user would follow when making an appointment through the App, summarizing them in five important points:
1. Choose the category.
2. Choose the photographer.
3. Choose the date.
4. Schedule the appointment.
5. Payment.
Sitemap
The next step was information architecture. The goal is to create an app where users can view different photographer profiles, easily connect with them and book a session. I really want the process to be easy so I decided to design a prototype as austere as possible. With this in mind, I made the following system map.
Paper Wireframes
I continued designing the paper wireframes, I tried a few paper options before going digital. I modified the initial wireframe several times until I found the best option. I decided to start by choosing the category, because some photographers tend to specialize in one subject at a time. Therefore, knowing what category the client wants helps to find the right photographer with more certainty.
The stars mark the elements chosen for the final wireframe
Refined paper wireframe
Once I had the home page ready, I also made the paper wireframe for the rest of the prototype. Of course I had a lot of ideas, especially when it came to the calendar.
Paper wireframes for all the prototype
Digital Wireframes
I had several ideas about the calendar, in the end I decided to try the one presented below. I made the wireframes I considered necessary for the process in the tool Figma. In the lower bar I added two new buttons, the search and the calendar button.
Choose the category
Choose the photographer
Choose the date
Confirm and pay
Low-fidelity Prototype
Once I finished the digital wireframes, I made the necessary connections for the low-fidelity prototype, and with that I prepared the first usability study.
You can try the low-fi prototype here: Low-fi StudioMApp
Usability Study
The next step was to test the low-fidelity prototype with different participants, in a usability study. To do this, I planned it in advance in writing, defining objectives and KPIs and research questions. The usability study was carried out following the parameters presented below.
Parameters
Study type:
Unmoderated
Usability Study
Location:
Munich, Remote
Participants:
5 people
Length:
20-30 min
Findings
Fixed elements
01.
Calendar
In this prototype the calendar is fixed, so participants could not choose the date they wanted, and they also wondered if the photographer would be available because it was not possible to know.
Only option
02.
Full profile view
Participants wanted to see reviews and read about the photographer before choosing them.
The function is not needed here
03.
Unnecessary button
Participants commented that going to the calendar from the bottom bar did not make much sense, that it would be better to see the appointments directly.
- Refining the Desing -
Being this my first project, I moved forward little by little. I must say that this was a long process, full of changes, I was doing my own research on the internet on how to improve the prototype. Thinking about how I could solve the pain points, I tried a lot of things, especially the calendar.
01.
Interactive calendar
In the new prototype I changed the fixed calendar for an interactive one, I also changed the format.
Date
Time
02.
Full profile
I added the read more button to see the photographer's full profile.
03.
New button
I changed the calendar button to favorites, I also started experimenting with color and fonts.
New button
After making the previous changes and carrying out a new usability study with the following prototype, click here to try it.
- Iteration Process -
With the results I obtained from the new usability study, I realized that there was an error in the process, since if the user carried out the following steps: first choose the category, then choose the photographer and finally write the date on which the user wants their appointment, they will not know if the photographer is available to do their session.
Here I made the biggest change to the process, instead of choosing the photographer first, it was more important for the client to enter the date they wanted to have their session, this way they could see the photographers available for that day. Among other changes I made is that I added images and also chose the font.
Previous Process
1. Choose the category.
2. Choose the photographer.
3. Choose the date.
4. Schedule the appointment.
5. Payment.
New Process
1. Choose the category.
2. Enter the day, time and city.
3. Choose the photographer available on the date the user entered.
4. Schedule the appointment.
5. Payment.
First Mock Ups
Hi-fidelity Prototype
Once the mockups were finished, I went on to make the connections in the high fidelity prototype that you can try it here Hi-fi prototype.
This is an iteration process, so once the new usability study was completed I went on to make the necessary adjustments.
I was experimenting with the Adobe XD tool and decided to change the entire prototype here, since I had started the second part of the project also in Adobe XD and I wanted the two Studio M projects to have the same style (the responsive website and this dedicated mobile app). I made several changes, including creating new mockups with an improved image.
New Mock Ups
Modifications After Usability Studies
Before
After
Replacement of buttons, font and theme
On the initial screen I made three modifications, the first change was the color, I went from a dark theme to a light one and also the font style, I chose a more readable one, I applied this change to the entire prototype.
The next modification was to replace the search and menu buttons (top left) with "my profile". And the last modification was the space, in the new prototype I focused on improving the vision for the user.
Before
After
Change buttons
In this section of the prototype there were several modifications, among them the calendar format, now in a single button it is possible to add the date and time of the appointment, it is also interactive so it facilitates its use. Another modification in the new prototype is the button to add the location, so an extra page for this information is not necessary. Another change in this section is the number of people, here I added a description below and it is now more specific. The last modification is the "next" button, it has now been replaced by "continue", I updated all the buttons in the rest of the prototype, they are all the same size and shape.
Before
After
Continuity
Same size and shape for all buttons
Image continuity
The most notable change in this section is the continuity of the images, previously the photo that followed was not visible, now it is clear. One more modification is the size of the buttons, I adjusted them throughout the prototype; I also added a cancel button at the top right.
Before
After
Center profile
For the photographers profile, I added the photo and relevant data to the scepter. I also added more spacing between the lines to make it easier to read. In the new prototype there is a cancel button at the top right. I gave more emphasis to the photographer's description, it is possible to add more photos in the previous section.
New section
Confirmation page
Previously there was no confirmation page for users to review all the appointment data, in the new prototype I added this section, before making the payment it is possible to read the summary of the session, make changes or continue.
- Final Version -
After a long session of testing and modifications to previous prototypes, the final version is ready. It was hard work with a lot of learning, especially in the design, components, colors and fonts. I am happy with what I created and open to new changes that improve the user experience. To test the final version of the prototype click here, I look forward to your feedback.
- Accessibility -
I used clear messages for users, instructions in the process to facilitate the use of the application.
I used a contrast between the text and the background, I used visually accessible colors according to the rule 60, 30 , 10.
I organized the information hierarchically so that users easily navigate the process. I took into account the size and style of the font to improve the readability of the text.
- Takeaways -
I am very happy with this project, I gave it my best. Since this was my first prototype, I tried a lot of things, I learned a lot, and the first two prototypes helped me better use the tools I had. Among the most relevant things was always being open to change and feedback. With patience step by step you reach the expected results, there are always things to improve and that is what this work of continuous improvement is about.
Contact with the user is essential for progress in the prototypes, it is the basis, I am glad to have taken all the comments into account, without them I would not have been able to improve.
Next steps:
Conduct a new usability test, follow up on user needs and comments to improve the prototype.
Iterate the prototype, look for areas of opportunity and improve them.