It was also challenging deciding where to draw the line with features. Given that De-Finder would rely on a lot of things that are not necessarily within the UI/UX scope , like a custom algorithm and users posting their work, the breadth of features seems small but for an app that is a tool and not necessarily for entertainment.
A tool versus entertainment is a very important distinction to make early on. De-Finder is a tool to be used to gather up visual material, which yes, is good to look at but is only being looked at because it serves a purpose to the user. In truth it wouldn't be like Instagram (even though its set up similarly) because it wouldn't be able to serve its purpose.
It was also challenging deciding where to draw the line with features. Given that De-Finder would rely on a lot of things that are not necessarily within the UI/UX scope , like a custom algorithm and users posting their work, the breadth of features seems small but for an app that is a tool and not necessarily for entertainment, It works.
A tool versus entertainment is a very important distinction to make early on. De-Finder is a tool to be used to gather up visual material, which yes, is good to look at but is only being looked at because it serves a purpose to the user. In truth it wouldn't be like Instagram (even though its set up similarly) because it wouldn't be able to serve its purpose.
It was also challenging deciding where to draw the line with features. Given that De-Finder would rely on a lot of things that are not necessarily within the UI/UX scope , like a custom algorithm and users posting their work, the breadth of features seems small but for an app that is a tool and not necessarily for entertainment, it works.
A tool versus entertainment is a very important distinction to make early on. De-Finder is a tool to be used to gather up visual material, which yes, is good to look at but is only being looked at because it serves a purpose to the user. In truth it wouldn't be like Instagram (even though its set up similarly) because it wouldn't be able to serve its purpose.
Entertainment versus Practical Tools
Entertainment versus Practical Tools
Designing for focus requires early discernment
With De-finder I wanted to explore what it would be like to design for users who have general knowledge and are using an app as a part of their work or hobby, rather than something more casual.
it was challenging finding a balance between practicality and visuals at first so I leaned more in the direction of minimalism and not detracting from the content, but rather, using the UI as a vessel to serve content to the user.
Designing for focus requires early discernment
With De-finder I wanted to explore what it would be like to design for users who have general knowledge and are using an app as a part of their work or hobby, rather than something more casual.
it was challenging finding a balance between practicality and visuals at first so I leaned more in the direction of minimalism and not detracting from the content, but rather, using the UI as a vessel to serve content to the user.
Observations
"vibe tile" exploration
"vibe tile" exploration
The North Star final logo
There were two contenders for the final logo
The North Star
The North Star
The North Star
The North Star
The North Star
A faster way to build a collection of alike works
A faster way to build a collection of alike works
The AI takes an image and or prompt and scours the app for similar content both visually and by category.
The AI takes an image and or prompt and scours the app for similar content both visually and by category.
It can create a new collection upon finding a selection of images directly from the North Star's page.
It can create a new collection upon finding a selection of images directly from the North Star's page.
Powerful prompters can get really specific with what they want, but the addition of search by image as well as prompt means that a less skilled user can also find exactly what they are looking for.
Powerful prompters can get really specific with what they want, but the addition of search by image as well as prompt means that a less skilled user can also find exactly what they are looking for.
A poll went 5 to 2 in A's Favor
Logo exploration
A
B
Digital Wireframes
First digital Wireframe
Second digital Wireframe
resulting changes
resulting changes
resulting changes
resulting changes
A way to both, let the user know where they are in the app and to help them get to where they are going.
Ultimately, an overreliance on users' familiarity navigating similar apps proved to be too great of an assumption and was shortsighted in that there was once a point where the navigation bar was necessary to any user to find their way around any social media app so users, when presented with a new one, need to be given the same affordances.
Text, which I had also considered as navigation markers would have taken up too much space and would have been visually over-complicated. Some of that thinking made its way into the final navigation bar and informed the choice not to have captions telling the user what different icons mean.
Overview
Overview
Constructing a solution for designers in need of inspiration, without the social media rigamaroll
Constructing a solution for designers in need of inspiration, without the social media rigamaroll
Overview
Overview
Constructing a solution for designers in need of inspiration, without the social media rigamaroll
Constructing a solution for designers in need of inspiration, without the social media rigamaroll
Overview
Overview
Constructing a solution for designers in need of inspiration, without the social media rigamaroll
Constructing a solution for designers in need of inspiration, without the social media rigamaroll
You've probably been there before, endlessly searching for inspiration, scouring the world-wide-web, only to find one picture of what you are looking for, per website you visit.
This is especially true for UX/UI design. So, I thought why not design a platform that is not only specific to the field, easy-to-use and portable, but focuses on pushing fundamental design principles, best practices and not trends.
The Current Space
The Current Space
The Current Space
The Current Space
It's hard to focus in an ever-flowing sea of content
It's hard to focus in an ever-flowing sea of content
It's hard to focus in an ever-flowing sea of content
Existing applications though great for more general use, tend to be very wide in scope. Everything from flashy designs to please the algorithm, all the way to detailed illustrative work. There's no problem with this, but it makes it difficult to find inspiration and even more difficult to discern current best practice.
Existing applications though great for more general use, tend to be very wide in scope. Everything from flashy designs to please the algorithm, all the way to detailed illustrative work. There's no problem with this, but it makes it difficult to find inspiration and even more difficult to discern current best practice.
Designing to solve this issue means staying intentional about pushing good UI/UX and more closely related fields. Additionally, and just as importantly, solving for the social media trap of aesthetics and popularity over everything.
Designing to solve this issue means staying intentional about pushing good UI/UX and more closely related fields. Additionally, and just as importantly, solving for the social media trap of aesthetics and popularity over everything.
The Solution
The Solution
The Solution
An app based wholly on design principles, built to expedite the mood-boarding process
…provides a weekly recap of inspiration users interacted with that they may have forgotten or did not need just yet.
…focuses on set categories, designated upon uploading, by the author that ensure everything you are looking for is exactly where you expect it to be.
…rewards exploration not posting to receive validation.
…rewards exploration not posting to receive validation.
…rewards exploration not posting to receive validation.
An app that…
…integrates AI that cultivates taste and doesn't generate derivative images.
The North Star
A faster way to build a collection of alike works
The AI takes an image and or prompt and scours the app for similar content both visually and by category.
The AI takes an image and or prompt and scours the app for similar content both visually and by category.
It can create a new collection upon finding a selection of images directly from the North Star's page.
It can create a new collection upon finding a selection of images directly from the North Star's page.
Powerful prompters can get really specific with what they want, but the addition of search by image as well as prompt means that a less skilled user can also find exactly what they are looking for.
Powerful prompters can get really specific with what they want, but the addition of search by image as well as prompt means that a less skilled user can also find exactly what they are looking for.
There were two contenders for the final logo
A
B
A poll went 5 to 2 in A's Favor
The Process
The Process
The Process
Bill Callaghan
Age 28
He works from home in HR and is often looking for inspirational Ul in his downtime to increase the visual material he can pull from when practicing on his own.
Is very familiar with most design tools but is not a professional.
Blockers:
Has a busy schedule,
Finds it hard to keep track of images he finds online.
Does not like to spend a lot of time on his phone.
enablers:Very well versed in UI/likely to know where to look for different types of work.
Wants to be able to create a mood board of sorts.
Has multiple personal UI projects.
behavior:
Very set in his routine, wakes up, works from home, goes to the gym, eats, watches TV for 2-3 hours, goes to bed without his phone. On the weekends, he works on his UI projects for most of the day and he might see friends or family.
1.
A Persona
Wireframing
2.
2.
2.
I kept hearing feedback saying, in short, "I'm having difficulty knowing where to go or how to get there."
I kept hearing feedback saying, in short, "I'm having difficulty knowing where to go or how to get there."
I kept hearing feedback saying, in short, "I'm having difficulty knowing where to go or how to get there."
The Second Questionnaire
The Second Questionnaire
The Second Questionnaire
-a few of these comments-
the resulting changes from the second round of feedback
Though scores had improved across the board, something still wasnt clicking…
After some brainstorming, I ended up coming to the realization that even though De-Finder was not intended to be a social media app in the same way that Instagram or Pinterest may be, Users still needed a semblance of familiarity when it came to the UI elements.
Adding a navigation bar was an idea I played with beforehand, but I wanted to approach this project with a minimalist's mindset so i held off on it until it became necessary.
The challenge had now become "How do I add more elements without over-polluting the screen with visual information?"
It came down to an A/B contest
with just one difference
with just one difference
with just one difference
The A/B test was conducted using the SUS method (system usability scale), which was appropriate because navigation may fall under general usability issues rather than a more specific one.
The prototype with the navigation bar edged out a win. Neither showed glaring usability issues, but the increased confidence and shorter learning curve, are invaluable and not worth stifling for the sake of minimalism.
Logo exploration
Experiments
Designing for focus requires early discernment
With De-finder I wanted to explore what it would be like to design for users who have general knowledge and are using an app as a part of their work or hobby, rather than something more casual.
It was challenging finding a balance between practicality and visuals at first so I leaned more in the direction of minimalism and not detracting from the content, but rather, using the UI as a vessel to serve content to the user.
Popularity does not always equal quality and can often times overshadow that category the content is in.
The incentive to post has to be wanting to share good work, not to receive online validation.
A part of this is deciding against an algorithm that shows you posts based on how popular they are.
The best inspiration comes when least expected and more of a random system of showing posts only presented to the user when they pick a category, enforces those conditions.
Essentially a system which gives you images similar to the posts you have been looking at and interacting with throughout the week.
This was too close to a typical social media feature where you start to receive recommendations around images you look at regularly and not what you are looking for on that day.
This could be easily replaced by the "for you" page.
Could potentially, undermine the showcase of best practices.
Public collection adds and saves for the viewer and uploader
Limitations
Paper Wireframes
Paper Wireframes
Paper Wireframes
The North Star final logo
The North Star final flow
The North Star final flow
Limited number of respondents
Solo project
Repeated respondents
Limited information regarding competitor metrics
Most qualitative evidence are personal testimonies from numerous sources
Research
3.
Navigation bar explorations and final (descending order)
Observations
It was also challenging deciding where to draw the line with features. Given that De-Finder would rely on a lot of things that are not necessarily within the UI/UX scope , like a custom algorithm and users posting their work, the breadth of features seems small but for an app that is a tool and not necessarily for entertainment, it works.
A tool versus entertainment is a very important distinction to make early on. De-Finder is a tool to be used to gather up visual material, which yes, is good to look at but is only being looked at because it serves a purpose to the user. In truth it wouldn't be like Instagram (even though its set up similarly) because it wouldn't be able to serve its purpose.
Entertainment versus Practical Tools
North Star AI giving suggested posts to the user
Matthew Mingle
Matthew Mingle
Matthew Mingle
Home
Home
Home
Doodles
Doodles
Doodles
Back
Role
Skills
Date
Sole UI/UX Designer
UI/UX
Wireframing
Prototyping
12 Mar - 13 Jul
Researcher
De-Finder
De-Finder
De-Finder
It came down to an A/B contest
It came down to an A/B contest
It came down to an A/B contest
Navigation bar explorations and final (descending order)
Limited number of respondents
Solo project
Repeated respondents
Limited information regarding competitor metrics
Most qualitative evidence are personal testimonies from numerous sources
Limited number of respondents
Solo project
Repeated respondents
Limited information regarding competitor metrics
Most qualitative evidence are personal testimonies from numerous sources
Limited number of respondents
Solo project
Repeated respondents
Limited information regarding competitor metrics
Most qualitative evidence are personal testimonies from numerous sources
Limitations
Popularity does not always equal quality and can often times overshadow that category the content is in.
The incentive to post has to be wanting to share good work, not to receive online validation.
A part of this is deciding against an algorithm that shows you posts based on how popular they are.
The best inspiration comes when least expected and more of a random system of showing posts only presented to the user when they pick a category, enforces those conditions.
Popularity does not always equal quality and can often times overshadow that category the content is in.
The incentive to post has to be wanting to share good work, not to receive online validation.
A part of this is deciding against an algorithm that shows you posts based on how popular they are.
The best inspiration comes when least expected and more of a random system of showing posts only presented to the user when they pick a category, enforces those conditions.
Popularity does not always equal quality and can often times overshadow that category the content is in.
The incentive to post has to be wanting to share good work, not to receive online validation.
A part of this is deciding against an algorithm that shows you posts based on how popular they are.
The best inspiration comes when least expected and more of a random system of showing posts only presented to the user when they pick a category, enforces those conditions.
Public collection adds and saves for the viewer and uploader
Public collection adds and saves for the viewer and uploader
Essentially a system which gives you images similar to the posts you have been looking at and interacting with throughout the week.
This was too close to a typical social media feature where you start to receive recommendations around images you look at regularly and not what you are looking for on that day.
This could be easily replaced by the "for you" page.
Could potentially, undermine the showcase of best practices.
Essentially a system which gives you images similar to the posts you have been looking at and interacting with throughout the week.
This was too close to a typical social media feature where you start to receive recommendations around images you look at regularly and not what you are looking for on that day.
This could be easily replaced by the "for you" page.
Could potentially, undermine the showcase of best practices.
Experiments
Experiments
North Star AI giving suggested posts to the user
North Star AI giving suggested posts to the user
Essentially a system which gives you images similar to the posts you have been looking at and interacting with throughout the week.
This was too close to a typical social media feature where you start to receive recommendations around images you look at regularly and not what you are looking for on that day.
This could be easily replaced by the "for you" page.
Could potentially, undermine the showcase of best practices.
Limitations
Experiments
Observations
Designing for focus requires early discernment
With De-finder I wanted to explore what it would be like to design for users who have general knowledge and are using an app as a part of their work or hobby, rather than something more casual.
It was challenging finding a balance between practicality and visuals at first so I leaned more in the direction of minimalism and not detracting from the content, but rather, using the UI as a vessel to serve content to the user.
It was also challenging deciding where to draw the line with features. Given that De-Finder would rely on a lot of things that are not necessarily within the UI/UX scope , like a custom algorithm and users posting their work, the breadth of features seems small but for an app that is a tool and not necessarily for entertainment, it works.
A tool versus entertainment is a very important distinction to make early on. De-Finder is a tool to be used to gather up visual material, which yes, is good to look at but is only being looked at because it serves a purpose to the user. In truth it wouldn't be like Instagram (even though its set up similarly) because it wouldn't be able to serve its purpose.
Entertainment versus Practical Tools
De-Finder
De-Finder
sections
You've probably been there before, endlessly searching for inspiration, scouring the world-wide-web, only to find one picture of what you are looking for, per website you visit.
This is especially true for UX/UI design. So, I thought why not design a platform that is not only specific to the field, easy-to-use and portable, but focuses on pushing fundamental design principles, best practices and not trends.
…integrates AI that cultivates taste and doesn't generate derivative images.
…focuses on set categories, designated upon uploading, by the author that ensure everything you are looking for is exactly where you expect it to be.
…provides a weekly recap of inspiration users interacted with that they may have forgotten or did not need just yet.
First digital Wireframe
Second digital Wireframe
Bill Callaghan
Age 28
He works from home in HR and is often looking for inspirational Ul in his downtime to increase the visual material he can pull from when practicing on his own.
Is very familiar with most design tools but is not a professional.
Blockers:
Has a busy schedule,
Finds it hard to keep track of images he finds online.
Does not like to spend a lot of time on his phone.
enablers:Very well versed in UI/likely to know where to look for different types of work.
Wants to be able to create a mood board of sorts.
Has multiple personal UI projects.
behavior:
Very set in his routine, wakes up, works from home, goes to the gym, eats, watches TV for 2-3 hours, goes to bed without his phone. On the weekends, he works on his UI projects for most of the day and he might see friends or family.
Digital Wireframes
Research
3.
After some brainstorming, I ended up coming to the realization that even though De-Finder was not intended to be a social media app in the same way that Instagram or Pinterest may be, Users still needed a semblance of familiarity when it came to the UI elements.
Adding a navigation bar was an idea I played with beforehand but I wanted to approach this project with a minimalist's mindset so i held off on it until it became necessary.
The challenge had now become "How do I add more elements without over-polluting the screen with visual information?"
the resulting changes from the second round of feedback
the resulting changes from the second round of feedback
the resulting changes from the second round of feedback
The A/B test was conducted using the SUS method (system usability scale), which was appropriate because navigation may fall under general usability issues rather than a more specific one.
The prototype with the navigation bar edged out a win. Neither showed glaring usability issues, but the increased confidence and shorter learning curve, are invaluable and not worth stifling for the sake of minimalism.
A Navigation Bar
A Navigation Bar
A Navigation Bar
A way to both let the user know where they are in the app and to help them get to where they are going.
Ultimately, an overreliance on users' familiarity navigating similar apps proved to be too great of an assumption and was shortsighted in that there was once a point where the navigation bar was necessary to any user to find their way around any social media app so users, when presented with a new one, need to be given the same affordances.
Text, which i had also considered as navigation markers would have taken up too much space and would have been visually over-complicated. Some of that thinking made its way into the final navigation bar and informed the choice not to have captions telling the user what different icons mean.
A way to both let the user know where they are in the app and to help them get to where they are going. Ultimately, an overreliance on users' familiarity navigating similar apps proved to be too great of an assumption and was shortsighted in that there was once a point where the navigation bar was necessary to any user to find their way around any social media app so users, when presented with a new one, need to be given the same affordances.
Text, which I had also considered as navigation markers would have taken up too much space and would have been visually over-complicated. Some of that thinking made its way into the final navigation bar and informed the choice not to have captions telling the user what different icons mean.
A way to both let the user know where they are in the app and to help them get to where they are going.
Ultimately, an overreliance on users' familiarity navigating similar apps proved to be too great of an assumption and was shortsighted in that there was once a point where the navigation bar was necessary to any user to find their way around any social media app so users, when presented with a new one, need to be given the same affordances.
Text, which I had also considered as navigation markers would have taken up too much space and would have been visually over-complicated. Some of that thinking made its way into the final navigation bar and informed the choice not to have captions telling the user what different icons mean.
Navigation bar explorations and final (descending order)
Navigation bar explorations and final (descending order)
Navigation bar explorations and final (descending order)
Role
Skills
Date
Sole UI/UX Designer
UI/UX
Wireframing
Prototyping
12 Mar - 13 Jul
Researcher
Home
Role
Skills
Date
Sole UI/UX Designer
UI/UX
Wireframing
Prototyping
12 Mar - 13 Jul
Researcher
"vibe tile" exploration
The North Star final logo
There were two contenders for the final logo
The North Star
A faster way to build a collection of alike works
The AI takes an image and or prompt and scours the app for similar content both visually and by category.
It can create a new collection upon finding a selection of images directly from the North Star's page.
Powerful prompters can get really specific with what they want, but the addition of search by image as well as prompt means that a less skilled user can also find exactly what they are looking for.
A
B
A poll went 5 to 2 in A's Favor
Logo exploration
Wireframing
Wireframing
A Persona
1.
A Persona
1.
A Persona