top of page
Sapio
Client
Vanessa Parent
Year
2022
Exploration of an educational app concept for art and history based content provided and backed by academics.
Market Research
Personas
Wireframes
Flow Diagrams
High-Fidelity UI
Prototype
Mini Usability Study
Accessibility Evaluation
Where
Montréal, Quebec
Role
Designer, Researcher
What
Native Mobile App (IOS)
Category
Educational, art, media
Why
Concept Exploration
When
December 2021
Why I made
this project
I wanted to make this project after discussing an app concept with a friend who had recently completed her Ph.D in art history. As an art historian and researcher she has been workshopping ideas for ways to bring a modern approach to the way in which we interact and have access to academically backed information on art and historical practices. As someone who’s been in and around the artistic world throughout my life I loved the concept and wanted to give it a visual concreteness that could showcase it's potential.
Market Research
Social networking apps have become an integral part of our society in recent years, and so have educational apps. The educational app market is expecting to nearly triple in market size by 2027.
The Problem
Social media has created a focus on fast created content and art. But academically focused or backed information is hard to find and not as easy to consume in many social networking's current platforms, especially for those participating in higher education.
Personas
Age
31
Education
Ph.D.
Hometown
Toronto
Occupation
Student
Taylor Gabris
Goals
Find a space to publish current and future theses and papers
Read contemporaries recently published academic material on art and history
Frustrations
Difficult to find unique, recent academic backed information.
Unreliable options for publishing work online that is public and easily accessed
Taylor is in the final months of getting their PHD, they’re writing their thesis and are exploring spaces where they can share their work once it's completed. They are also interested in exploring other recent works from fellow graduates around the world. They love the feeling of expanding their knowledge and understanding and want to continue to learn new things even after they finish their PHD.
"I wish there was an online space to share my work with the public instead of it feeling stuck in academia."
Age
19
Education
Undergrad
Hometown
New York
Occupation
Student
Tommy Lane
Goals
Easily access an academic source for all his papers and projects
Find a place online that has information on art and historical significances.
Frustrations
Finding information on sites that aren’t reputable and can’t be used academically
Not knowing where to find contemporary sources for his papers and projects
Tommy is an undergrad at NYU with an undeclared major, he’s interested in history, art, and technology. He always has difficulty finding reliable properly sourced material online for his school projects. He’s also interested in the idea of being a renaissance man and knowing a little bit of everything as he looks to confirm a major for next year.
"Why isn't there a contemporary space where I can find recently written academic material on art and history?."
Flow Diagram
To outline all the necessary functionality of the app, I created a simple flow diagram of the main actions a user can take. Does not include fail state flows to avoid legibility issues.
Main User Flow
Low-Fidelity Wireframes
Hand-drawn and digital low-fidelity wireframes.
High-Fidelity UI
Once I flushed out the user flow and low-fidelity wireframes, I started looking at colours, fonts, branding, and overall aesthetics that would best match the app’s content and user base.
Colour Palette
Font
The inspiration behind the main colour choice - raw sienna, a painter's staple.
Nexa, Regular & X Bold
AaBbCcDdEeFfGgHh
AaBbCcDdEeFfGgHh
Sticker Sheet
15 high-fidelity designs created
Including joined and unjoined user flows, showing a variety of available actions.
Alignment and Grid
Designed using a 12 column grid (with 16 point margins and 8 point gutters). I kept the spacing sizes similar throughout the app using 8, 16 and 24 point increments.
16pt
24pt
8pt
24pt
8pt
16pt
High-fidelity Prototype
I connected my high fidelity designs into a clickable prototype. I connected __ screens within the prototype with two different user flows upon entering the app (joined and unjoined).
Then a third free-flowing user flow wherein you can explore the app as a user might; interacting with the different content and actions that can be taken.
The prototype can be live-previewed at [link]
Prototype Validation
I validated my prototype with 3 users. This test was done over zoom for two users, and in person for the third. I introduced the user to the app and asked them questions. The questions were dedicated to finding out whether the structure and available actions were easy to understand and navigate. I wanted to be sure that the users understood the heirarchy of the app; i.e. going from a work of art to the artist’s page where they could find additional resources and academic information.
Study Results
68% of users (2/3) were unsure what "Create a Gallery" would do or achieve.
100% of users (3/3) commented that the font was too small (on an initial version of the app, not pictured).
33% of users (1/3) were unable to complete the user flow due to being confused by the number of options.
Prototype Update Concept
Because of time constraints I was unable to run a second usability study. However, based on feedback within the first usability study, I increased the size of text throughout the app for readability. If time afforded for an additional iteration of the app, I would include an initial walkthrough of the app upon signing up that would explain the overall function of the app and see if this improved the overall user understanding of the available options and tasks within the app.
Accessibility Check
This app has been evaluated for contrast to match the AA standards of WCAG. This contrast check brought about a change in overall app colours as I found the originally chosen colours didn't provide a wide enough range of contrast. Yet after the changes, in some cases I found that the contrast can still be improved in certain instances.
bottom of page