EasyNFT
EasyNFT
Time
Time
Nov, 2022 - Jan, 2023
Nov, 2022 - Jan, 2023
Duration
Duration
2 month
2 month
Tools
Tools
Figma
Figma
Role
Role
Research, Information Architecture, Prototyping, Interaction Design, Graphic Design
Research, Information Architecture, Prototyping, Interaction Design, Graphic Design
Design Challenge
Design Challenge
How might I make it easier for online shoppers to browse and purchase?
How might I make it easier for online shoppers to browse and purchase?
The goal for this project was to provide a highly efficient shopping experience for users by creating a “All-in-one” page.
The goal for this project was to provide a highly efficient shopping experience for users by creating a “All-in-one” page.
Research
Research
Interviews
Interviews
I conducted brief interviews in the range of 50 Brooklyn College students at campus who had sufficient experience of online shopping; gathering thoughts and opinions about their pain points and insights.
I conducted brief interviews in the range of 50 Brooklyn College students at campus who had sufficient experience of online shopping; gathering thoughts and opinions about their pain points and insights.
I focused on learning users’ shopping behaviors and preferences with my questions, leaving an open question at the end of the interview for any possible insights.
I focused on learning users’ shopping behaviors and preferences with my questions, leaving an open question at the end of the interview for any possible insights.
Problems to solve
Problems to solve
After gathering the results of research, I dived into analyzing user pain points and their needs, summarized the problems and ways to solve them.
After gathering the results of research, I dived into analyzing user pain points and their needs, summarized the problems and ways to solve them.
1
Too much clicking 🤔
Too much clicking 🤔
NEED
NEED
Interviewees complained that after looking at one item or collection, there’s always a couple clicks away from going back to the main gallery you were at and it can be frustrating.
Interviewees complained that after looking at one item or collection, there’s always a couple clicks away from going back to the main gallery you were at and it can be frustrating.
Easy approach to go back ✅
Easy approach to go back ✅
2
In cases which websites open up a new tab for each new page, tabs get stacked up quickly when viewing multiple items, makes it messy and hard to find previously viewed pages.
In cases which websites open up a new tab for each new page, tabs get stacked up quickly when viewing multiple items, makes it messy and hard to find previously viewed pages.
Too many tabs 🤔
Too many tabs 🤔
NEED
NEED
Stay on the same page ✅
Stay on the same page ✅
3
Would like a “⭐” feature ✅
Some Interviewees stated their needs for a “favorite” feature. Result of interviews suggested that many users don’t have the habit of adding items that they like but need a second thought of buying to their shopping cart, a “⭐” page would the best option for those items to be added to.
Would like a “⭐” feature ✅
Some Interviewees stated their needs for a “favorite” feature. Result of interviews suggested that many users don’t have the habit of adding items that they like but need a second thought of buying to their shopping cart, a “⭐” page would the best option for those items to be added to.
Sketches
Sketches
Key Features
Key Features
After the research process, I had a better understanding of user needs for this project. I then started iterating and sketching out some of the ideas I had in mind.
After the research process, I had a better understanding of user needs for this project. I then started iterating and sketching out some of the ideas I had in mind.
“All-in-one” page → All the details of merchandise displayed on the same page.
Expand toggle → Allows details of individual items to be displayed or hidden based on users’ preferences.
“My Favorite” → Allows users to save items that they like but are uncertain of purchasing. Based on research, users tend to not add these items to their shopping cart, ending up losing the chance of a second consideration of purchasing as a result.
“All-in-one” page → All the details of merchandise displayed on the same page.
Expand toggle → Allows details of individual items to be displayed or hidden based on users’ preferences.
“My Favorite” → Allows users to save items that they like but are uncertain of purchasing. Based on research, users tend to not add these items to their shopping cart, ending up losing the chance of a second consideration of purchasing as a result.
Sketched prototype of expandable component
Sketched prototype of expandable component
User Flow
User Flow
Before creating the high-fidelity prototype, I conducted a user flow chart, indicating the three main actions that users may possibly make.
Before creating the high-fidelity prototype, I conducted a user flow chart, indicating the three main actions that users may possibly make.
Design
Design
Design System
Design System
I worked on a small style guide that would raise my efficiency and help my design to be more unified.
I worked on a small style guide that would raise my efficiency and help my design to be more unified.
High Fidelity Mockups
High Fidelity Mockups
I put together my thoughts and ideas, made several adjustments on top of my initial iterations and created the high fidelity mockups. In the design, I was able to visualize key features and turn them into real solutions.
I put together my thoughts and ideas, made several adjustments on top of my initial iterations and created the high fidelity mockups. In the design, I was able to visualize key features and turn them into real solutions.
In order to achieve my goal of a time and effort saving shopping experience, I focused on adding the “All-in-one” concept and simple aesthetic considerations in my design, .
In order to achieve my goal of a time and effort saving shopping experience, I focused on adding the “All-in-one” concept and simple aesthetic considerations in my design, .
Drops page
Drops page
Expanded view
Expanded view
My Favorite page
My Favorite page
My Favorite page
Cart page
Cart page
Cart page
Interaction Map
Interaction Map
An interaction map indicates all the potential actions users might do, which are as well the interactions I planned on adding to the prototype. By sorting them all, I got to go through the page again from a user’s perspective and confirm that the placement and design of everything was reasonable and intuitive.
An interaction map indicates all the potential actions users might do, which are as well the interactions I planned on adding to the prototype. By sorting them all, I got to go through the page again from a user’s perspective and confirm that the placement and design of everything was reasonable and intuitive.
Figma Flow
Figma Flow
Conclusions
Conclusions
Background
Background
“EasyNFT” was expanded based on another project about graphic and UI design I made in class. The original project was about choosing 10 artwork from the Whitney Museum of American Art (NYC) Collection and mix them with students’ own artwork in any medium, at the end, putting them together as a simulation of a personal NFT page.
“EasyNFT” was expanded based on another project about graphic and UI design I made in class. The original project was about choosing 10 artwork from the Whitney Museum of American Art (NYC) Collection and mix them with students’ own artwork in any medium, at the end, putting them together as a simulation of a personal NFT page.
I found it a great opportunity for UX design to be built on, therefore I made it happen with my spare time outside of class. I set myself a deadline within 2 months. I understood that this was not a real product, but having a deadline challenged myself on time management and prioritizing tasks, it also served as a purpose of self-monitoring that helped me kept things on track.
I found it a great opportunity for UX design to be built on, therefore I made it happen with my spare time outside of class. I set myself a deadline within 2 months. I understood that this was not a real product, but having a deadline challenged myself on time management and prioritizing tasks, it also served as a purpose of self-monitoring that helped me kept things on track.
Reflections
Reflections
Looking at it right now, without time constraints, I would definitely go bold with the layouts and elements, and try experimental designs for discovery. On top of that, I would put in more considerations with building the design system so the outcome could be more unified.
Looking at it right now, without time constraints, I would definitely go bold with the layouts and elements, and try experimental designs for discovery. On top of that, I would put in more considerations with building the design system so the outcome could be more unified.
I do believe that a revision of prototyping after a user testing would give the project more insights and feedback, helping it to improve steps further. That is a thing I would definitely dive into if I were to have more time.
I do believe that a revision of prototyping after a user testing would give the project more insights and feedback, helping it to improve steps further. That is a thing I would definitely dive into if I were to have more time.
