Coco Packs
Responsive Website
Background
Coco Packs is a non-profit organization who is looking for a redesign for their website. Coco Packs provides care packages for foster youth. Many times when these children are being transitioned to a new home they might not have had a chance to pack up their old belongings. Coco Packs aims to provide these comfort packs to provide them with essential items during this transition.
The stakeholder initially started working on this project with another designer and we are continuing with a version that designer provided.
Constraints
Stakeholder had previously worked with another designer on this project. The project was not finished and after review of their work there were improvements that could be made. The stakeholder was satisfied with that direction, so we continued to develop the concept based on that foundation. In addition, there were some limitations on photo authorization and content that could not be presented on the project.
My Role
Researcher,
UX/UI Designer
Tools
Figma, Zoom
Duration
65 hours
Device
Desktop /Mobile
Competitor Analysis
The stakeholder was open to any design feedback and did not have a reference for the aesthetic and visual direction. I conducted a competitor analysis on 3 competitors with similar missions to get a reference on page layouts, feature elements and their information architecture. I focused primarily on the home pages and about us as these would be some of the more visited pages.
User Interviews
I then proceeded to conduct some user interviews with users who have had experience working or volunteering with non profits to get a better understanding of users pain points, motivations, and needs.
“I would feel reassured if I clicked on donation link there’s a breakdown on how this would impact and where the money is going to… would at least like to see what this donation goes to”
“Having the why on the home page, why was it created and who is it for if the information is not there then why am I here. Having the right amount of context then allowing me to dig dipper if I need to”
“I understand that some organizations are limited on resources and photo quality but it is important to see photos of what the organization is up to.”
“Expect to find who they donate to and why they are doing what they are doing, who they are helping and the impact they have made to the community.”
Research Synthesis
After collecting user interview feedback I created an affinity map to look for patterns and identify key insights.
Affinity Map
Key Insights
Users note that for non-profit websites the website is their first impression. Users emphasized the importance of the homepage showing exactly what they do. Showing photos and visually building the their trust.
Reputation
Clear Why
Users expect to quickly find their answers either on the homepage or about us. The users wants to know and understand what the organization does, how, why and what the organizations purpose is.
When it comes to monetary donations users have a sense of skepticism. Users want to know that their donations are going to helping. They want to know where and how.
Credibility/ Skepticism
User Persona
Taking the feedback from users and other products, I created the following user persona to define users needs, interests and frustrations.
Task Flow
Based on my research, I visualized a walk through of how a user might complete a task or go through the web page. This flow follows the questions and paths the user might take to explore the site. In this case, it explores if the user will make a donation or fill out a contact form to get in contact with the organization.
Branding / Mood Board
Before I started working on the design, I also wanted to present the potential visual look and feel of the website to the stakeholder. I wanted to assure that we were aligned with what she saw for the branding. The current websites lacked consistency and there is room to enhance the branding to better connect and tell the organization’s story more clearly.
Wireframes
Mid Fidelity Wireframes
The stakeholder had been looking to update the website for some time and even started working on this with another designer. The designer had started a few pages which the stakeholder liked but never finished the project. Since the stakeholder liked the last drafts I initially provided a review of iterations that could be made. In addition, I provided a homepage draft to visually map out some improvements to be made and align with the stakeholder’s vision and style for not only the homepage but the rest of the pages. She wanted to see the formatting on the rest of the pages which I provided to her for additional feedback before finalizing any screens.
High Fidelity Wireframes
After some initial feedback from users and the stakeholder, we worked on formatting remaining pages from the feedback she provided from our walk through of the homepage.
To further evaluate the usability and further understand the users perspectives I conducted moderated user testing with 5 participants.
Are users able to understand the purpose?
How easy is it to navigate through?
Are users able to find what they can donate to the organization?
Are there any questions from users?
Method
Due to simple design conducted unmoderated testing to allow users to explore web pages and provide first impression thoughts
Success Metrics
How easy was it to complete tasks? (Scale 1-5)
How clear was the navigation? (Scale 1-5)
Would you feel confident donating to this organization? Why?
Usability Test Results
Testing Results
Overall score from participants was 4/5
How easy was it to complete tasks? (Scale 1-5)
4.5
How clear was the navigation? (Scale 1-5)
4.5
Would you feel confident donating to this organization? Why?
Yes, clear navigation and what the organization does
Key Takeaways
Key sections were available, well structured and easy to navigate
Need to work on alignment, consistency and spacing on sections. Users addressed that this would make them question the credibility of the website
Some pages were text heavy
Some questions on where the donation button would be redirected to
Final Takeaway
The stakeholder was happy with the formatting and revisions. While the founder/stakeholder was open to input, she also expressed a strong commitment to maintaining key aspects of her envisioned direction. This was the first time I worked with a stakeholder and it was a great experience. It was a great experience to work with the stakeholders' vision and also incorporate potential users' feedback. I learned that in future projects, if the stakeholder doesn't have an opinion on the visual design that I could provided a few different styles from existing projects. This way the users can explore and speak about what they like and dislike. Then there would be no assuming and a rough guide in the direction we want to move towards.
At first, I was nervous about working with a stakeholder and unsure if I was ready but this experience helped me grow and realize receiving feedback is valuable and part of the process. I thought it was interesting to balance both user feedback and what the stakeholder vision. It served as a great learning experience in applying iterative design. I feel more prepared and excited to work on future projects.
pc
About
Projects
Contact