Non Profit Organization Redesign Project
Role: UI/UX designer
Duration: 4 weeks (March- April 2022)
Tools: Figma, Miro, Trello,
Overview
UX design
UI design
-
User research
-
Redlining+Heuristic Evaluation
-
Persona
-
Usability test
-
Feature prioritization
-
Wireframing
-
prototyping
-
Story Tile + Story Guide
-
RWD Breakpoints Set Up
-
Iteration
Fair Trade Vancouver is a volunteer-driven non-profit organization that promotes a system that values farmers and craftsmen around the world in order to improve equality, social justice, and environmental sustainability. However, I observed that the current website does not deliver clear information. The links are broken and aesthetically unpleasing.
User research
Definition& Ideation
Prototyping
Testing& Iterating
User Research
The Problem
The Fair Trade Vancouver website is difficult to use due to broken links and unappealingly displayed images. 😠
User Path - Understanding the problem
Persona
Created the proto persona to understand better using the website experience. His goals and pain points were made based on the experience of Fair Trade Vancouver.
Current website Usability Testing
😓
🧐
Interviewed with 4 people who participated in an open-ended usability test. Monitoring and documenting the actions and experiences of each person. Participants also shared their thoughts on the Fair Trade Vancouver website.
Example:
Diego Photographer (25)
-
The website is incredibly horrible
-
The links are broken
-
Some pages are not found
-
When you hover over the words, only around the words are highlighted
Using the test notes, create an affinity diagram and implement the I like, I wish, and What if technique. Assist in the formulation of the most critical usability issues. The majority of participants agreed that the present website needed to be updated.
.jpg)
The solution
One approach is to redesign the website so that it is more accessible to individuals who need. 💡
Redesigning the website appearance and usable links for users. Displaying information and images logically and aesthetically. User engagement with the organization will be improved by creating a new website version and reworking the navigation system utilizing information architecture abilities.
-
Since the top bar is plainly fragmented and contains broken links, it needs to be fixed.
-
Theme colours, typography, and visual imagery should all be consistent throughout the website.
-
Making the search bar and labels as clear as possible
-
Assuring that the buttons operate and that they are in the appropriate place
Definition & Ideation
I like, I wish and What if
Based on the original website, made sticky notes to provide feedback by using the method of what I like, wish and what if. Learning about fair trade, better visual images and navigation bar are top priority to work on. Links are broken on the original website, thus to make them work is an essential objective for our project.
.jpg)
Value Proposition
"Our design team is developing a better working website for Fair Trade Vancouver to help address issues of users not being able to find information about the NGO and its work". ☺️
Storyboard
For the storyboard, created a marketing coordinator at a grocery store who discovers that a lot of products from farm in third-world countries are available. These are most likely to be seen exploited. The plot of this story is that Arthur purchases more Fair Trade products after conducting extensive research on the Fair Trade Vancouver website. As a result, he is pleased to contribute to businesses that value their employees.
User Journey Map
The opportunity for this website is to provide users to get involved in events and familiarize the fair trade products. Also optimizing the app to be simple and easy usage.
Prototyping
Define the aesthetic of the project as well as prototyping
Sitemap
Sketches Low fidelity
Desktop version
Main Page
Donate Page
Lear about page
Brand Page
Mobile version
Main Page
Brand Page
Donate Page
Testing & Reiterating
Reiterating design to improve user's engagement
Version 1
Version 2
.png)
.png)
Started tweaking our prototype. As you can see from the minor differences in the different editions in the use of colour, font, ensuring high resolution imagery is consistent across the platform, and most importantly, our users flow and ability to navigate through Fair Trade Vancouver.
UI style guide
Final prototype
Final thoughts
What's next?
New perspective
I believe that the Fair Trade approach of promoting awareness and demanding quality not only in the items we consume, but also in the lives of those who make them is central to the Fair Trade concept. This opportunity has caused me to reconsider the significance of a fully functional website. The present website's original appearance and experience are undoubtedly distressing to all users. I learned how people want to know about fair labour practises and fair trade product information by redesigning and iterating through multiple feedback and thought processes.
Reflection
One of the most important lessons I learned throughout this project is that experimentation is essential for success in UX design. Every time I encountered a bottleneck, I discovered that focusing on user testing and conducting research was quite beneficial.
I'm grateful for the insights I've acquired from both the instructional professionals and my fellow students at University of Toronto, which I was able to accomplish in such a short length of time using Fair Trade Vancouver. I'm now ready to take on the task of UX designer on my own.