Design an art history app – Case Study for Portfolio

As part of the Google UX/UI Design Professional Certificate course I compiled a case study on Designing an Art History App with user research, persona creation, paper wireframes, digital wireframes, low-fidelity prototype, usability study, mockups, high-fidelity prototypes and accessibility considerations.

The case study can be read below:

The High-fidelity prototype can be viewed here (click it and follow a user flow to eventually end up in the shop):

A step by step process for designing an art history app in Figma, include user personas, usability studies, wireframes, lo-fi prototypes, mockups, hi-fi prototypes

1. Develop user personas: Identify the target audience for the art history app and create user personas to represent them. Gather information about their demographics, behavior patterns, goals, and pain points. This will help guide the design and development of the app.
2. Conduct usability studies: Use methods such as user interviews, surveys, and usability testing to gather feedback on the app’s design and functionality. This will help identify areas of improvement and ensure that the app meets the needs of the target audience.
3. Create wireframes: Use a tool such as Figma to create low-fidelity wireframes of the app’s main pages and user flows. Use the feedback from usability studies to refine the wireframes. This step will establish the structure and layout of the app.
4. Develop lo-fi prototypes: Use Figma to create low-fidelity interactive prototypes of the wireframes. These prototypes should include basic functionality and navigation, but not detailed design elements. This step will allow for testing of the app’s basic functionality and navigation.
5. Create mockups: Use Figma to create high-fidelity mockups of the app’s design, including typography, color, and other visual elements. Use the feedback from usability studies to refine the mockups. This step will establish the final visual design of the app.
6. Develop hi-fi prototypes: Use Figma to create high-fidelity interactive prototypes of the mockups. These prototypes should include detailed design elements and full functionality. This step will allow for testing of the final design and functionality of the app.
7. Test and refine: Use usability testing and user feedback to test the hi-fi prototypes and make any necessary adjustments to the design and functionality of the app. Repeat this process until the app meets the needs of the target audience and achieves the desired user experience. This step will ensure that the app is user-friendly and meets the goals of the target audience.

Developing user personas is an essential step in the design process of an app, as it helps to identify the target audience and tailor the app to their needs. Here are some steps to expand on this process:

1. Research the target audience: Gather information on demographics, behavior patterns, goals, and pain points of the target audience. This can be done through market research, surveys, and interviews with potential users.
2. Create personas: Use the information gathered in step 1 to create detailed personas that represent the different segments of the target audience. Each persona should have a name, a demographic profile, and a set of characteristics, goals, and pain points.
3. Validate personas: Share the personas with a representative sample of the target audience and gather feedback to validate the accuracy of the personas. Make any necessary adjustments based on the feedback received.
4. Use personas throughout the design process: Keep the personas in mind throughout the design process to ensure that the app meets the needs and addresses the pain points of the target audience. Use the personas as a reference for user testing and validation.
5. Continuously update personas: As the target audience evolves, it is important to continuously update the personas to ensure that they remain accurate and relevant.

By following these steps, you will be able to create user personas that accurately represent the target audience and help guide the design and development of the app.

Conducting usability studies is an important step in the design process as it helps to identify areas of improvement and ensure that the app meets the needs of the target audience. Here are some steps to expand on this process:

1. Define the goals and objectives of the usability study: Determine what specific aspects of the app’s design and functionality will be evaluated during the study.
2. Recruit participants: Recruit participants who match the characteristics of the target audience, as defined by the user personas.
3. Plan the study: Develop a plan for the study, including tasks for the participants to complete, questions to ask, and metrics to measure.
4. Conduct the study: Conduct the study in a controlled environment, with the participants completing the tasks and answering the questions. Observe their behavior and take note of any difficulties or issues they encounter.
5. Analyse the data: Analyse the data collected during the study to identify areas of improvement and potential issues.
6. Create a report: Create a report that summarises the findings of the study and includes recommendations for improvements to the app’s design and functionality.
7. Use the findings to improve the app: Use the findings from the usability study to make changes to the app’s design and functionality. Repeat the usability testing process to validate that the changes improved the user experience.

By conducting usability studies, you will be able to gather valuable feedback from real users and identify areas of improvement in the app’s design and functionality. These insights can be used to iteratively improve the app and ensure that it meets the needs of the target audience.

Creating wireframes is an important step in the design process as it helps to establish the structure and layout of the app. Wireframes are low-fidelity visual representations of the app’s main pages and user flows, and they are used to communicate the general layout and organisation of the app’s content and functionality. Here are some steps to expand on this process:

1. Understand the app’s requirements: Review the user personas, usability study findings, and other design requirements to understand the goals and objectives of the app.
2. Sketch out the layout: Use pen and paper to sketch out the layout of the main pages and user flows of the app. This will help you to quickly explore different layout options and identify the most effective design.
3. Create wireframes in Figma: Use a tool such as Figma to create low-fidelity wireframes of the app’s main pages and user flows. Use the sketches from step 2 as a starting point.
4. Refine the wireframes: Use the feedback from usability studies to refine the wireframes. Make changes to the layout and organisation of the content and functionality as necessary.
5. Test the wireframes: Test the wireframes with a representative sample of the target audience and gather feedback on the layout, navigation, and content organisation.
6. Iterate: Use the feedback from the testing to iterate on the wireframes. Make changes to the layout and organisation of the content and functionality as necessary.
7. Finalise the wireframes: Once the wireframes have been refined and tested, finalise the wireframes and use them as a basis for the next steps in the design process (lo-fi and hi-fi prototyping).

By creating wireframes, you’ll be able to establish a solid structure and layout for the app, that can be easily tested and iterated upon, before moving forward to more detailed designs.

Developing lo-fi prototypes is a step in the design process that allows for testing of the app’s basic functionality and navigation. Lo-fi prototypes are low-fidelity interactive representations of the wireframes, and they are used to test the general layout and organisation of the app’s content and functionality. Here are some steps to expand on this process:

1. Import wireframes into Figma: Use the wireframes created in the previous step as the basis for the lo-fi prototype. Import the wireframes into Figma, and create an interactive prototype.
2. Add basic functionality: Add basic functionality to the prototype such as navigation, buttons, and forms. This will allow users to interact with the prototype and test the app’s basic functionality.
3. Test the prototype: Test the prototype with a representative sample of the target audience and gather feedback on the layout, navigation, and content organisation.
4. Iterate: Use the feedback from the testing to iterate on the prototype. Make changes to the layout, navigation, and functionality as necessary.
5. Finalise the prototype: Once the prototype has been refined and tested, finalise the lo-fi prototype.
6. Use the prototype to guide the next steps: Use the lo-fi prototype as a basis for the next steps in the design process, such as creating high-fidelity mockups and interactive prototypes.

By developing lo-fi prototypes, you’ll be able to test the basic functionality and navigation of the app, and make necessary changes, before moving forward to more detailed designs. This will help ensure that the app meets the needs of the target audience and achieves the desired user experience.

Creating mockups is a step in the design process that helps to establish the final visual design of the app. Mockups are high-fidelity visual representations of the app’s design, including typography, color, and other visual elements. They are used to communicate the final look and feel of the app to stakeholders and developers. Here are some steps to expand on this process:

1. Review design requirements: Review the user personas, usability study findings, and other design requirements to understand the goals and objectives of the app.
2. Choose design elements: Select the typography, color palette, and other visual elements to be used in the mockups.
3. Create mockups in Figma: Use a tool such as Figma to create high-fidelity mockups of the app’s main pages and user flows. Use the design elements chosen in step 2 to create the mockups.
4. Refine the mockups: Use the feedback from usability studies to refine the mockups. Make changes to the layout, navigation, and design elements as necessary.
5. Test the mockups: Test the mockups with a representative sample of the target audience and gather feedback on the design and overall look and feel of the app.
6. Iterate: Use the feedback from the testing to iterate on the mockups. Make changes to the design elements, layout and navigation as necessary.
7. Finalise the mockups: Once the mockups have been refined and tested, finalise them.
8. Use the mockups to guide the next steps: Use the mockups as a basis for the next steps in the design process, such as creating high-fidelity interactive prototypes.

By creating mockups, you’ll be able to establish the final visual design of the app, that can be easily communicated to stakeholders and developers. This will help ensure that the app meets the goals and objectives of the project and achieves the desired user experience.

Developing hi-fi prototypes is a step in the design process that allows for testing of the app’s detailed design and full functionality. Hi-fi prototypes are high-fidelity interactive representations of the mockups and they are used to test the final design and functionality of the app. Here are some steps to expand on this process:

1. Import mockups into Figma: Use the mockups created in the previous step as the basis for the hi-fi prototype. Import the mockups into Figma and create an interactive prototype.
2. Add detailed functionality: Add detailed functionality to the prototype such as forms validation, animations, and other interactive elements. This will allow users to interact with the prototype and test the app’s full functionality.
3. Test the prototype: Test the prototype with a representative sample of the target audience and gather feedback on the design, functionality, and overall user experience.
4. Iterate: Use the feedback from the testing to iterate on the prototype. Make changes to the design, functionality, and user experience as necessary.
5. Finalise the prototype: Once the prototype has been refined and tested, finalise the hi-fi prototype.
6. Use the prototype to guide development: Use the hi-fi prototype as a basis for the next steps in the development process, such as creating the codebase and integrating with back-end systems.

By developing hi-fi prototypes, you’ll be able to test the final design and functionality of the app, and make necessary changes, before moving forward to development. This will help ensure that the app meets the needs of the target audience and achieves the desired user experience.

Testing and refining is an important step in the design process as it helps to ensure that the app meets the needs of the target audience and achieves the desired user experience. Here are some steps to expand on this process:

1. Test the final prototype: Test the final hi-fi prototype with a representative sample of the target audience and gather feedback on the design, functionality, and overall user experience.
2. Analyse the results: Analyse the results of the testing to identify areas of improvement and potential issues.
3. Prioritise changes: Prioritise the changes based on the feedback received and the overall goals of the app.
4. Implement changes: Make changes to the design, functionality, and user experience as necessary.
5. Test again: Test the updated prototype with a representative sample of the target audience to ensure that the changes improved the user experience.
6. Iterate: Repeat the testing and refining process as necessary until the app meets the needs of the target audience and achieves the desired user experience.
7. Launch the app: Once the app has been tested and refined, it can be launched for the target audience.

By testing and refining the app, you’ll be able to ensure that it meets the needs of the target audience and achieves the desired user experience. This will help to increase the chances of success for the app and ensure that it is well received by the target audience.