My recent projects focus on e-commerce, utilizing compelling graphics to captivate audiences and drive sales. Most of the work is done using Photoshop, with some projects created in Illustrator.
I am excited to introduce BREADY, a brand created for my client’s new bakery. BREADY embodies quality, creativity, and a passion for baking.
The graphics, designed using Photoshop and Illustrator, reflect the essence of homemade goodness and a delightful customer experience. Explore more to see the vibrant imagery and sleek designs that bring BREADY to life.
BREADY - Bread Be Ready
This is a conceptual project about helping people build their careers. BuildPro is a leading recruitment agency dedicated to helping individuals build their portfolios and advance their careers. We connect talented professionals with top employers, providing personalized support and opportunities for growth. At BuildPro, we are committed to empowering your professional journey and shaping your future success.
Project Overview
Save Sumatran Orangutans(S.S.O) is a non-profit organization focused on help replant destroyed forest in Sumatra and restore Sumatran Orangutans habitat.
Users can help by purchasing campaign apparel items as a donation for action. S.S.O’s primary target users include adults who are concerned about environmental and ecosystem problems and would like to help make contribution to stop the issues deteriorating.
Project Duration: August 2022 to September 2022
The Problem: Sumatran Orangutans have lost well over 80% of their habitat in the last 20 years. Population has shrunk more than 50% in Sumatra since 1993, and could be extinct in the wild in less than 25 years. Deforestation is the greatest threat to their survival.
The Goal: Design an app that will help restore Sumatran Orangutans habitat by purchasing campaign apparel items, all the proceeds from the app will go directly to our rescue team in Sumatra to help restore destroyed forest.
My Role: UX designer leading the app and responsive website design from conception to delivery
Responsibilities: Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs, determining information architecture, and responsive design.
User Research: Summary
I used Save Sumatran Orangutans’ data on how people feel about to help endangered Sumatran Orangutans by purchasing campaign apparel to develop interview questions, which were then used to conduct users interviews. Most interview participants reported feeling bad about creature like Sumatran Orangutans forced to leave their habitat due to environmental problems caused by human activities. The feedback received through research made it clear that users would be open and willing to purchase campaign items as a donation, and help make a voice to get more people involved.
Persona: Marry
Problem statement: Marry is a preschool teacher who needs to make her contribution to help save endangered Sumatran Orangutans because our planet and ecosystem will be better by helping them.
Journey Map
I created a user journey map of Marry’s experience using the site to identify possible pain points and improvement opportunities.
Ideation
I did a quick ideation exercise to come up with ideas for how to address gaps identified in the Journey map. My focus was specifically on delivering information about endangered Sumatran Orangutans and providing campaign apparel options.
Digital Wireframes
After ideating and drafting some paper wireframes, I created the initial designs for the Save Sumatran Orangutans app. These designs focused on delivering important information about endangered Sumatran Orangutans and guidance to users to make their action to help.
Low-Fidelity Prototype
To prepare for usability testing, I created a low-fidelity prototype that connected the user flow of purchasing an item to help make contribution to the campaign.
View Save Sumatran Orangutans’ low-fidelity prototype
Usability Study: Parameters
Study type: Unmoderated usability study
Location: Canada, remote
Participants: 5 participants
Length: 15-20 minutes
Usability Study: Findings
Information: People want to know more info about how Sumatran Orangutans endangered.
Navigation: People had difficulty to browse the app because the layout is not very clear
Mockups
Changes based on the insights from the usability studies.
Mockups
Changes based on the insights from the usability studies.
Key Mockups
High-Fidelity Prototype
The high-fidelity prototype followed the same user flow as the low-fidelity prototype, including design changes made after the usability study.
View Save Sumatran Orangutans high-fidelity prototype
Accessibility Considerations
Clear labels for interactive elements that can be read by screen readers.
Initial focus of the home screen on “Shop to support” to help define the primary task or action for the user.
Sitemap
With the app designs completed, I started work on designing the responsive website. I used the Save Sumatran Orangutans sitemap to guide the organizational structure of each screen’s design to ensure a cohesive and consistent experience across devices.
Responsive Designs
The designs for screen size variation included mobile, table, and desktop. I optimized the designs to fit specific user needs for each device and screen size.
Desktop High-Fidelity Prototype
View Save Sumatran Orangutans Desktop high-fidelity prototype
Takeaways
Impact: Users shared that the app made the “donation” seem like something they could actually help and make action on it. One quote from peer feedback was that “ the Save Sumatran Orangutans app helps get more people involved because the purpose of the app is meaningful, I’d like to get engaged to this campaign to be a part of it.”
What I learned: I learned that design process needs a lot of data to support, and to build up insights, research is playing a crucial key to succeed.
Next Steps
Conduct research on how engaging the app is in reaching the goal to help save Sumatran Orangutans
Add more related articles for users to get to know more about endangered Sumatran Orangutans
Provide additional incentives to users for purchasing campaign apparel
Thank you for your time to reviewing my work on Save Sumatran Orangutans app.
Project Overview
My project is to design an album listening & ordering flow for a punk band, JohnsonX is a fictional artist I created for this project.For this project, the typical users are those people who's into punk music and people who loves to explore music and support the artists.
My goal of creating this responsive website is to help music lover to listen to/order music they like in a fun and easy way.
Project Duration: September 2022
The Problem: Music platform doesn’t usually have a feature that to listen to albums music before buying it. Also, inefficient navigation and systems are the problems for users to browse through the pages.
The Goal: Design an album with listening feature and a fast checkout process.
My Role: UX designer leading the JohnsonX’s website design.
Responsibilities: Conduct Interviews & questionnaires, user research, competitive audits, paper and digital wireframing, low and high-fidelity prototyping, usability studies, accounting for accessibility, and iterating on designs.
User Research: Summary
I conducted interviews and created empathy maps to understand the users I’m designing for and their needs. A primary user group identified through research was many targeted users want to listen to an album without paying first even though they are fans of the artist.
Also, the ordering system should be related to the theme-punk style to keep users feel enjoyable to do so.
User Research: Pain points
Navigation: Shopping online can be frustrated, especially with the confusing navigation.
Time: Too much content on the website leads to the result that users won’t visit the website anymore.
Interaction: The lack of listening feature of an album, most users are not feeling comfortable to buy product without experience it.
Persona: Iris
Problem statement: Iris is a busy project manager who needs an intuitive music shopping website to explore new music because she listens to music all the time.
User Journey Map
I created a user journey map of Iris’s experience using the site to identify possible pain points and improvement opportunities.
Sitemap
The primary pain points for users to browse online were confusing navigation and insecure checkout process, so I use that as my knowledge to create a sitemap.
My goal was to make information architecture that would improve overall navigation by simplifying the complexity, and be concise to the emphasized content.
Paper Wireframes - Part 1
Next, I sketched out paper wireframes for each screen for my responsive website, keeping the user pain point about navigation, browsing, and checkout flow in mind.
Stars were used to mark the elements of each sketch that would be used in the initial digital wireframes.
Paper Wireframes - Part 2
The screen on the left is the combined stars version of the initial wireframes would look like.
The home screen paper wireframes variations to the right focus on optimizing the browsing experience for users.
Paper Wireframes Screen Size Variations
Because JohnsonX’s customers access the site on a variety of different devices, I started to work on designs for additional screen sizes to make sure the site would be fully responsive.
Digital Wireframes
Moving from paper to digital wireframes made it easy to understand how the redesign could help address user pain points and improve the user experience.
Prioritizing useful button locations and visual element placement on the home page was a key part of my strategy.
Low-Fidelity Prototype
To create a low-fidelity prototype, I connected all of the screens involved in the primary user flow of adding an album to the cart and checking out.
At this point, I had received feedback on my designs from members of my team about things like placement of buttons and page organization. I made sure to listen to their feedback, and I implemented several suggestions in places that addressed user pain points.
To view JohnsonX Album low-fidelity prototype
Usability Study: Parameters
Study type: nmoderated usability study; Location: Canada, remote; Participants: 5 participants; Length: 10-15 minutes
Usability Study: Findings
These were the main findings from participants by the usability study:
Buttons: Some pages only can move forward, missing some backward buttons.
Cart: Once add item to the cart, users weren’t able to cancel the order, and when item added to cart, the “cart” icon doesn’t have quantity number beside it, also there is no editing for the quantity.
Checkout: During the checkout process, there is no backwards, either keep continuing to checkout or click logo to go back to the start.
Mockups - Part 1
Based on the insights from the usability study, I made changes to improve the site’s checkout flow. One of the changes I made was adding the option to edit the quantity of items in a user’s cart using a simple “+” or “-” option. Also, I added the “x” on the top right inside the order summary, so users can be able to cancel the order if they want to. ‘Cart” icon appears with the number besides it when item added to cart.
Mockups - Part 2
The another change I made was to update a “return” button in order to help users to return to previous page.
I included considerations for additional screen sizes in my mockups based on my earlier wireframes. Because users shop from a variety of devices, I felt it was important to optimize the browsing experience for a range of device sizes, such as mobile and tablet so users have the smoothest experience possible.
High-Fidelity Prototype
My high-fidelity prototype followed the same user flow as the lo-fi prototype, and included the design changes made after the usability study.
View JohnsonX’s Album high-fidelity prototype
Accessibility Considerations
I used headings with different sized text for clear visual hierarchy, as well as subheadings and body texts.
I used high contrast colour platelets to create comfortable and readable interface.
I used landmarks to help users navigate the site, including users who rely on assistive technologies
Takeaways
Impacts: Our target users shared that the design was clear, intuitive and fun, navigation and hierarchy overall flows engagingly. There are still a lot of improvement could be applied to the design. Keep it up.
What I learned: I learned that attention-to-details make a good design appealing, a small detail in design can make a big difference to improve user experience. Paying attention to how users respond to prototype and receiving feedback from users and research participants can facilitate the design process in a effective way.
Next Steps
Conduct more user research to explore more possibility/new areas that in need.
Conduct more usability studies to validate whether the pain points user experienced have been effectively addressed, and to look for more feedback in order to provide better user experience.
Thank you for your time reviewing my work on the JohnsonX’s Album App.
Project overview
Petfood Delivery is an app that strives to deliver healthy pet food to users doorstep in a safe, reliable and fast delivery service. Petfood provides ingredients preview system of pet food to ensure users easy to understand, and to customize their preference for their pets. Petfood Delivery targets customers like busy workers and commutes who lack of time or ability to meal prep for their pets.
The problem:
Busy workers and commuters(pet owners) lack of time or ability to meal prep for their pets.
The goal:
Design an app for Petfood Delivery that allows users to easily order healthy pet food and have the order to their doorstep.
My role:
UX designer designing an app for Petfood Delivery from conception to delivery.
Responsibilities:
Interviews & questionnaires, user research, competitive audits, paper and digital wireframing, low and high-fidelity prototyping, usability studies, and iterating on design.
User research
Personas
Probem statements
User journey maps
User research: Summary
I conducted interviews and created empathy maps to understand the users I’m designing for and their needs. A primary user group identified through research was working adults don’t have time to meal prep for their pets.
This user group confirmed initial assumption about Petfood Delivery customers, but research also revealed that time was the only factor limiting users from meal prep for their pets. Other user problems included different pet food preferences, inconvenient residential location, health condition, pet related interests that make it difficult for those users to prepare healthy pet food for their pets.
User research: pain points
Product: Pet food industry is too diverse that sometimes it’s overwhelming to choose what pet food is the best for pets.
Time: After a long day from work, pet owners sometimes don’t want to spend the time to prepare food or going out to get pet food.
Accessibility: Local pet stores don’t have the pet food that pet owners wanted.
Support: Pet food can be heavy especially when pet owners order over 2 weeks pet food.
Persona: Joseph
Problem statement: Joseph is a very busy software developer who needs an easy and reliable access to order healthy pet food and delivery service because they are too busy to prepare meal for their pets.
User journey map
Mapping Joseph’s user journey revealed how helpful it would be for users to have access to find/get a healthy pet food delivery service app.
Starting the design
Paper wireframes
Digital wireframes
Low-fidelity prototype
Usability studies
Paper wireframes
Taking the time to draft iterations of each screen of the app on paper ensured that the elements that made it to digital wireframes would be well-suited to tackle users pain points. For examples, on the home page, I prioritized the easy and unstandable categories and contents help users to save time to the order.
Digital wireframes
As the initial design phase continued, I made sure to base screen designs on feedback and findings from the user research.
Low-fidelity prototype
The low-fidelity prototype connected the primary user flow of ordering and delivering pet food.
View Petfood Delivery low-fidelity prototype, click here
Usability study: findings - Round 1
Based on my first usability study, some key findings are presented on the round 1:
Users want to order pet food effectively
Users want more customization/selection on the petfood content
Users want to use search bar tool
Mockups
In the early designs, it allowed users to browse some basic category and icon functions, but after the usability study, I added more visual content to emphasize the layout and made it more appealing. I also activated all buttons and simplified the hierarchy trying to make all elements as a whole.
Usability study: findings - Round 2
Based on my second usability study, some key findings are presented on the round 2:
The pet food product page seems a bit crowded
Home-page top bar is not fixed while scrolling, it’s bugging me.
There is no log-in or Sign-up screens to start with at the beginning.
(Images above are key mockups of the final product.)
High-fidelity prototype
The final high-fidelity prototype presented cleaner user flows with extended contents for users to better experience the app functions. It also met user needs for order or delivery option as well as more customization.
View Petfood Delivery high-fidelity prototype, click here
TAKEAWAYS:
Impact: The app makes users feel like Petfood Delivery is a safe/reliable and friendly platform that providing healthy pet food to meet their needs.
What I learned: I learned that to designing an app, we need a lot of effort to going through the design processes in order to achieve the final goal. Research, studies, peer feedback, wireframes, prototyping influenced each iteration of the app’s design. There are still a lot of room to improve the user experience in the app. We should never stop learning, to get better.
NEXT STEPS:
Conduct more user research to explore more possibility/new areas that in need.
Conduct more usability studies to validate whether the pain points user experienced have been effectively addressed, and to look for more feedback in order to provide better user experience.
Based on the competitive audits, find out more areas that could be used/applied to current design in order to achieve the better goal.
FINALLY:
Thank you for your time reviewing my work on the Petfood Delivery app! I really appreciate it. Thanks again.
If you‘d like to see more or get in touch, my contact information is provided below.
Email: disonchanjw@gmail.com
This is a Photoshop artwork I created for a YouTube Photoshop competition. Although I didn't win, I was very pleased with the quality of my work.
The rest of the images are just for fun :)
A Photoshop work about a soldier coming home back from war(SCI-FI theme).
A fun work for a friend who wants to be a samuria(the next image is the materials i used for this piece).
I make myself a wallpaper :) (the next image is the materials i used).
Happy Halloween!
This series of NFT I made were for a Web3.0 game called 6ixClaws associated with NFT market on Opensea(like CryptoKitties). For this project, based on the properties along with traits, generate a whole set of variations (e.g. Dragons, Pandas, Polar Bears, and Rabbits series, in this case I displayed some of the variations for reference). It was a whole new experience working for this project. I enjoyed every second designing them :)
This is my own NFT project, it’s called “PEACHEN” (fun peach characters!). The reason why I made this is simply because I want to participate in Web3.0 development. It is always fun to present design in different fields. Don’t you think?
This catalog design was created for one of the largest noodle manufacturers in Toronto. The design emphasizes simplicity and elegance, reflecting the corporation's professional image. Every element is thoughtfully selected to represent the brand's legacy and commitment to quality, while maintaining a modern and visually appealing layout.
Some of the designs I created while working and freelancing.
This is a PPE catalogue I created at my previous job. I used a platform called Flippingbook which can make the file into a digital catalogue, for more details you can click the link below:
https://online.flippingbook.com/view/258131227/
Also, feel free to click this link too, which is the medical supplies catalogue:
