houdini
houdini copied to clipboard
houdiniproject
[FEATURE] Supporters Page Design
Hi, while testing the Houdini's features under commitchange, I believe the Supporters page can benefit from a design improvement. The layout appears to be following a CRM design, therefore, changing the design to match the concept would be useful,
Describe the solution you'd like By playing around the CSS codes from the browser, I managed to create a basic prototype.
Thansk @kenspy! So what you're thinking of is that the supporter details from the supporter dashboard should cover the entire page? I've been thinking similarly.
But to do so, we should figure out what we want to do with all of that screen real estate. What needs to be included here?
I think it'd be helpful if you could search and filter the activities on the right. What do you think? Do you have a sense of how that should work?
Also, I'm wondering if there's a way we can combine the supporter editing features. Currently they're a pop over and it's not a great experience. What do you think would be an ideal experience for supporter editing on this page?
Hey @wwahammy, the design I had in mind would be similar to Hubspot CRM. You got the right idea when combining the supporter editing features to the right side. The right side could be used for various functions, even pulling payments information.
It would work great in mobile as well, where the right side would appear in its own window. It can all be implemented with the Material-Ui.
@lucasgandac and I thought of the following, the gif below is about a much nicer screen, increasing usability, the whole system needs a redesign in layout
The full prototype is available on this figma link : https://www.figma.com/file/TOfZ6ee6YwYQsWeqWiX3BS/Untitled?node-id=1%3A2
@lucasgandac and @dansousamelo: welcome to Houdini and absolutely FANTASTIC work! This is so exciting. I responded on the Figma image with some comments. I think you are absolutely on the right track.
Let me know if any the comments are unclear or you don't understand something. Also, I'm happy to go into more detail about the expectations or clear up any confusion you may have about what the should or should not be part of this feature.
We have seen your comments and will work on them! I am interested in prototyping the whole application, we are doing this work for a college project, would you be able to create an issue about it?
Wonderful work, @dansousamelo, and @lucasgandac! It looks very modern and friendly, and I liked the color choices very much :smile:
I added one comment complementing what Eric already said in the prototype, but overall I had a hard time finding additional improvements. I loved it! Thanks for your contribution!
We have seen your comments and will work on them! I am interested in prototyping the whole application, we are doing this work for a college project, would you be able to create an issue about it?
@dansousamelo as a member of the Houdini community, you have as much right to make an issue as I do. I encourage you to file the issue yourself and take the lead here. Summarize what you'd like to achieve at a high level and then the community can work through the plan and details.
I think you're doing great work!
Good afternoon! Could you send me a screenshot of examples of custom fields and tags, I can't create them in the system
Thanks for your feedback, this week we will bring you more results :)
Hey @dansousamelo, I'm glad to help!
Here's what the supporter pane looks like when tags and custom fields are set:
Here's the edit window for supporter tags:
Here's the edit window for custom fields:
I tend to think we shouldn't have an edit window for tags and custom fields in the new design, simply that it should be easily possible from the supporter page itself to edit them directly. How should that work? Great question :)
Oh, one other thing: if you look at the right side of the supporter pane, that's the activity feed. We need to make sure that exists in some fashion in the final result. Ideally, it should be searchable/groupable in some way as well.
Good day, I made some modifications, putting the buttons according to the material design, only the buttons for: donation, notes and history are not according to the standard, but just componentize them, it's simple, waiting for feedbacks :)
@dansousamelo I like the new buttons Card design, it looks great for the web layout, I'm sure they can be optimized for mobile screens as well. Now I wonder if the banner will be implemented to Houdini?
@dansousamelo thanks for the follow-up! I liked what you've done with the tags, I think the experience will match with the tags that many people are familiar with on other websites. Even using material that may have a generic look, you did a fantastic work making it look more friendly and beautiful.
Some things came up to my mind while I was thinking about the user experience and the usage flow of this page:
- The donation button currently allows the admin to add a new donation for the supporter, and does nothing but this. The "+" icon that currently exists tells the user that a new donation is being added, and this also works for the notes;
- I think the "select" input there for the supporters would not be very easy to use because some nonprofits have hundreds of supporters, it would be hard to find a supporter. A search field there would be better, especially because we look for supporters using their phone, their name, their e-mail, etc;
- I think people can confuse the tags with buttons there because they have the same size and appearance as one. We could use the Material's chips component for them;
- One thing important to keep in mind on this page is that is a detailed view from an item that comes from a list, it would be good to have a button to go back to the original list.
Exciting work! Thanks!
@dansousamelo I like where this is going. I think we're getting closer. I second everything @clarissalimab said. All of her points are great.
Here are some thoughts:
- Your design seems to assume the supporter detail page should take up the whole screen and shouldn't need to scroll. That may not be a good assumption. That limits what can fit on the page but it also doesn't take into account that screen sizes differ greatly. What will take up the whole screen on an HD screen won't take up the whole screen on a 4K monitor. On the other hand, phones and tablets screens will have to push some of the content down.
- Make sure to consider accessible levels of contrast as defined by WCAG. For example, if you look at the donations button, the text is too similar to the background. One feature of the Material UI React library we use is that, if you set the background color, then the primary color, will adjust from white or black as needed to keep an acceptable amount of contrast.
- Consider other forms of accessibility. There are lots of different types of colorblindness, people using screenreaders, etc. Make sure your design considers their needs.
- Did you create the background designs? I really like them but I want to make sure we have a valid license to use them.
- I think adding supporter notes and donations should be part of the area displaying Supporter history. After all, it's creating new history! Think about how that might work and be integrated into this page.
Once again, great work and I love the direction this is going.
@dansousamelo one more thing: the react library we use for Material UI is at https://material-ui.com/. They stick pretty close to Material UI but do diverge here and there so it might be helpful to see what components they have already and how well you can match to them.
Hello, I would like to apologize to everyone about my last post, below is the result of following your feedbacks, if I forget something, let me know and I will improve it the best way you need
Sorry for any inconvenience, I really like this cause, my cousin killed himself throwing himself off a bridge 2 months ago, he was missing for a while, I know this project helps a lot of people, including missing people like my cousin was. Sorry again, my intention is to help and not criticize anything, thank you for understanding
@dansousamelo no need to apologize but thank you. I am sincerely sorry about your cousin. Houdini is here to make the world a better place and contributing here is hopefully part of that.
I think your design has a lot of potential but it needs some more polish. I really, really want to encourage you to review Material Design. We will be using the Material UI React toolkit as our starting point. I feel like a lot of the issues could be resolved by following that better.
One thing you may want to think about is taking a step back from the design itself and look a little bit more from the point of view of the user.
Do you feel you know how users will use this page and who different types of the users are? I think it would be helpful if you documented that here, discussed them to confirm they are accurate and the community can agree on that. Once you do that, I think the design may be easier to complete.
Thanks again for your dedication.
@dansousamelo I'm sorry about your cousin. Would you like to schedule a call to work on the mock up? I can work with you on the improvements, or help you with any questions that you may have.
In these last days I studied more deeply about material design, the result we can see below
Again, talking with Clarissa I came up with this layout based entirely on material design
The images are all free, taken from https://www.pexels.com
Thanks for the work and ideas you brought to us so far, we appreciate very much the time and dedication you invested on helping to make Houdini better! We're definitely going to see what we can use from what you did when we work on this page next time.
Hi guys, my GCES class group got this issue and we are very interested in contributing. We started by creating a wireframe following the original layout. With your feedbacks we can evolve and create a version close to the final one.
Thanks @alvesitalo although we're not all guys. :smile:
I think that's a good start. A couple things that you want to consider:
- How does one search the activities once at the supporter page?
It looks good to me so far. I like that we would be able to filter the supporters activities by type and/ or period.
A good idea would be to look for other CRM tools to see how they show contact's information and gather some ideas. I think we could also include a button that leads to the supporter's payments.
Hey, considering the feedbacks, we made a near final version of the high fidelity prototype (Still missing the icons in the sidebar). What do you think?
Hey guys! Can you give us feedback on the high fidelity prototype we developed? Are you satisfied with what has been developed or do you want more improvements? @wwahammy @clarissalimab
