Ideation and design

Industry-standard design materials and principles were used to rapidly bring prototypes to life. The prototypes provided the basis for the testing of user value and to gather feedback for further iteration.

Back to Home

Takeaways: Leverage proven design patterns to solve problems. Use a design system for UI consistency and appeal. Test wireframes early. Craft the app language and tone of voice; drawing on techniques from the humanities, media, and creative arts.

Building prototypes

Paper prototypes were created. Each team member created a task-based low-fidelity design with annotations across the job application flow. To address findings of search relevance and information utility, refined filtering and job cards were proposed.

The team saw the potential for a conversational user experience. The agency of chatbots to perform friendly onboarding and lower task barriers in a natural way offered an opportunity to address needs about job search awareness and a more human-like engagement. Using research to avoid ‘Clippy’ pitfalls, the bot proposed was designed to be available on-demand, in-context of task steps, and with disclosure controlled by the user.

‘Ingrid’ paper prototype components (Ingrid was the initial personality of the chatbot experience)

Iterated ‘Deed’ chatbot paper sketch

Testing of sketches and wireframes early adds front-loaded value with savings later on in the design process (Nielsen, 2003). The team considers that adding peer-review and user testing at this stage might have been explored greater.

The team analysed common themes and interactions that emerged across the job search flows. A higher fidelity version of the job search experience, one that included CV manipulation, data entry automation, and chatbot assistance during the process, including an ‘aftercare part of the user journey, was designed.

After assessment, and review by the assignment lecturer, the team considered the design for feasibility. This lead to a decision to simplify the design challenge to focus on the job search and obtaining assistance to complete that task.

Visual design and interactions

Backed by user research, a more contemporary and simpler visual appeal, using the popular and open-sourced Google Material Design design system, was adopted.

Key interactions such as search, navigation, guided process, messaging, and content organisation were applied to the prototypes using proven design patterns, solving usability challenges in a familiar way, and accelerating design.

Example low-fidelity prototype screens with design patterns (Balsamiq)

Tone of voice

Central to the development of a more appealing, conversational, experience was the use of plain language and finding an appropriate personality or tone of voice for the ‘Deed’ chatbot dialogue.

“Everything has a personality: everything sends an emotional signal. Even where this was not the intention of the designer . . . “
―Don Norman (2011)

The team used a conversational script as a basis for a more natural human-computer dialogue and innovated with a chatbot persona to give design ‘life’ to the interactions (Beer, 2016).

Deed chatbot persona

Deed conversation script

High fidelity prototyping

A complete interactive flow of the app search and chatbot assistance was collaboratively assembled by team members using Figma.

Figma high-fidelity design view

After a joint critique against research findings and ideation artifacts, the team iterated and created a prototype ready for user testing.

Interactive testable prototype in Figma. Video by Fernanda Fonseca dos Santos.

Back to Home