Mobile First

Who am I?

I am an extremely open minded UX designer (7 years) with more than 8000+ hours doing semi- structured user interviews (UX Research) who is a generous, strategic thinker and data driven in my designs to get results for the business.

Togheter with my overwhelming love for neuroscience and experience in UX research I try to combine the research from the psychology field and incorporate that into my ideations and user flows. It also helps to evaluate user attitudes, pain points, goals and user tasks to deliver a user journey and then a design solution.

Being open in my personality is a huge benefit since that makes me think laterally more easily when conceptualising user journeys and empathising with the users.

With my high empathetic scores I have the tendency to empathise very well with the user and stakeholders in a project. Coworkers describe me as helpful cross functionally throughout an organisation which you can read about in my recommendations on LinkedIn.

I have coached people all my life and I thrive on Google Scholar where I spend most of my reading time becoming more knowledgable in the field of biology, neuroscience and evolutionary psychology.

I do so to become more proficient in my field as a UX designer since that will make me more able to solve the users problems and in turn increase ROI for my company that I work for.

How do I accomplish that? Well, read on.

Empathize

This case study involves this website focusing on those that want a picture taken of them selves or someone els for private or commercial use and those that want to hire me for my UX Designer skills among other skills in analytics that I possess and master.

But there is a problem with this concept and that is that you easily confuse the one user by adding a mixture of them both.

So one of the goals is to separate the two users from one another simply by letting the main marketing approach be as a photographer.

For UX designer contacts, guide the customer in the hiring process to the UX design page. Still adding value to my name as the brand.

So lets start of with the user stories for the photography part:

“I want to be able to book a photoshoot, so that I can present myself or a product in the best possible manner”

Accessibility User Story:

“I want headings to be identified as actual headings, so that I can navigate the web page by heading and understand the page’s structure.”

Now for the Company part:

I want to be able to read about who Joakim is, what he can do and how does he work and think so that I can make a calculated decision if he is capable of performing what I am hiring him for”

With the user stories in place I could then start producing Proto Personas(estimations) to understand what tasks the different users have to perform on the website to complete their different goals.

Defining

This Case study will only focus on the photography part of the business and thus the first and second Epic.

Now I could have done a survey to get information about the user and what is important but I choose to not do that with this design due to low budget and time constraints.

I started with doing market research to find common patterns for photography website as to there are already mental models for users and best practice. I did this so that customers that are repeat buyers will have a mental model of how to find things on a photography website or mobile site.  I choose a  Mobile first approach will still have an obvious flow through the website.

With the Proto Persona in place together with market research where I researched famous photographers websites around the world. I could ideate a preliminary user flow and customer journey for the photography part that could be shaped and moulded as to start the wireframing.

Goals and KPI’s:

1. Conversion rate: Number of sent messages (number of thank-you.html)

2. Time to sending message

3. Bounce rates

Ideation

My strategy was Mobile First which basically means that I start with designing so that the website works good on mobile and not desktop. I choose to prioritise Mobile users since most models might not own a desktop or laptop for that matter. This way I will broaden my customer base and increase ROI.

I made one deliberat exemption from Mobile first on the picture portfolio page. I choose to incorporate scrolling even though it is fragmenting the page. But as the model might be hesitant as to hiring me I need them to feel comfortable in seeing enough images so that they know what they will get.

I used only my own pictures taken as a photographer and pictures that shows where the model is looking in combination with text and buttons to direct.

The psychology behind is that humans first look at another person's eyes and then according to gender reproductive styles. But all humans can identify the iris of the eyes as to see what they gaze upon.

That is a survival mechanism to spot potential threats and if the human is friendly or not. That is built in together with the part of the brain where you find Empathy.

In this design I use it to direct the gaze of the user to the text and therefore instill the “Von Restorff Effect”.

Wireframing

High Fidelity Prototyping

First I started with designing a few master components in Figma and extracting designable variants from them in order to facilitate faster prototypes. It does make a difference to have some sort of structure in the product design to speed up the iterations and save time. 

In this project I am the sole designer and stakeholder even though you might argue that the users are also stakeholders which they are.

Though consistency, accessibility, buttons for actions, links as underlined since apps are distinguished by not being underlined.

Fixed menu and a visible button on the loaded screen to proceed to the next page in the user flow to complete tasks of sending a message to me.

Test

Quantitative A/B test

Hypothesis testing where we test for significant of 5% (Qui Square Test, Sampel size >50=N). Tool that is used for the A/B test is Optimize (Google) and a redirect test since there is an alternative landing page.

Goal:

• Significant lesser bounce rate.

• WCAG 2.0 & GDPR Compliant

Hypotheses:

• H0 - A: Original (Left)

• H1 - B: Variant (Right)

Weight:

• 50/50 percent spread.

Visual bias

ARGUMENT: “Why not go for the design you like? It will be cheaper!”

As humans we have individual preferences that are set in motion partly through your genes and personality.

But also from your environment and from your interactions with nature and other human beings and their behaviours growing up. Since you are NOT a supercomputer but more or less biased through “visual bias” for one.

You will never determine what your users like or do not like in any other way than through user test (qualitative research) in a real environment or through data collection (quantitative research).

Randomised to determine significance of 5% which is adequate in User Experience design. We are not making vaccines where a significance of 1% is required.

If you are a Stakeholder you do not want my UX Designer biased opinion but Design Opportunities that is backed by significant data. That is Data Driven Design.

Together with Accessibility Testing (WCAG 2.1/508) the design will be holistic and Inclusive for all users.