Improve First Run Experience

[brminnick]

Let's create a better, more welcoming, first-run experience.

Currently, on first run, users are greeted with an error:

[bricefriha]

How would you like to change it?
Do you want the user to be welcomed by a connection page or something? :)

[brminnick]

@bricefriha I'd love to hear your initial thoughts as well!

I was thinking of creating a Welcome Page that would be displayed during the first-run of the app.

The Welcome Page would include the following as carousel views:

• First carousel view introduces GitTrends
• Second carousel view explains how to use the charts
  • Zooming in/out
  • Long pressing to see numeric values
• Final carousel view explains how to get started by connecting to GitHub
  • Includes a Connect to GitHub button that would take the user to the SettingsPage and kickoff the GitHub auth flow

The carousel page would also have a skip button allowing the user to bypass the tutorial if they are already familiar with the app.

[bricefriha]

Alright, seems nice!
I can work on it if you want

[brminnick]

That'd be amazing! Thank you so much!!!

I'll assign this issue to you 🙌

[bricefriha]

Perfect!
I'm working on it!
By the way, do you have a deadline for this issue?

[brminnick]

Thanks! No hard deadlines. I'm grateful for the assistance 💯

[bricefriha]

Great !! 😃

[Pujolsluis]

Hey @bricefriha !

Thanks for helping out :D, I'm currently also helping out with some proposals for the redesign of the UI in the app, so wanted to add you in the loop and see what is your progress with the onboarding experience so far, so we can merge ideas and collab💪

[bricefriha]

@Pujolsluis Yes it's great! That's my first experience on a open source project but I like this. I'm quite busy these days, though, but I'd like to contribute further! 😃

[Pujolsluis]

Ohh got it! @bricefriha looking forward to your contributions. in that case I'll try and take a stab at it since I got some free time today, and upload my proposals here 😃

[brminnick]

Thanks Luis!

@bricefriha I'd love to keep you on to help us review and critique it too!

Update
I just recently added Notifications, and I'd like to add that to the First-Run Dialog too.

Here's what I'm thinking now, and still totally flexible to tweaking everything, including the text:

• 1st Carousel View: Introduce GitTrends

Welcome to GitTrends

GitTrends helps you to monitor your GitHub Repos:
✅ Connect to GitHub
✅ Monitor GitHub Repo Views
✅ Monitor GitHub Repo Clones
✅ Discover Referring Sites

• 2nd Carousel View: Explain how to use the charts
  • GIF of a chart
    • Show a user long pressing to reveal numeric values
    • Show a user zooming in/out
• 3rd Carousel View: Enable Notifications

Enable Push Notifications

GitTrends will notify you when your GitHub repositories are receiving more traffic than usual. Tap here to be notified about trending repos.

[ Enable Push Notifications Button]

• 4th Carousel View: Get Started

Get Started

Get started by connecting with GitHub
[Connect to GitHub Button]

(smaller, lighter font) Not ready to connect to GitHub just yet? That's ok! Get started using the Demo
[Demo Mode Button]

[bricefriha]

Alright, I already began making the carousel view I just have to update the content now and add the connection button . 🙂
Do you have a gif for the notifications' feature?

[brminnick]

Nice! Let's lock down the design first and then we'll know the height & width dimensions for making the GIF.

@bricefriha & @Pujolsluis - when you get a chance, upload your designs here so we can all check them out!

[bricefriha]

Here's what I have so far:

• 1st Carousel View: Introduce GitTrends

• 2nd Carousel View: Explain how to use the charts

(sorry I don't know how to reduce the screenshots size...)

I'm working on the rest 😉

[Pujolsluis]

Great job @bricefriha !

We loved the idea of customizing the bullet points and the copy you generated for each 👌 , I also got to finish my proposals for the app, I'll publish all the designs more detailed but here are the onboarding ones. any feedback is well received to keep improving it together. I love that we had similar ideas for the first 2 boards haha.

PD: Took your copy and added it in 👍, 2nd board placeholder will have the gif @brminnick mentioned.

[bricefriha]

@Pujolsluis Great I love your little pictures on the lasts 2 ! make me think of Microsoft Teams welcome page it's sweat!
Your design skills are way better of course 😅
Though, that would be cool to put two gifs in the second page, one with the "tap to display the numbers" and another one for the zoom in/out.

By the way, If you're working on the UI enhancement, I believe this would be a good idea to merge this issue with the issue concerning the UI. Because I think that the welcome page is mostly part of it

What do you think guys? 🙂

[Pujolsluis]

Thanks! I'm glad you liked it @bricefriha , my hack to designing is using a design guideline like material design in this case 😋. check it out when you have the time.

Yup that's a good idea to add 2 gifs on just one with the succession of the actions🤔, we got to test which one works better hehe.

I think there is no main issue with UI/UX enhancement, but it is a good idea to have a starting point issue maybe @brminnick can organize that for us 💪 .

[bricefriha]

@Pujolsluis Thanks for recommending your design guidelines.

Yeah let's test if putting 2 gifs looks OK or not 😁

[brminnick]

Nice!

For the GIF, we should be able to use one looping GIF that first shows zooming in, then zooming out, then long-pressing to see the values, and loops back to the beginning.

I'll make the GIF on that once I've updated the UI with @Pujolsluis awesome new designs in #28.

[Pujolsluis]

Hey @bricefriha , just uploaded the rest of the redesigns, in issue #42 you can go check it out and give us your feedback and ideas 👍