Junwen chen

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

1. Information: People want to know more info about how Sumatran Orangutans endangered.

2. 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

1. Clear labels for interactive elements that can be read by screen readers.

2. 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

1. Conduct research on how engaging the app is in reaching the goal to help save Sumatran Orangutans

2. Add more related articles for users to get to know more about endangered Sumatran Orangutans

3. 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:

1. Buttons: Some pages only can move forward, missing some backward buttons.

2. 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.

3. 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

1. I used headings with different sized text for clear visual hierarchy, as well as subheadings and body texts.

2. I used high contrast colour platelets to create comfortable and readable interface.

3. 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

1. Conduct more user research to explore more possibility/new areas that in need.

2. 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:

1. Conduct more user research to explore more possibility/new areas that in need.

2. 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.

3. 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

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!

https://opensea.io/collection/peachen