CertifyMe

CertifyMe Figma Prototype

Project Description:

As part of my User Design and Evaluation module in my second year, I was requested to design a high-fidelity Figma prototype, based on a career guidance application. The design must be inclusive for those who have any impairments or disabilities.

Problem Statement / User Scenario:

This app is catered for anyone who has a thirst for knowledge, learning new ideas, and gaining new skills. This app allows the user to learn and engage in new information from the comfort of their home.

The courses available on the app run for approximately 6 - 9 weeks, with boot camps also available where users can study content for up to 72 hours in short intervals via video clips.

This is all at their own pace and leisure, they can sign into the app whenever it is best suited for them. They can check in on their study from home, at the library, or even while taking public transport as everything is contained within the app. The app contains a plethora of diverse fields of study and topics, from Science to Music, and Photography. It contains something for everyone.

Learning Objectives:

Understanding of personas and scenarios, brainstorming, design of initial prototype and redesign for final prototype, self-assessment and critique, and process planning and management.

Learner Outcomes:

During this project, I discovered the value of using personas when creating a design. The persona describes an archetypal user of the technology, demonstrating an understanding and empathy with the audience.

I learned how to create paper prototypes and refine them in an iterative design process, as well as providing a personal description of the design process and incorporating feedback.

I incorporated critical analysis and evaluation into my design process, it's planning and management, including my learning throughout.

Persona

Aibhe Taylor

Aibhe is a 32-year-old mother of one, living in Dublin, Ireland and working as a full-time speech therapist. Currently, Aibhe has many aspirations for her career. Aibhe has been flourishing in the speech therapy field for the past seven years. Three years ago, she left her position at the Irish Speech Therapy Association to pursue her self-employed business.

At the moment, Aibhe’s business is patient-based, helping those in need throughout Ireland. However, she wants to expand her business website, to enable her clients to book appointments with her online. To achieve this, Aibhe wants to discover a labour-saving method to learn web development skills from the comfort of her home and at her own pace.

Journey Map / Empathy Map

Journey Map

At this point, Aibhe’s main goals are to gain web development skills, expand her business and update her speech therapy website.
To do this, she also wants to find a learning tool that will allow her to develop her skills in a fast and convenient manner. However, Aibhe has some constraints in achieving this.

Empathy Map

Aibhe suffers from colour blindness and ADHD and is under time pressure with her full-time job.
Despite this, she is very hardworking and motivated to achieve her goals. Aibhe typically enjoys spending her time gaining new knowledge on social media through preferred channels such as YouTube and Twitter

User Needs - Colour Blindness

Making a design inclusive for those with Colour Blindness:

Using high-contrast colour combinations: Avoiding colours that look similar to each other, especially those that may look the same to people with colour blindness. Using high-contrast colour combinations, such as black text on a white background or yellow text on a blue background.
Add text labels: Use text labels to help users understand what each button or icon means. This can help users with colour blindness who may have difficulty distinguishing between different colours.
Use patterns and textures: Patterns and textures in addition to colour will help distinguish between different elements in the app.
Use accessible color palettes: Colour palettes that are accessible for people with color blindness.

User Needs - ADHD

Making a design inclusive for those with ADHD:

Use clear and concise language: Concise language in the app's instructions and user interface to help users understand how to use the app.
Reduce distractions: Minimize unnecessary animations, sounds, and other distractions in the app. This can help users with ADHD stay focused on the task at hand.
Break tasks into smaller steps: Ensure tasks are broken down into smaller, more manageable steps to help users with ADHD stay organized and focused.
Allow for customization: Allow users to customize the app's settings, such as font size and color scheme. This can help users with ADHD personalize the app to their needs.

Prototype Development

Version 1

To achieve the final app design, multiple versions were made. After the first version was completed, I tested it through a colour-blind stimulator called Pilestone (allowing me to view the design as a colour-blind user would see it).
After testing, I realised that the colour palette used lacked contrast and definition.

Version 2

Based upon this result, I changed made the colours higher in contrast, I was much happier with this outcome but felt as though the background was distracting as the circular designs on both corners of the screen were too pronounced.For the final version, I blurred the circular designs and made the features on the app more spacious and readable.

UX Testing and Feedback

Microsoft Forms Survey

To test the prototype, a Microsoft Forms survey was given to participants. The form contains 8 questions in total, as seen in the screenshot. The second version of the app (as seen above) was given to participants for testing.

Feedback

One of the respondents mentioned that the buttons on the courses page lacked readability. Another respondent pointed out a similar critique, mentioning that the buttons looked slightly squashed and should be more spaced out.

Based upon this I made the following changes below.

Changes Based on Feedback

Version 1

This design was given to participants, many of whom mentioned it looked squashed and unreadable/clickable.

Version 2

Changes were made based on participant feedback. I made the features easier to read by providing icons and making the course options more spaced out.

Final Result

Page updated

Google Sites

Report abuse