RightIndem Digital Claims App

Learn my process behind taking a product that existed only as an idea into a live customer environment along with an accompanying product landing page and a design system that included a component library, style library, and visualisation library.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fv7Lck9ep3BgKeD7RYHWnWJQdQo33%2FSAwgeaBqXPdzygZb0qPH%2Fb0f614b3-6fb9-4fcf-bc00-180b10448697.png?alt=media&token=eb528c8b-5070-4d45-92dc-e66b97907bc6","id":"b0f614b3-6fb9-4fcf-bc00-180b10448697","width":3200,"height":2400,"filename":"mr-candidate-profile.png","type":"image/png","caption":"The candidate results","border":false}]}
```

---

## Research and Discovery

When I first started at Magnetic Rock, our product (Potential) was an idea. It was the idea that we could deliver a range of assessments that candidates could complete, and the results would reveal their hidden potential, which cyber administrators throughout the US and UK could use to find a suitable role or profession within the cyber security domain.

Potential would have two distinct user personas: candidates and assessor administrators. For candidates, our product would offer various assessments that they could take, and each assessment would offer different benefits. For instance, our role-finder assessment could identify the most suitable role for an individual within cyber security based on their skills. Our potential finder assessment, on the other hand, would be able to identify aptitude and skill scores, which would inform the administrators of a candidate’s hidden talent and skills that may have been missed or gone unnoticed.

### Understanding academy administrator requirements

In order to discover customer requirements, I had several conversations with the Product Owner, our Lead UX Researcher, and our Chief Creative Officer as he was also an investor in the company and product and therefore had market and industry knowledge. I was also part of the customer workshop sessions that we had with SANS and their academy administrators, who would be our primary users of the insights portal and candidate dashboard. In these sessions, I asked the appropriate questions in order to understand their goals and requirements, but more importantly, their *"why"* in order for me to begin to create user personas and user need statements.

### Understanding candidate requirements

In order to learn more about candidates and their expectations and interactions with our assessments, we ran a series of paid user trials using a subset of questions from one of our cyber security assessments. These trials offered small cash incentives to the applicants, and this enabled us to analyse their journey through the product so we could monitor various stats that we could use to inform improvements moving forward.

I liaised with our Product Manager to discern her thoughts on key product features and to understand existing stories that existed within Jira. I began to learn the key features that we needed for our first release and started to understand long-term requirements from those that were most pressing. I discovered that no design system or component library existed, and this was made part of my design strategy to create one. As we also had no front-end developer within our team, I put forward a small set of requirements for the role specification to ensure that a candidate with experience in creating and collaborating on design systems was brought into the team. Due to my previous experience using Storybook and Chromatic, I asked if an individual with these skills and experience could be hired.

---

## Define

Once I had gathered a solid understanding of the product we were looking to build for our first release and the customer and business goals that it would set out to solve, I had to define a design strategy and some design values. Based on our user personas and the intentions behind the product, I created the following principles:

* 🧦 Intuitive and familiar

* 📎 Beautiful in simplicity

* ♿ Inclusive to all

* ❤️ Consistent and honest

* ☝️ Make thoughtful design a priority

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fv7Lck9ep3BgKeD7RYHWnWJQdQo33%2FSAwgeaBqXPdzygZb0qPH%2F4b887c04-c3a4-4c13-a189-f74b2b78f274.png?alt=media&token=b3b4a2c9-1f63-46cf-b4eb-e574f4ed0468","id":"4b887c04-c3a4-4c13-a189-f74b2b78f274","width":1906,"height":2478,"filename":"Screenshot 2023-07-10 at 14.07.41.png","type":"image/png","caption":"Potentials' Design Principles","border":true}]}
```

In addition to these principles, a prioritisation of features was also required. Prior to starting, our product manager had gathered a plethora of product features in Jira; however, these were largely undefined and not prioritised, so I ran several sessions to understand the needs behind each feature, which enabled me to focus on those required for version one and those that could be developed in the future. In addition to these features, I wanted to ensure that the user was at the centre of all design work and that the entire team would be aware of what user goal each feature would be solving. I, therefore, created a template within Jira that each new user story would use. Within this template, I added a User Need Statement that also included the user scenario. For each new story that I created, I ensured that this was complete and I would communicate this statement to the engineering team ahead of presenting low-fi mockup work in our sprint refinement sessions. This enabled the entire team to understand the context of use, but more importantly, it offered them the chance to offer design suggestions or alternative solutions that may be a better resolution to the goal.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fv7Lck9ep3BgKeD7RYHWnWJQdQo33%2FSAwgeaBqXPdzygZb0qPH%2F9ee8b445-9859-402f-9883-fb8e5bbc0f6e.png?alt=media&token=9e713809-047a-4a20-8771-eb7f7c5b2ec1","id":"9ee8b445-9859-402f-9883-fb8e5bbc0f6e","width":1294,"height":736,"filename":"Screenshot 2023-07-10 at 14.18.21.png","type":"image/png","caption":"An example of a completed User Needs Statement within each Jira Template","border":true}]}
```

### Design System

I also defined that a design system was required as part of our version 1 release. Due to the time pressures of the release and the potential backlog of work, if the design system was far down its development path before a front-end individual was brought into the team, I wanted to ensure we only built the components and states we used. For example, we would require a button component; however, early on in the design phase, there were no indications that a button would need to exist in multiple sizes or multiple states (destructive, secondary, tertiary, etc.), and so I only built those that were actually used. This was a more efficient process, and it reduced the number of components that would need to be developed once we had the individuals in the team to do so.

I also made the decision to adopt the Atomic Design System principles for our design system. This would also help with efficiency as atomic components such as buttons and input fields would be reused in molecules and larger components such as form patterns.

---

## Design

The first stage in my discovery process was to identify the aforementioned product goals and features and to begin mapping out user flows. These would all be low-fidelity mock-ups, as I would want to include our Lead UX researcher to ensure the flows would be suited to our user research findings.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fv7Lck9ep3BgKeD7RYHWnWJQdQo33%2FSAwgeaBqXPdzygZb0qPH%2Fa0731064-00a6-4ac7-9420-f69dcfd1ca8b.png?alt=media&token=7702c834-d35f-4c15-bc11-eb431d52252e","id":"a0731064-00a6-4ac7-9420-f69dcfd1ca8b","width":2944,"height":1534,"filename":"Screenshot 2023-07-10 at 14.43.29.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fv7Lck9ep3BgKeD7RYHWnWJQdQo33%2FSAwgeaBqXPdzygZb0qPH%2Fa81a8450-dc7e-42c5-86a6-b3acfa41ee23.png?alt=media&token=0dbb659d-7b16-421e-a3d4-3d58325b0a99","id":"a81a8450-dc7e-42c5-86a6-b3acfa41ee23","width":3664,"height":1332,"filename":"Screenshot 2023-07-10 at 14.44.18.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fv7Lck9ep3BgKeD7RYHWnWJQdQo33%2FSAwgeaBqXPdzygZb0qPH%2F54ffb00e-a5f6-4608-b021-c48c754f1b3b.png?alt=media&token=a9440040-fe30-4520-9f55-f472e331083b","id":"54ffb00e-a5f6-4608-b021-c48c754f1b3b","width":2602,"height":1772,"filename":"Screenshot 2023-07-10 at 14.44.33.png","type":"image/png","caption":"","border":false}]}
```

The creation of these flows was an iterative process in which I included our Chief Creative Office to ensure they aligned with our business goals. At this stage in the process, the focus was on creating and understanding the user flow, so I opted for flow-based diagrams as opposed to low-fidelity screen mock-ups. This was intentional, as at this stage, I wanted to ensure the optimal high-level journey was correct so I could concentrate on the call to action and finer interaction styles further in the process.

I also had regular discussions with our Lead UX Researcher in order for him to analyse and compare these flows against his own customer research to ensure they would meet the customer's needs. I would take the leading role in iterating these flows, and once I had created both the customer’s happy and unhappy paths for all flows in our version 1 release, I moved on to creating our low-fidelity screen mockups in Whimsical.

At this stage, I also introduced a new way of working in regards to discussing the flows between myself and the team. I asked our Lead UX Researcher, Product Manager, and Front-End Developer to all create a Whimsical account in order for us to utilise the comments feature of Whimsical. Comments were used as a means of collaboration and communication on specific features, as we could target specific areas of a flow to discuss any concerns or unanswered questions. By integrating this into our team slack channel, we were also notified once new comments were left or once the discussion was closed.

Within Whimsical, I also introduced a visual key for annotations. This key would communicate the different annotation styles in order for the different requirements to be visually understood. The key I introduced was fairly simple and consisted of the following:

* **Yellow** annotations were to indicate post-v1 features. This was useful as it allowed the engineers to be aware of what may be required in the future in order to consider scalability.

* **Pink** annotations were specifically for the attention of engineers. These may describe functional intentions or promote specific discussions around interaction.

* **Blue** annotations were general thoughts and comments on design and user flow.

* **Red** annotations were used to indicate unanswered questions, which could be specific to design, UX, or engineering.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fv7Lck9ep3BgKeD7RYHWnWJQdQo33%2FSAwgeaBqXPdzygZb0qPH%2F112b417e-b368-4d9b-8a20-3987e86839c8.png?alt=media&token=38608cfd-1a68-4ab4-a2ef-9273afc1e1a6","id":"112b417e-b368-4d9b-8a20-3987e86839c8","width":2198,"height":1968,"filename":"Screenshot 2023-07-10 at 16.09.32.png","type":"image/png","caption":"Different annotation colours are introduced for specific discussion and awareness","border":false}]}
```

### From low-fidelity to high-fidelity design

Once all Whimsical journeys were created and the same collaborative process between myself and our Lead UX Researcher had taken place, I commenced the high-fidelity design phase in Fimga. Alongside this, I also created designs for components that would need to form part of our design system.

As the Potential product is a responsive web application, designs were created for both mobile and larger devices and resolutions. Initially, I adopted the use of a specific set of pre-defined breakpoints that were largely based on the most common and popular screen resolutions. However, as our Front-End Developer and I researched more into CSS container queries, the more we felt these offered advantages over a more traditional approach. Using CSS container queries, we could ensure each component was adapted to suit its content and not determined by an existing breakpoint. This aligned more closely with my “content-out” way of working, which promotes content over the container, and the more the project moved forward, the more this became a project-wide rule.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fv7Lck9ep3BgKeD7RYHWnWJQdQo33%2FSAwgeaBqXPdzygZb0qPH%2F83a39d16-8c52-4d7a-b332-82d5a3e27e52.png?alt=media&token=a6e370e9-8ee3-44df-ad3a-0f02ef2e6b3e","id":"83a39d16-8c52-4d7a-b332-82d5a3e27e52","width":2212,"height":1850,"filename":"Screenshot 2023-07-10 at 16.20.13.png","type":"image/png","caption":"High-fidelity design of Potential","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fv7Lck9ep3BgKeD7RYHWnWJQdQo33%2FSAwgeaBqXPdzygZb0qPH%2Fe5ea0b55-eff3-4cfb-a2c0-a26506952b7a.png?alt=media&token=7409a23a-b79f-45e2-871d-c9abe1459775","id":"e5ea0b55-eff3-4cfb-a2c0-a26506952b7a","width":1854,"height":1876,"filename":"Screenshot 2023-07-10 at 16.20.26.png","type":"image/png","caption":"High-fidelity design of Potential at smaller breakpoints","border":false}]}
```

### Design to development

One of my goals is to always work closely with the development team. I like to ensure that the Whimsical user flows, Figma high-fidelity designs, all supporting user journey information, user need statements, and acceptance criteria exist within the story, feature, or ticket, and these have been discussed with the team ahead of them starting the work. Usually, this is discussed in sprint refinement and sprint planning ahead of the sprint starting to allow any changes to be completed before the task is commenced.

As part of my design work, I always aim to build a design system or continue the development of an existing design system that supports and underpins the product. A design system offers a plethora of internal advantages, product advantages, and end-user advantages, so I always try to ensure that product designs use components from our design system. As part of the development of a design system created in Figma, I try to ensure that a working version of the design system also exists. For the Potential product, we created a developed version of the product using Storybook and Chromatic and integrated these with Slack to notify me when new builds were ready for review.

***WIP, more to follow...***

Potential: Case Study

How I built a design team and implemented a design strategy for a fast-moving, market-disrupting startup company.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fv7Lck9ep3BgKeD7RYHWnWJQdQo33%2FYKIlwgCAlnq9T5GVElRu%2F49f9c9e2-29e1-41b9-9b7e-24691c19683c.jpg?alt=media&token=2ef8101b-4c84-4f42-a66f-ba956042ad85","id":"49f9c9e2-29e1-41b9-9b7e-24691c19683c","width":1280,"height":960,"filename":"IMG_5537.JPG","type":"image/jpeg","caption":"Our team enjoys a pizza before a local design meetup.","border":false}]}
```

## Starting at RightIndem

As the first design hire at RightIndem, my role and responsibilities would be to lead the product design, turning it from an idea into a deployed working product in multiple live customer environments. This would involve:

* Understanding business requirements through close collaboration with our CEO and CTO at the time

* Understanding customer requirements through face-to-face meetings, user workshops, and conference events

* Defining a product strategy and a design plan, which involved working closely alongside the Product Owner

* Building a design system to underpin all design and product work

* Relaunching the RightIndem brand, including a new website, marketing presence and brand identity guide

* Growing the design team when appropriate, which involved direct participation in the hiring process, conducting 1:1s and employee appraisals and identifying objectives to support their career growth

These responsibilities, along with working within the fast-paced environment of a start-up with a global mission, were a role in which I thrived.

---

## Take stock

My priority was to take stock of the product that currently existed and all supporting product assets. I also wanted to learn about the current design process, the development process, and any communication channels or processes that existed between them.

I discovered that there was a lack of design process and design strategy, no design system, and the tooling was not optimal for generating rapid mockups or high-fidelity product work. There was also a blend of designs that were using an off-the-shelf design system, design work created by freelancers, and some designs created by the development team.

When I started, a junior designer was part of the team after completing a placement with the company. This individual showed a great deal of potential, so I wanted to help mentor him and understand his ways of designing and learning. I quickly gathered that his preference for learning was by “doing,” so I immediately changed his development plan from watching Pluralsight videos to designing and building product features.

---

## Defining a design strategy

Once I had an understanding of everything that existed and where I could implement positive change, I began to implement a design strategy to successfully take the product forward. Within this strategy, the following high-level **goals** were included:

* The start of a design system (Sketch) by the end of Q1

* Align the design roadmap with the product roadmap

* Promote and advocate a “design-first” culture

* Gain an understanding of the entire end-to-end customer journey

* Create a specific design backlog

* Support the career development of our junior designer

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fv7Lck9ep3BgKeD7RYHWnWJQdQo33%2FYKIlwgCAlnq9T5GVElRu%2F471a2b89-65a9-4c15-b349-2c2746f60eb1.jpg?alt=media&token=939f9daa-b090-4970-a547-fb94d61d78a2","id":"471a2b89-65a9-4c15-b349-2c2746f60eb1","width":2000,"height":1500,"filename":"1_hmCCwz952SJvcqDDA53iXg.jpg","type":"image/jpeg","caption":"My process of understanding the entire end-to-end customer journey whilst deliberately placing this on the office whiteboard for team inclusion and visibility","border":false}]}
```

I also wanted to improve the ways of working between design and development, so the following **processes** were also identified:

* Low-fi mocks will include all team members' participation and collaboration

* A developed version (Storybook) of the design system

* More office whiteboards to encourage full team inclusion (read my [Medium article](https://medium.com/@paulwallas/reasons-why-every-design-team-should-have-a-whiteboard-bb6db7da0686) on this)

As part of the strategy definition, I also wanted to ensure that we could measure success in order to understand how these goals and missions could be adjusted if needed. The following **success measures** were also included:

* The design team can create new product features within two weeks of the start of the next sprint (without using design sprints)

* Design can make amendments to designs mid-sprint without affecting sprint velocity

* The ability to create new client POCs within a 4-hour turnaround time

---

## Implementing design foundations

Once my design strategy was in place and I had confidence in how success could be measured for its implementation, I began to lay some important design foundations alongside the day-to-day development of the product design.

### Design values

Design values acted as my guiding stars, and therefore I intentionally set them without success measures. I also wanted to create these values in preparation for growing our design team in order to allow each team member to be mindful of them during their design process. This would help create consistent design patterns and product interfaces as we all shared the same set of underlying values.

The values I put in place were specifically suited to the user persona for version 1 of our product and the customer research and requirements that I had gathered. These values were:

* **Be deliberate**—design should be an intentional action and have meaning, requirements, and a rationale behind its inclusion.

* **Add value** — design should add value and be imperative to the user flow. Anything without meaning will detract from something that does.

* **Discoverable** — our UI should be self-evident, and intuitive, avoiding the use of hidden gestures to align with our user personas.

I placed these values in our central repository and pinned them in our Slack channel for easily discoverable purposes.

### Design roadmap

The second foundation was the development of a design roadmap. I worked closely alongside the product owner to understand the product roadmap and to be able to discern product commitments and their projected launch dates from client deliverables and POC prototypes. This insight enabled me to create a design roadmap that could prioritise and separate products from non-product features, which I could then place on our design backlog in order of priority. I also identified product priorities. The RightIndem product had two user personas, the claimant and the insurer's claims handler. Understanding our priorities enabled me to make decisions at a design level, for instance, by focusing the creation of our design system on components and device resolutions that would prioritise the claimant journey and not the claim handler. These decisions were also influenced by an understanding of feature release timelines. As the insurer’s claim handler features were not due to be launched until the following year, it reduced the risk of not planning for these features in the claimant MVP.

### Design system

I also wanted to implement the creation of a design system. The primary focus at RighIndem was the MVP release of the claimant journey, and the product roadmap and development backlog were both focused on this objective. Therefore, I chose to keep the design system lightweight and focus only on creating the assets required to support the design of this MVP. This also improved the speed of delivery. As the design system would be a new addition, it was playing catch-up to the existing development processes that were in place. Focusing the design system on building only the components that were required for the journey helped our efforts in launching this within the first quarter.

The design system would also incorporate pre-existing components that offered a richer set of interaction features. I made the decision that for more complex components, such as the date picker, we would adopt an off-the-shelf offering and make simple styling changes to align it with the customer's brand. This was another decision that contributed to the speed and efficiency of launching our design system.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fv7Lck9ep3BgKeD7RYHWnWJQdQo33%2FYKIlwgCAlnq9T5GVElRu%2Ff948f3e1-a1f4-40c5-8881-81a396486a82.png?alt=media&token=92feedd1-015a-4aca-a193-29c79dedd808","id":"f948f3e1-a1f4-40c5-8881-81a396486a82","width":2048,"height":4554,"filename":"ri-button-groups.png","type":"image/png","caption":"An example of the button group component","border":false}]}
```

### Implement optimal tooling

The final foundation was to implement an optimal suite of design tools that would help me create high-level product designs, both low and high-fidelity, while also providing speed and quality for creating user personas, user flows, and user journeys. The set of tools I implemented was:

* Sketch

* Invision

* Zeplin

* Storybook

* Balsamiq Mockup

In addition to the new tooling, I also had to support our junior designer in his learning and development of these new tools. All design work prior to my joining the company was created in Photoshop, and I chose to move away from this product. Therefore, I mentored and helped our junior designer learn and understand these new tools, and as he was someone who learned by doing, he soon gathered solid knowledge and experience in using these tools.

These toolsets would also provide me with the opportunity to meet my success criteria of producing customer POC prototypes of the full end-to-end customer journey within a 4-hour timeline. To achieve this, we created an end-to-end customer journey in Sketch and each element of the design was a symbol. This allowed us to make changes in one single source that could be applied throughout the journey. We also integrated the Invision Craft plugin with Sketch in order to export the journey directly and autonomously. Lastly, we created a guide on how to make configurations to the design file and how to use it as a template for each new POC request. By the end of this setup, we could deliver new POC prototypes within 1 hour and more complex prototypes within 3 hours. This was a process that had commercial gains as it allowed the company to return to potential clients more quickly and empowered them with the ability to see their prospective user flow.

---

## Building a design team and culture

After approximately 6 months of being in my role at RightIndem, product and design development were progressing nicely, so it was time to grow the design team. After liaising with our CEO to understand available financial resources, the plan was to recruit for:

* **Mid-designer:** an individual who could hit the ground running

* **Lead/senior designer:** an individual who could mentor the junior and midlevel designers but also lead the design of a different product within the company

* **Front-end developer:** an individual to bridge the gap between design and engineering and sit with the design team

I took a leading role in writing the job description for the two design positions and conducted and ran the interview process either solely or with our product manager included. I utilised our lead developer for the recruitment of the front-end developer position.

As part of growing the design team in terms of numbers, I also wanted to create a culture within the team that would encourage honesty, humility, and respect for one another. I wanted our environment to be one where we could all learn from one another and one that empowered each of us to continue to grow our skills.

I tried to achieve this in various small ways:

* I introduced daily standups to encourage discussion and the ability to help each other by simply stating if anyone had any design blockers or issues

* I provided a range of design tools and resources that were available within our office space. As an example, I purchased the series of A Book Apart books that were available at the time

* I encouraged local design meetups that we tried to attend as a team once per month

* I tasked individuals with creating a specific design area for the design team at RightIndem. This was to operate similarly to [Airbnb Design](https://airbnb.design/) which would give us our own website to write articles, publish design thoughts, showcase side projects, etc.

* I also created a development program called Employee Badges, which helped the team grow their skills and experience without forcing them into leadership or managerial roles in the future. This is a whole article in itself, and you can [read the rationale behind it here](https://paulwallas.medium.com/employee-badges-6559cf964398).

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fv7Lck9ep3BgKeD7RYHWnWJQdQo33%2FYKIlwgCAlnq9T5GVElRu%2F1764fe09-ba96-4e9d-98e4-57e22a8577a2.jpg?alt=media&token=d3a897d9-9b9e-48da-8f85-4d37c21f4379","id":"1764fe09-ba96-4e9d-98e4-57e22a8577a2","width":2448,"height":3264,"filename":"IMG_7935.JPG","type":"image/jpeg","caption":"Our design shelf containing the A Book Apart series, whiteboard markers and more importantly, sweets.","border":false}]}
```

Building a design team for a fast-moving startup

User interface (UI) design is a critical component of product development that significantly influences how users interact with digital applications. An effective UI not only looks aesthetically pleasing but also provides a seamless and intuitive user experience. To achieve this, designers must delve deep into user psychology — the study of how users think, feel, and behave when interacting with interfaces. This understanding is pivotal in creating designs that resonate with users, meet their needs, and enhance their overall experience. This article explores the importance of understanding user psychology in UI design, emphasising its impact on usability, user satisfaction, and engagement.

## **Enhancing Usability**

**1. Cognitive Load Management**

Cognitive load refers to the amount of mental effort required to use an interface. High cognitive load can overwhelm users, leading to errors and frustration. By understanding how users process information, designers can create interfaces that minimize cognitive load. This involves organising information logically, using familiar icons and symbols, and providing clear instructions. For example, a well-designed navigation menu categorises options intuitively, reducing the effort required to find specific functions.

**2. Mental Models**

Users approach interfaces with pre-existing mental models — expectations based on past experiences with similar systems. Recognizing these mental models allows designers to create interfaces that align with user expectations, making them easier to navigate. For instance, most users expect a “shopping cart” icon to represent the place where they review their purchases before checkout. Deviating from these established conventions can confuse users and disrupt their experience.

**3. Consistency and Predictability**

Consistency in UI design means maintaining uniformity in visual elements, language, and interactions across the interface. Predictability refers to the user’s ability to anticipate what will happen next in an interaction. Understanding user psychology helps designers ensure that their interfaces are consistent and predictable, thereby reducing the learning curve and enhancing usability. For example, using consistent button styles and placements throughout an application helps users quickly recognise interactive elements.

## **Increasing User Satisfaction**

**1. Emotional Design**

User psychology emphasises the importance of emotions in the user experience. An interface that evokes positive emotions can significantly enhance user satisfaction. This involves using appealing aesthetics, engaging animations, and feedback mechanisms that make users feel accomplished. For example, a successful form submission can be celebrated with a cheerful animation, reinforcing positive feelings.

**2. User Control and Freedom**

Users feel more satisfied when they perceive that they have control over their interactions. Interfaces should be designed to provide users with the ability to undo actions, correct mistakes, and explore without fear of negative consequences. Understanding this psychological need for control helps designers implement features like “undo” buttons and confirmation prompts, which contribute to a more satisfying user experience.

**3. Personalisation**

Personalisation involves tailoring the interface to meet individual user preferences and needs. By leveraging user psychology, designers can create adaptive interfaces that change based on user behaviour and preferences. This can include customisable dashboards, personalised content recommendations, and adaptive learning paths. Personalisation makes users feel valued and understood, significantly improving their satisfaction with the product.

## **Enhancing Engagement and Retention**

**1. Motivation and Rewards**

Understanding what motivates users can help designers create interfaces that encourage continued engagement. Gamification elements such as badges, points, and leaderboards leverage the psychological principles of reward and competition to motivate users. These elements can make mundane tasks more engaging, encouraging users to spend more time interacting with the interface. For example, a language learning app that rewards users with points and badges for completing lessons can motivate users to continue learning.

**2. Flow State Induction**

The concept of “flow” refers to a state of deep focus and immersion in an activity. Achieving flow in UI design means creating interfaces that are challenging enough to keep users engaged but not so difficult that they become frustrated. This balance can be achieved by understanding user skills and designing tasks that progressively increase in complexity. For example, a game that gradually introduces new challenges keeps players engaged without overwhelming them.

**3. Accessibility and Inclusivity**

Inclusive design ensures that interfaces are accessible to a diverse range of users, including those with disabilities. Understanding the psychological and physical needs of different user groups allows designers to create interfaces that are usable by everyone. This involves implementing features like adjustable text sizes, voice commands, and alternative input methods. An inclusive approach not only broadens the user base but also demonstrates a commitment to user-centered design.

## **Practical Application of User Psychology**

**1. User Research and Testing**

Conducting user research and usability testing are essential practices for understanding user psychology. Methods such as surveys, interviews, and usability tests provide insights into user behaviors, preferences, and pain points. This data informs design decisions, ensuring that the interface meets user needs and expectations. Regular testing throughout the design process helps identify issues early and refine the interface based on user feedback.

**2. User Personas and Scenarios**

Creating user personas and scenarios based on psychological insights helps designers empathise with users and anticipate their needs. Personas represent different user types, each with specific goals, motivations, and challenges. Scenarios describe how these personas interact with the interface in various contexts. This practice ensures that the design caters to a diverse audience and addresses real-world use cases.

**3. Psychological Principles and Heuristics**

Applying established psychological principles and heuristics can guide effective UI design. Principles such as Fitts’s Law (predicting the time required to move to a target area) and Hick’s Law (the time it takes to make a decision increases with the number of choices) provide frameworks for optimizing interactions. By integrating these principles, designers can create interfaces that are more efficient and user-friendly.

## **Conclusion**

Understanding user psychology is paramount in UI design, as it directly impacts usability, user satisfaction, and engagement. By recognizing and addressing the cognitive, emotional, and behavioral aspects of user interactions, designers can create interfaces that not only meet user needs but also provide delightful and memorable experiences. The integration of psychological insights into the design process leads to more intuitive, efficient, and enjoyable interfaces, ultimately contributing to the success of digital products. In an increasingly digital world, where user experience is a key differentiator, the importance of understanding user psychology in UI design cannot be overstated.

The Importance of Understanding User Psychology in User Interface Design

Product Designer

Tips on how to successfully implement Lean UX in your workplace

Learn how to onboard co-workers and senior stakeholders with Lean UX

5 tips for creating successful company brand guidelines

Key components that allow designers of all experience to create successful brand guidelines.

Principles of UI design: Alignment

How Medium successfully uses alignment to create structure and deliver a better reading experience

5 Design tips to help create effective User Interface Designs

Simple ideas that I wish I knew when I first started out as a UI Designer

6 logical statements to help solve a design problem

How a chapter from ‘Zen and the Art of Motorcycle Maintenance’ changed my approach to all design problem solving

Why going for a walk helps designers overcome their creative block

How walking stimulates different areas of your brain allowing you to combat the creative block

Incorporating Accessible Design into Product Design: A Must for Fast-Moving Startups

Pave the way for innovation that is truly inclusive and impactful in today’s digital landscape.

Is today’s instant access digital world killing our future storytelling experience?

How a simple work conversation made me nervous for the future

What is UI channel design and why is it important?

Our screen is an information channel and it dictates the volume of information we can send to the user

Techniques for organising multiple shared sketch files

How I organise a high number of client design files which all share one central UI Library

Why design systems may not always be suited to startups

Startup life requires speed, agility and flexibility

Wireframing in Design

The benefits of wireframing, knowing when to wireframe and the differences between low-fidelity and high-fidelity wireframes.

How can UX professionals actively practise empathy?

Empathy is one of the most important skill for UX professionals as it enables our imagination to consider the world from our users’ perspective.

This article explores the importance of understanding user psychology in UI design, emphasising its impact on usability, user satisfaction, and engagement.

Design Practice: Contrast & Space

How two simple composition theories allow you to control your user’s experience

Insurance Times ‘Best Use of Technology for Customer Experience’ award in 2017 & 2018

Styles Library

This library is intended for product charts and visualisations. The colour palette has been specifically crafted to work for qualitative, sequential, and diverging palettes.

Visualisation Colour Palette: Case Study

Visualisation Colour Palette

I led the product from ideation to live production and also created a design system consisting of a component library, conversation guidelines and customer branding and tone of voice guidelines.

Digital Claims App: Case Study

Potential

I turned a complex model of a multiple customer and multiple role based system into a simple, intuitive product that would enable RightIndem admin users to easily setup and create new insurer customers.

Customer Onboarding Case Study

I was the sole designer and led the product design from ideation to delivery into multiple NHS organisations throughout the UK.

Care Partner

The component library sits at the heart of two products and adopts the Atomic design process to create a consistent user experience for both assessment candidates and academy administrators.

Component Library

Creation of the logo for a Nottingham Dev meet-up group

Notts Dev Workshop Logo

Creation of a brand logo for a Nottingham based dev meet-up

DevOps Notts Logo

An iOS app that I designed and developed during the UK lockdown to help the world improve their health, mindset, and energy via simple, easy-to-perform exercises. I called these exercises 'pockets'.

LifePockets

Bug Hunt Illustrations

Fresh out of university, I offered to work for free at a local design agency to gain skills and insight into the world of web design.

Volunteer

As Web Designer at Soula, my main responsibilities included the design and front-end build for all affiliate products for, at the time, the leading affiliate network in the US, Europe and England.

Web Designer

I was responsible for leading the design of the Potential product from ideation to delivery into a live customer environment. My responsibilities also included:

- The creation of a product design strategy, goals and values
- Defined ways of working practises between design and engineering
- Discovered user requirements and business goals through customer sessions and interviews
- Created a design system consisting of a component library, style guide and visualisation library
- Created Jira ticket templates to include User Need Statements within all development tasks
- Ensured all design work met level II of the WCAG
- Worked alongside the illustration designer to create a series of product icons and spot illustrations
- Worked alongside the chief creative officer to create the Potential landing page
- Presented biweekly ‘show and tell’ and ‘lunch and learn’ sessions

I was responsible for the user interface design of the company’s flagship product, a patient data analytical tool, which included learning and implementing dashboard designs to present patient data in a highly visual way. I was also responsible for the design of the company’s responsive website, including the front-end build using HTML and SASS and occasional print design work such as course training materials.

UI/UX & Web Designer

As Head of UX and UI Design at RightIndem, an ambitious and fast-moving startup, my role was to oversee design strategy, scalability, and deployment. My responsibilities also included:

- Defined design principles and design values for the team and business
- Identified and created user personas 
- Working alongside the CTO, I identified the technology stack that would empower the adoption of our conversational UI design
- Managed and led a team of four designers, which included setting design direction, providing feedback, and providing design mentoring
- Introduced Lean UX as a design strategy
- Worked directly with client’s to understand their needs and goals
- Worked with customer brand guidelines to ensure all aspects of the client's brand and TOV were upheld correctly
- Ensured all product designs met level II of the WCAG

A key achievement at RightIndem was our product winning the Insurance Times ‘Best Use of Technology for Customer Experience’ award in 2017 & 2018.

Head of Design

As Lead UI/UX Designer, I was responsible for the UX and UI design of the company’s flagship product, Care Partner - a responsive web-based application providing patient care tracking and coordination of essential health data. I ensured all design work was accessible to Level II of the WCAG which focused specifically on the use of JAWS technologies.

Paul Wallas

2024

2023