Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

App redesign #691

Closed
nshki opened this issue Oct 5, 2017 · 25 comments

Comments

6 participants
@nshki
Copy link
Member

commented Oct 5, 2017

EDIT (Oct 26, 2017)

Designs have been ported to Figma and the latest can be viewed at this link.

Overview

The need for a full app redesign was discussed and we are currently working on rethinking it from the ground up. This thread originally started in the Slack community, but we are going to start documenting it in GitHub.

Initial Mockups

The following are some mockups of the homepage I created to explore a visual direction. The color scheme is likely going to stay the same as the current app, but I added pink/blue variation as well. Using a simple, line-based visual language to convey openness and focus. This style would be used throughout the entire app. The font used will likely be Lato to stay consistent with the logo.

ifme-redesign-home-1
ifme-redesign-home-2
ifme-lato-og-colors
ifme-lato-og-colors-2

Next Steps

  • Rethink stories, you, and document icons
  • Design menu
  • Put Sketch files somewhere where people can collaborate on them (open to suggestions here!)

And of course, design everything else :)

@nshki

This comment has been minimized.

Copy link
Member Author

commented Oct 8, 2017

Iterated some more on the original idea.

  • Sticking to a palette based off of original site colors
  • Using "About", "Blog", "Resources", and "Sign In" as nav links for not logged in users (thinking about a sidebar once a user is logged in for the rest of the app)
  • Added if me logo front and center
  • Added latest blog posts
  • Redid icons for "features" section
  • Moved original line illustrations into background
  • Added circles around contributor avatars
  • Added "Resources" link in footer

home-v3

Feedback is welcome! Will be exploring "logged in" screens next: moments, strategies, medications, groups, allies, etc.

@julianguyen

This comment has been minimized.

Copy link
Member

commented Oct 8, 2017

This looks amazing so far! Thanks for this 🎉

Looks like we should start off with redesigning our non-mandatory signed in pages. Wondering if the join link would appear in the header navigation when we navigate away from the homepage.

Also would it help to have headings in the footer to provide context for each column?

@nshki

This comment has been minimized.

Copy link
Member Author

commented Oct 8, 2017

@julianguyen Ah, for the join link, I'll go ahead and adjust the last nav item so that it's "Sign in / Join." Also, I'll go ahead and add headings for each footer column to mirror the current site!

Do you have any preference for the next screen to be designed? Was thinking of tackling moments.

@julianguyen

This comment has been minimized.

Copy link
Member

commented Oct 10, 2017

Moments would be a good feature to do since it's the main one. But I would also do the static, non-mandatory signed in pages first (e.g. About, Contribute).

@asiahoe expressed interest in redesign the story cards that are used throuhgout the site #686

Maybe you two could collaborate? :)

@rheupler

This comment has been minimized.

Copy link

commented Oct 10, 2017

I would love to work on actually building these designs to the existing site, if no one has committed. Or if it's being done, let me know if I can help in any way!

@nshki

This comment has been minimized.

Copy link
Member Author

commented Oct 10, 2017

@rheupler We will likely have some dev planning discussions (either in Slack or somewhere in GitHub) once the redesigned screens are ready to be developed! We'll loop you in when we're there.

@julianguyen Sounds good. 😄

@nshki

This comment has been minimized.

Copy link
Member Author

commented Oct 11, 2017

Some more design progress. Finishing up the non-mandatory pages @julianguyen mentioned above before tackling logged in screens (moments, strategies, etc.). Will have a go at the resources page next.

About

about

Blog

blog

@julianguyen julianguyen added this to In Progress in UX/UI Enhancements Oct 11, 2017

@julianguyen

This comment has been minimized.

Copy link
Member

commented Oct 14, 2017

Wow I love the designs on the static pages! I'm wondering for our signed in pages whether we should using black text on white background to display Moments etc.

@julianguyen

This comment has been minimized.

Copy link
Member

commented Oct 14, 2017

Also do you think the colour contrast is enough for the selected link in the header? Should we be using #D0E799? Same for the colour contrast with the author name in the Blog mockup?

@julianguyen

This comment has been minimized.

Copy link
Member

commented Oct 14, 2017

@rheupler Can you email us at join.ifme@gmail.com so we can add you to our Slack? :D Thanks for expressing interest :D

@nshki

This comment has been minimized.

Copy link
Member Author

commented Oct 14, 2017

@julianguyen For moments cards etc. I'm definitely planning on using a black on white or some variant of it!

For active links in the nav, I could try playing with adding another visual indicator other than color to make it more clear. #D0E799 looks a little off in the header unfortunately. I can brighten up the author name just a smidge.

Also, for blog posts, what do you think about adding posted date as well?

@nma

This comment has been minimized.

Copy link
Collaborator

commented Oct 16, 2017

@nshki This is super cool, love the visual revamp 🥇

@nma

This comment has been minimized.

Copy link
Collaborator

commented Oct 18, 2017

As for next steps, I was thinking we can start slicing out sections/components and start an UI components library akin to what many folks are doing using React + StoryBook e.g https://hackoregon.github.io/component-library/

As for how we want to do that, do we want a separate NPM package to import into the main rails app? Or do we want to centralize it all inside the main app? @julianguyen @baohouse @nshki ?

@nshki

This comment has been minimized.

Copy link
Member Author

commented Oct 18, 2017

@nma Love that idea. I'm on board. I think I want to vote for keeping all components centralized in the main app unless we are willing to build a full API on the Rails side (to allow for separate front and back end repos). Building the components in a separate repo / package feels strange if we aren't building all the screens there as well. I can definitely be convinced otherwise though.

@nma

This comment has been minimized.

Copy link
Collaborator

commented Oct 20, 2017

@nshki I think that writing a full API on Rails at this moment is an anti-goal. My original thinking was that components could be worked on separately from the main app, and might be easier to contribute to, but after thinking about it more, creating two pull requests for each repo might not be a natural workflow for most people.

We can build it into the main app, and its pretty easy to pull it out later if we need it. So centralized to start?

@nshki

This comment has been minimized.

Copy link
Member Author

commented Oct 20, 2017

@nma Centralized to start sounds good to me.


As a general update, Sketch documents have been ported over to Figma, and @asiahoe and I will be collaborating on the designs moving forward.

Let's hold off on building the component library until the designs are somewhat finalized, since a lot can still change.

@nshki

This comment has been minimized.

Copy link
Member Author

commented Oct 27, 2017

Another update. Since designs have been ported to Figma, I'll be able to share using links from this point forward (hurray!).

You can catch the latest in design land with this link. I'll update the original comment to show this and a screenshot is attached as well.

screenshot 2017-10-26 22 57 09

@nshki

This comment has been minimized.

Copy link
Member Author

commented Nov 12, 2017

@timofonic Thanks! We're still cranking away at the design. You can see the latest at this link.

This was referenced Nov 18, 2017

@nshki

This comment has been minimized.

Copy link
Member Author

commented Jan 4, 2018

@julianguyen @nma @baohouse I apologize about the delay in updates! December was a crazy time for me and I had a hiatus due to an injury.

I think we can go ahead and start development on the redesign, although not everything is complete yet. Basic atomic components are more or less defined, and I think in-browser development will give us the flexibility we need for design decisions that require more group contextual knowledge.

What do you all think?

@julianguyen

This comment has been minimized.

Copy link
Member

commented Jan 8, 2018

Latest designs look fantastic! Looks like we can start creating issues for the basic atomic components! I think its' a good idea to build out the smaller components first, it would also get us using React more :D

@nshki

This comment has been minimized.

Copy link
Member Author

commented Jan 9, 2018

Just for easy access, here is the link to the Figma document: https://www.figma.com/file/RTjPkO0nSuJcMqqWLjeVdEof/if-me


Alrighty! Now that it's verified that registered Figma users (don't worry it's free for individual accounts) can click around and view CSS properties (colors, dimensions, etc. thanks to @baohouse and @julianguyen), I think we're ready to move forward! Any illustrations that need to be exported should be exportable from the Figma document as SVGs. Please ping me if for some reason that is not working for you.

I'll get a start on creating separate issues for components we can start building.

This was referenced Jan 9, 2018

@baohouse

This comment has been minimized.

Copy link
Collaborator

commented Apr 11, 2018

@nshki So I'm testing out Ant Design Mobile at work, and it does raise an interesting question of how the mobile/tablet UI should behave.

screen shot 2018-04-11 at 3 18 07 pm
screen shot 2018-04-11 at 3 18 40 pm

There are two main things to note:

  1. The notion of a minimalist interface that looks more like a mobile app; focus each view/page to do one thing well.
  2. That there can be different interfaces for something like choosing a value from a select dropdown element. In desktop, you click a <select> and it pops open a context menu of options. But in mobile, we might want to actually use a mobile-designed slot-machine-style picker.

I'd like to know your thoughts regarding these.

@nshki

This comment has been minimized.

Copy link
Member Author

commented Apr 12, 2018

@baohouse Very cool! Thanks for bringing this up.

  1. I think we can achieve something similar when making the current design responsive. When time allows / others want to give it a shot, it'd be great to create responsive mock ups in Figma.
  2. Were you thinking it'd be good to create that interaction as part of a component? I like the idea, but was thinking we can use native select behaviors for all of the dropdowns.
@baohouse

This comment has been minimized.

Copy link
Collaborator

commented Apr 12, 2018

screen shot 2018-04-12 at 12 31 06 pm

Worth noting on tablet, the UI component interaction is different than mobile. So tablet is in between mobile and desktop, in the sense that it behaves like desktop, but has the added capability of supporting gestures/touch.

@AllanOcelot

This comment has been minimized.

Copy link

commented Jul 16, 2018

Colourwise I'd highly advise against using the red colour so much, it's overpowering.

I'd advise a steel blue / neutral grey colour.

In the latest screenshot for instance, we are using the red on a 'give feedback' icon - but users will always instinctively associate red with a negative action, and thus red should be reserved for such things.

One could use the arguments of 'the colour represents our current branding' etc - but thats what this is, a large redesign, I would use it as an opportunity to establish a solid and consistent colour palette.

The overall direction is solid though and I think many of the layout changes are good and justified.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.