Wireframe / design profile

[rnystrom]

No description provided.

[Huddie]

I am not a graphic designer but maybe these can get the discussion sparked here. I tried to show a possible slow progression of a concept.

[Huddie]

I'll also point out. I don't really like that bookmarks are the center icon on the tabbar. For some reason I feel it should be profile or inbox. But I wasn't really focused on that

[BrianLitwin]

🔥🔥🔥@Huddie !

[BrianLitwin]

Including the following images here for quick reference against some of GitHub's current designs. It would be cool to find some fresh sources of inspiration beyond GitHub.

---

---------------------------------------------------------------------------------------------------

---------------------------------------------------------------------------------------------------

---------------------------------------------------------------------------------------------------

---------------------------------------------------------------------------------------------------

[Huddie]

@BrianLitwin I very much agree. I think the Github profile is great for web but cannot be well replicated in mobile. We should look for inspiration outside but try to maintain a familiar interface. I tried to keep the page pretty simple to start. I know it can be built out better later.

[rnystrom]

Like the directions! I think we should start with what our information hierarchy should be before going too deep. There's so many things that could exist on the profile!

• Avatar
• Username
• Display name
• Bio, location, links
• Organizations
• Pinned repos
• Repos
• Followers, following
• Stars
• Activity

Then there are actions to take:

• Follow, unfollow
• Share
• Block, report

Brainstorm

Brainstorming a bit, we can slice this into buckets ranked by priority:

1. Who?
   a. Personal identity
   1. Avatar
   2. Username, display name
   3. Bio
   4. Location, employer, links
   5. Stars
      b. Network identity
   6. Followers
   7. Following
   8. Repositories
2. What do they do?
   a. Organizations
3. What have they been doing?
   a. Pinned Repos
   b. Activity

Inspiration

Pulling a few images from Dribbble that drew me in:

[rnystrom]

Here's a starter sketch file I whipped up on the flight home yesterday. We should stick to the white background style that we're now using on Issues.

[BrianLitwin]

Awesome stuff! I am awfully 😍😍😍 for that centered-profile pic, circular frame.. uncluttered, elegant, placid. EG in Huddie's design in #2127 or in Antony Marshal above.

[Huddie]

Working off @rnystrom sketch file. Merging in some of my original thoughts. @BrianLitwin I'm not going to repost my old design as I'm pretty happy with this one taking its place.

[rnystrom]

This weekend I started putting together a templated Sketch doc to make wireframing easier. Has colors, text, and icons in shareable components: app.zip

It's not totally complete, but flagging as it might help w/ some of the design language.

cc @cieslakdawid

---

@Huddie some immediate thoughts:

• I'm not a fan of the centered-profile design b/c it wont scale well for iPad w/out massively unused whitespace. I'm all about breathing room, but I think it'll be overboard when scaled up.
• The button designs aren't consistent w/ the rest of the app:
  • Multiple bold/contrasted buttons: why do "Following" and "recent" have the same weight?
  • "Following" should be "Unfollow" (same as GitHub.com)
  • I'll admit the app doesn't have a totally consistent button design either. Should be another template we add in the Sketch file and make everything consistent! Harkens back to the gradient discussion (maybe we go full-gradient buttons like all of GitHub...)
• Do we need form titles for everything? e.g. "bio" probably unecessary
• I want to get rid of having the user handle in the view and just make that the nav item title

We should boil down what the 1.0 of profile on GitHawk should do.

What are the most common actions one takes when viewing someone's GitHub profile? For me, I check where they work, find their website/contact info, or see how "notable" they are (followers, big projects they own)

Once we do this, we can focus on only the features that satisfy only those actions and ignore the others for later on. Otherwise we're going to add a lot of complicated features that aren't a priority (e.g. contribution activity).

[Huddie]

@rnystrom

• iPad design
  I think on iPhone the centered look is nice. I see what you mean that iPad could seem very open. I've never tried GitHawk on iPad but are layouts always the same? I'd suggest that on iPad the name and handle (or whatever we replace it with) become horizontally rather than vertically stacked

• Button consistency
  I really was trying to give a rough sketch, I'm sure there are plenty of inconsistency ATM but I'll touch it up if we go along this path.

• Form titles
  Sections above the "Following" button don't have titles. I don't think it looks great if some sections below have and some don't, trying to keep consistent. I could move the bio above the line but I feel it fits better below.

• Removing handle in view
  Sure I can move it out of view. I can replace it with location/email

• Most common actions
  I agree there are probably some common ones. I think pinned repos + org. show their notable work. The activity allows you to see what they are currently up to. I think to follow/unfollow is essential along with name + handle and bio and I think quick links to repo/following and followers is appropriate rather than having them actually displayed in the main view.

• Website and Contact
  I feel these could be found in an Action Controller or something. I tried to keep the main view populated with things that every GitHub user has. (Organizations and Bio are exceptions). We could always add them in though.

We could remove contribution activity but it happens to be on the profile page for github mobile and github web. I personally like it but I can see that it isn't necessary V1.

Let me know your thoughts.

[rnystrom]

I’d rather keep layout consistent and responsive than make device specific layouts. Too hard to manage and test. Atm devices are all laid out the same, barring the split view collapse and expansion.

_{Sent with GitHawk}

[Huddie]

Okay so shift the name and (soon to be added) location + email to horizontal?

[Huddie]

Updated.

[cieslakdawid]

I almost missed such a great stuff here <3

@rnystrom Do you have a plan to work more on the sketch for wireframes before the weekend?
I underestimated my week and I'm running a bit off the schedule with the starter pack, but this Friday I'm back in life(xCode + Sketch ;) ) and want to finish in 2/3 days. To avoid duplication, I'll just post the state of work before starting on Friday.

[BrianLitwin]

I think one consideration is that if we're going to have tabs down the road for Repos and Starred Repos, as in Sherlouk's design, the current "Repos/Followers/Following" UI would require a significant re-design as it is now:

Not trying to look ahead too much, but the more prominent that UI is in our 1.0, the trickier it will be to de-couple later on.

Would also like to note, unless the Repos and Starred Repos tab are meant to look different from the Search Repos ViewController we currently use, we can reuse SearchRepoResult + SearchRepoResultSectionController, which makes those tabs very easy to build. See this view controller, which can be used for both Repos and Starred.

I don't see a great reason to spend time building links to a GitHub web view when we already have so much of the architecture to display them natively already in place.

[Huddie]

I think the Repo/Followers/Following buttons should take you to a new view rather than have them as tabs. And the new view should be native for sure.

[Sherlouk]

Just saying that this all looks beautiful and is far better than my envelope drawing 😂

[Huddie]

@Sherlouk You got it started. Gotta start somewhere. Thank you

_{Sent with GitHawk}

[rnystrom]

@cieslakdawid not really, pretty slammed the next two weeks then going out of town.

_{Sent with GitHawk}

[Huddie]

Any thought on finishing up this design so @BrianLitwin can tweak his profile branch? @rnystrom Any suggestions for improvement on the last design render above?

[BrianLitwin]

@Huddie lemme make a Sketch prototype of @Sherlouk 's original design from #317 so that we can put that into the discussion. I'll do that in the next few days.

[Huddie]

Sure sounds good. 👌🏻

_{Sent with GitHawk}

[BrianLitwin]

Still not a Sketch pro so the best I can do is a screenshot for now:

[Huddie]

@BrianLitwin looks good to me

_{Sent with GitHawk}

[rnystrom]

@BrianLitwin I really dig it!!

[BrianLitwin]

@kocheck don't feel constrained by any of the designs on this thread; there's no consensus that I know of. If you have other ideas, feel free to share them.

[kocheck]

Roger that! I wanted to try and take a good crack at it this weekend thanks!

[Huddie]

Looking forward to the design! Sounds cool

_{Sent with GitHawk}

[kocheck]

Hey, Folks 👋 Found some time to jump into the design file this morning. How do ya'll feel about this direction? Any comments or feedback?

Design Overview 1

The closest to the last posted designs.

Updates

• ViewController Tab is moved down to provide a little more hierarchy.
• Included a version with (aprox) max character count for the bio.
• Moved the Follow and Share actions into an Action Sheet triggered via the Menu icon in the Navbar

Short Bio	Long Bio	iPhone SE

Design Overview 2

This design steps out just a little further. If ya'll want me to keep going and head overboard let me know 😄

Updates

• ViewController Tab is moved down to provide a little more hierarchy.
• Included (aprox) max character count for the bio.
  • Moved bio to be inside the table view.
• Did a quick pass at Profile Stats
  • Repos
  • Followers
  • Following
• Added Follow/unFollow button
• Moved the Follow and Share actions into an Action Sheet triggered via menu icon next to follow button

Unfollow	Follow	iPhone SE

Still Designing / Next Steps

• I would like to explore a version where the pinned Repos are contained within a box. Like in this comment that @Huddie created. I rather like that.
• pulse activity for the user *
• pulse activity for repository *
• Expanded states. for items in the table view
• Repos (tab)
• Stars (tab)
• ActionSheet

Unknowns

• I am making an assumption Githawk supports iPhone SE with the auto layout tool, from the conversation above 👆talking about iPad support.

• I am also making a few Design assumptions here and there let me know if you spot anything drastically horrendous.

• * for the pulse activity, I have a stupid question. Would Githawk display these items just like Github or would this be more custom?

[BrianLitwin]

Feel free to keep exploring @kocheck but I really ❤️ Design 2.

In particular I'm glad you were able to put repo/followers/following in a prominent spot. Ryan mentioned those info's are high priority when he scans profiles.

I like the tabs under the Header section. What do others think?

[Huddie]

Totally agree moving down the tabbar looks much better +1

For second design:

• Follow/Unfollow I feel is a 1 maybe 2 time action. It seems to take up a big part of the top view and probably will never change for most people once clicked.
• Repos seem to come up twice (tab and in the top part)
• I personally think the bio is attached to name, location etc and should no be in the lower section when the others are in the top section.

I like both for the most part. I think design 1 short bio is a good place to start and design 2 can be a more fleshed our second version

_{Sent with GitHawk}

[rnystrom]

@kocheck yo that looks SO GOOD! Love moving the bar down, very clean!

@Huddie @BrianLitwin playing devil's advocate w/ myself, maybe the following/etc count shouldn't be so prominent (like option 1) since GitHub is about doing work and less about who's-who. But I think it's a useful metric for like "social capital" when meeting new people.

I also really love the idea of moving the Follow into the action sheet. Remove the social aspects and keep it focused on "who is this person and what work do they do" vs social networking.

I know I'm kind of churning myself here, but once I saw design 1 and compared it w/ 2, I felt like 2 is too much Twitter/Instagram and less work.

Thoughts?

[flovilmart]

I also lean towards the professional aspect of 1 vs the social emphasis of 2 as @rnystrom.

[jdisho]

I am more for the 1st option 😄. It points more “important” information regarding who is this person and what is doing, rather than social networking (2nd one looks like Insta).
Additionally, I would suggest to leave the bio out and make more space for the pager info.
Also, I would have switched places between name/username and location/company/website. For me is more intuitive to see the name/username in the right side of the profile photo. (like the version that @BrianLitwin suggested above) 😊

_{Sent with GitHawk}

[kocheck]

Thanks for the great feedback! I will work on some comps reflecting the feedback above.

@jdisho I had switched the Name/username with Location/company/website etc to help with longer names. I can do some research and swap the fields. See if I can make an edge case look good in that spot 😄

_{Sent with GitHawk}

[kocheck]

Quick update

Still Moving stuff around, Thought I would share the worse edge case I am running into. A user with max 39 Character name, and the max bio copy on an iPhone SE. 😆

[rnystrom]

@kocheck so cool that you’re spinning through all these edge cases!

_{Sent with GitHawk}

[j-f1]

Could the entire screen scroll so the tabs become a fixed header when you scroll far enough? That would mean the entire bio would be visible on all tabs and that the entire screen can be filled with repos if needed.

[kocheck]

@j-f1 That's what I am thinking. 👍

I might swape the Name/Username with the Location, company, and contact info again. Take advantage of the screen height.

[kocheck]

Traveling for the holidays, and Had an idea while in the car yesterday. Mocked it up really quick this morning. How do ya'll feel about moving the profile over to the right?

• The Info can flow down, as the user adds or removes more.
• On iPad, would it cause issues to make the profile image bigger? Help fill that empty space on the right.

---

[rnystrom]

@kocheck I think that looks fantastic. Love the icon on the right. Makes the whole interface very legible.

_{Sent with GitHawk}

[ijm8710]

This is awesome! Revisiting kochecks question the other week, I think he asked about pulse activity sharing how github does it or appearing more custom, not sure if that was ever answered which way the team was leaning and curious myself...

Kocheck, would you envision activity being either below pinned, or as a fourth tab, or even as an overflow option? Unlike followers which you guys realized was ultimately not a pivotal view, to me at least, activity is the most important view on a profile.

[kocheck]

@ijm8710 I still need to look through the GitHub docs but if we can display that data I would love to drop it at the top of the Overview Tab. 👍

If we feel good about this as a solution, what would the best way to ship, or submit it to ya'll? A Zeplin project, or should I do a Pull request to the design repo with the updated sketch file?

_{Sent with GitHawk}

[jdisho]

Slick 🤩!!! @kocheck

[j-f1]

@kocheck api.github.com/users/:user/events

[rnystrom]

@kocheck PR to design repo would be 👌

_{Sent with GitHawk}

[tigpt]

None of the images on this thread are up. Anyone have them and can upload them as a GitHub attachment?

[kocheck]

Designs were merged into the master sketch file I believe @tigpt

https://github.com/GitHawkApp/Design-Resources

[kocheck]

@tigpt Let me know if you need/want a different file type and I can export that out for you.

[tigpt]

Designs were merged into the master sketch file I believe @tigpt

https://github.com/GitHawkApp/Design-Resources

And images are now loading, looks like it was a network problem on my side and I assumed wrongly that they are offline.

Thanks for pointing out to Design repo.

[Huddie]

New designs coming? Excited!