It came down to an A/B contest
Digital Wireframes
Digital Wireframes
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.
Prototyping
wireframing
UX/UI Design
12th March-13 July
ROLE
SKILLS
TIMELINE
Designer
Researcher
Overview
Overview
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.
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
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
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.
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
"vibe tile" exploration
There were two contenders for the final logo
A poll went 5 to 2 in A's Favor
A poll went 5 to 2 in A's Favor
A
B
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.
1.
Wireframing
2.
resulting changes
resulting changes
I kept hearing feedback saying, in short "I'm having difficulty knowing where to go or how to get there."
-a few of these comments-
The Second Questionnaire
the resulting changes from the second round of feedback
Though scores had improved across the board, something still wasnt clicking…
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?"
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 First Prototype
The First Prototype
A Navigation Bar
A Navigation Bar
It came down to an A/B contest
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
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.
Experiments
Experiments
Experiments
Designing for focus requires early discernment
Designing for focus requires early discernment
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.
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.
Public collection adds and saves for the viewer and uploader
Public collection adds and saves for the viewer and uploader
Limitations
Limitations
Limitations
First digital Wireframe
Second digital Wireframe
Paper Wireframes
Paper Wireframes
The North Star final logo
The North Star final logo
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
2.
2.
Research
Research
3.
3.
Navigation bar explorations and final (descending order)
Navigation bar explorations and final (descending order)
A Persona
Observations
Observations
Observations
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.
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.
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.
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
North Star AI giving suggested posts to the user
final prototype
Matthew Mingle
Home
Doodles
Back
Role
Skills
Date
Sole UI/UX Designer
UI/UX
Wireframing
Prototyping
12 Mar - 13 Jul
Researcher
De-Finder
sections
Matthew Mingle
Back
Matthew Mingle
Go to - Student Sync Brief
De-Finder
De-Finder
sections
Constructing a solution for designers in need of inspiration, without the social media rigamaroll
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.
An app based wholly on design principles, built to expedite the mood-boarding process
…rewards exploration not posting to receive validation.
…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.
…integrates AI that cultivates taste and doesn't generate derivative images.
A Persona
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.
Wireframing
Paper Wireframes
Digital Wireframes
First digital Wireframe
Second digital Wireframe
The Second Questionnaire
I kept hearing feedback saying, in short "I'm having difficulty knowing where to go or how to get there."
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?"
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.
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.
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.
Logo exploration
"vibe tile" exploration
There were two contenders for the final logo
A
B
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.
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.
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.
North Star AI giving suggested posts to the user
Limited number of respondents
Solo project
Repeated respondents
Limited information regarding competitor metrics
Most qualitative evidence are personal testimonies from numerous sources
Go to - Student Sync Brief
Student Sync Brief