Mónica Velázquez

Role: UX designer

UX researcher

Tool: Pen and paper Adobe XD

Duration: July to September 2023

-Make your hobby your job!-

As a photographer I realized that it is difficult to find new clients, and that many times the only way is by recommendations from acquaintances or through social media. Studio M is a platform for photographers who want to find new clients. Most of the users are freelance photographers within all ages. Studio M's goal is to help photographers and clients connect quickly and easily.

My goal:

Design the website with the registration process for photographers who want to join Studio M, and find new clients easily.

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.

-Understanding the user-

I conducted interviews with photographers about how they found their clients and what they enjoy most about their work. I discovered that most have a special category that they like to photograph, and it is not very easy to contact new clients outside their social circle.

User research: pain points

1

The only websites where you find photographers are mixed with other careers such as graphic design, among others, also making a portfolio takes a lot of time.

2

It is not possible to choose the category of shooting that photographers want to do, sometimes they have to do a category that they don't like so much.

3

Finding new clients outside the circle of friends is complicated.

Persona Development

After the interviews and finding the pain points, I was able to create personas that reflected what photographers experience like "Alexa, she is a photographer who needs an easy way to connect with prospects and show her work because she wants to find new customers".

User journey map

After the persona...............

-Starting the design-

I ...............

Sistemap

The next step was the information architecture, the goal is to create a registration page for photographers, easy to use and with clear tracking in the process. Considering that users sometimes don't have the opportunity to choose the shooting category, I made sure that a section within the website gave them the freedom to choose.

Paper wireframes

The next step was the paper wireframes, I made different models, I had many ideas, I liked several elements for the home page, but since it was a registration page I focused on the most important thing “the sing upbutton”. I tried to make this step as easy and visually attractive as possible for users.

All elements marked with a star are part of the main page, in the order they are found, I combined them all to make the final version of the wireframe with the best of each one.

The stars mark the elements chosen for the final wireframe Refined paper wireframe

Paper wireframes screen size variation

Users are not always on their computer, sometimes they want to enter from other devices, so I started working on designs for other screen sizes, in order to make a fully responsive page.

Ipad Iphone

Digital wireframes

I continued making the digital wireframes in Adobe XD, focusing on the important elements like the "Sign Up" button and the navigation menu, also leaving enough space between the elements so that the design was clear.

Low-fidelity prototype

Once i had....... I made all the corresponding connections.

You can try out the low-fidelity prototype here: xd.adobe.com/view/fd7ea23e-8443-418c-99c3-d3f3f38e200c-a82d/

Usability studies

Parameters

Study type:

Unmoderated usability study

Location:

Munich, remote

Participants:

4 people

Length:

20-30 minutes

Findings

1

Participants find two buttons unnecessary to continue to the next page.

2

Some "help" buttons were too large, confusing participants into thinking it was the continue button.

3

There were no return buttons; when participants wanted to review something on their profile again, it was not possible to return to the previous page.

-Refining the design-

I cond.....

Mockups

After...............

Before usability study

After usability study

1

Finding

1

Next + Continue button

One continue button

Before usability study

After usability study

2

Finding

2

The help button is very large and confusing

One continue button

Before usability study

After usability study

3

Finding

3

No return button

Return button at top left

Mockups original screen size

After the persona...............

P

C

Mockups screen size varations

I

P

A

D

I

P

H

O

N

E

High fidelity prototype

You can try out the hi-fidelity prototype here: xd.adobe.com/view/4e2f90e2-d395-4645-9678-3805ea131d35-1b7c/

IPAD

You can try out the hi-fidelity prototype here: xd.adobe.com/view/03a78cd2-270b-4fe1-959a-23451a882ec1-56f4/

IPHONE

You can try out the low- fi prototype here: xd.adobe.com/view/d12f3b3e-46d0-4ddb-b25f-6671f20e02d8-847c/

Accessibility considerations

1

I used titles with different sizes for a clear visual hierarchy.

2

I used visually accessible colors for the most relevant buttons.

3

I used images instead of text to make it easier for users to understand.

Final prototype version

You can try out the final prototype here: xd.adobe.com/view/4e2f90e2-d395-4645-9678-3805ea131d35-1b7c/

Final prototype version

You can try out the final prototype here: xd.adobe.com/view/03a78cd2-270b-4fe1-959a-23451a882ec1-56f4/

Final prototype version

You can try out the final prototype here: xd.adobe.com/view/d12f3b3e-46d0-4ddb-b25f-6671f20e02d8-847c/

Takeaways

Impact:

Users commented that it is easy to navigate, clear and the images are visually attractive. The hierarchy is simple and fun.

What I learned:

Details are extremely important in design, a small detail can make a big change. The user must be listened to at all times, they are the ones who set the tone for improvements in the design, adapting to their needs will make a functional design.

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.