Lesson Learned: One Welcome Screen Story

With my latest project, I went through rounds and rounds of design iterations. And my final design of some screens went far from the first wireframe. I thought it might be useful for other designers to share the insights and lessons I learned along the way.

But first, let me do a quick introduction of the product for better context. It’s a service for finding jobs and professional courses in Israel, and also for better understanding a local job market. The service is targeted to new immigrants with significant job experience. For the sake of this post, I want to focus on one screen that went through the most drastic change – the welcome screen. The purpose of it, as I initially thought, was to familiarise a new user with the app possibilities.

Wireframes

I started literally laying out all the features of the app on this screen so new users could see what they could do in the app immediately. There were progress bars, tags, different types of elements – for every element, I defined a purpose and thought of it as of an essential piece.

In reality, during testing sessions, users were confused by the amount of the information that the app dumped on them. Unifying all the parts gave more peace to users.

Lesson Learned: Too much information from the start can distract the user and prevent him/her from completing the task.

So I’ve already got rid of some elements and left only the texts. My intention was still to give the user information. I hypothesized that a user unfamiliar with the app would prefer to ease into it, look around, and read about the possibilities. But that wasn’t the case as tests showed. More users were able to complete the task I assigned to them, but there were some complaints. Large chunks of text still confused my users. It was time to simplify even more. Transition to graphics gave positive results: users started to identify the app features immediately.

Lesson Learned: It’s ok to get rid of the elements entirely even if they seemed reasonable when you designed them.

High-Fidelity Mockups

To move from wireframes to mockups, I developed a style guide, UI kit, and different visual rules. I carefully picked the primary, supportive, and accent colors, created fonts hierarchy, and designed other components. I compiled my mockups from these components, and it was time to re-evaluate the effort.

As we live in a brand new world where there are no borders and boundaries… Sorry, I’ve got carried away. Anyway. My product is meant to be used by different users, including those who have different impairments. There are many actions a designer may want to take regarding accessibility. For the sake of visual design, I wanted to make sure that my screens are readable for people with vision limitations.

I used a contrast checker and failed almost all the tests. I had to work on the colors and color combinations. Also, I aligned the fonts with iOS Human Guidelines for the same purpose of readability.

Lesson Learned: Always check your design in regards to accessibility: at least, colors and font sizes.

After this iteration, I ran several user tests, and they showed that users didn’t understand that “find a job,” “improve your skills,” etc. are clickable buttons. I had to deal with it, make them pop out, and attract users. I dived into this task and tried different places, sizes, effects, illustrations, etc. Nothing seemed to work; everything looked crowded and ineffective. But suddenly I had an insight.

Users will enter this app with one main goal: to find. It doesn’t matter what – jobs, courses, information. The core feature is the search. So a user should see this feature right away and not be distracted with other elements.

So. As a next step, I decided to move possibilities demonstration to an onboarding screen for new users, and on the welcome screen, leave only the heart of the app. (The primary color also got darker for further accessibility and visual aesthetics.)

Lessons learned:

• If you think that you’ve designed a crisp, neat button, it doesn’t mean that a user would notice it. Test everything.
• Always keep in mind the main task of the user. Again, don’t be afraid to get rid of elements if they distract the user from it. Even if you put much effort into them.

I’m sure that further along the way, I will have more user tests and more discoveries, so – to be continued.