UI Updates: Meetup.com Inspiration

I spent the last few days redesigning the app using Meetup.com's mobile layout for inspiration. One thing i noticed from the Meetup website is the off-white background. On top of the off-white background is the list of groups, and each list items has a white background. I really like the visual appeal that the app has, so I copied this coloring and styling for my own groups list. I also took out the big header that said 'Groups' because I realize that it's not necessary, and in the desktop view the Groups list link icon will indicate which page the user is on.

I started with some updates to the header. I removed the borders and updated the background color to be the same color as the headers of the groups list. I also updated the color to white for the header items because it helps them really stand out on the page. I also updated Home to Explore and All Groups to just Groups.

I removed the margin from underneath the name of each group list Header by using margin: 0 in the css file. A new idea that I had is to show an indicator to the right of each group. The indicator will show the user how many users are currently 'joined' in the group. I don’t have this completed on the backend yet, so for now I just hard coded the number 4. I also imported an Icon that indicates to the user that the number is the number of users currently in the group.

I cleaned up the borders of the group list items by giving each group list item a top border only. This way the borders are not stacked double-wide between groups. For the border on the last item in the list, I gave the list itself a bottom border that matches the style of the list item borders. This way there is a seamless border and the list is contained as you would expect.

Next I want to add updates to the Group component. I re-ordered the data by putting the date first, followed by the title of the group, and then the location and time. I split the first row into two, and put the same icon and number of members indicator on the right side of the component. I wanted the indicator to match the size and layout from the Groups component, so I added a className and used the css file to style the icon the same in both components.