Hey @a2batic ,
I agree with you. The current landing page isn't appealing.
Bottom tabs is a good idea. I conducted a survey to ask people which fedora app do they use or would they use most. Most of the responses were in favour of fedora magazine. So we can have the opening tab of fedora magazine.

I conducted a survey to ask people which fedora app do they use or would they use most. Most of the responses were in favour of fedora magazine.

@shilpi1958 Hey that looks really interesting! Can you share the questionnaire, profile of the audience and the final results here so that everyone can gain some insights?

@a2batic

Here's a quick wireframe I came up with:

The idea is to use the first screen to provide a summary of important things happening in the community so that the user can catch up with them. For more feature focussed users, there's one tap option to access the Ask/Social/Mag. Need to decide upon the order in which the different options show up in the tabs.

@thelittlewonder
Can you tell me a little more about the idea of first screen?
I will upload my survey once I reach about 40 responses. Rightnow i have about 25. The audience are my co-workers,
Proficient devlopers and designers and also freshman who have just started working with me.

@shilpi1958

@shilpi1958

I will upload my survey once I reach about 40 responses. Rightnow i have about 25. The audience are my co-workers,
Proficient devlopers and designers and also freshman who have just started working with me.

Sorry, but shouldn't we be thinking from the perspective of people we are actually designing for i.e the fedora users rather than your coworkers who might/might not be regular fedora users. I don't know to how much extent will the findings be helpful for the application development if the participating audience is not targetted.

Can you tell me a little more about the idea of first screen?

Sure. The idea is to use the opening screen to provide a visual summary of important things happening in the community so that the user can catch up with them at a glance.
For more feature focussed users, there's one tap option to access the Ask/Social/Mag. Since different users will have different priorities (some might use only QA others just Mag) I don't see a point in imposing a particular tab on the front page of app if the user doesn't find it relevant according to his needs. Golden rule, let the users decide. Hence the design.
That being said, I'd love to know your thoughts and if you have any suggestions. Completely open to healthy discussion.

@thelittlewonder
I divided my user base into 3 catagories and made sure people from all those have responded to the form. I have made sure to reach the potential user base. Most of my coworkers are proficient devlopers using fedora and ubuntu.

Regarding the opening screen, fedora is planning to include other platforms too. We already have to keep space for them in the bottom bar. Another "opening screen" doesn't feel useful to me.
Your point where you say about imposing a particuler tab does make sense.
Lets try and comeup with something that solves both issues.

I divided my user base into 3 catagories and made sure people from all those have responded to the form. I have made sure to reach the potential user base. Most of my coworkers are proficient devlopers using fedora and ubuntu.

Okay. But I still think using Fedora Dev Mailing list would provide us with better insights.

Regarding the opening screen, fedora is planning to include other platforms too. We already have to keep space for them in the bottom bar. Another "opening screen" doesn't feel useful to me.
Your point where you say about imposing a particuler tab does make sense.
Lets try and comeup with something that solves both issues.

I'm not sure what do you mean by "platform" here. But if you mean other categories like "Women" etc. that can be incorporated easily by clubbing similar types of content in a group, the same way PhonePe and Paytm Mobile App does.

Okay. But I still think using Fedora Dev Mailing list would provide us with better insights.

@thelittlewonder
if we use fedora dev mailing lists what about the people who want to switch to fedora or freshman who are exploring the best OS for them, thus missing out 2/3 of the user base We also have to consider the fact that we have to expand our community.

clubbing similar types of content in a group, the same way PhonePe and Paytm Mobile App does.

I didn't get what do you mean by clubbing the groups.

people who want to switch to fedora

People who want to switch to fedora won't be looking for upcoming events (calendar) or fedora social media posts(Social). Point being, fedora community app may not be the best place for newbies to get started.

I didn't get what do you mean by clubbing the groups.

Grouping similar kinds of use case under one tab.

People who want to switch to fedora won't be looking for upcoming events (calendar) or fedora social media posts(Social). Point being, fedora community app may not be the best place for newbies to get started.

My research showed the most used among the four are Magazine and ask fedora (getting a notification about a question i asked) which are useful to newbies and the ones who are switching and potential contributors like us.

Just my $0.02,

An alternate way of representing the tabs is the 5 + 1 approach shown in Facebook app, for example, the bottom 5 are the main sections and the rightmost item is a hamburger that opens a sliding menu. This will replace the current sidebar.

@thelittlewonder +1 for your design, can you share your sketch file?

@amitosh

An alternate way of representing the tabs is the 5 + 1 approach shown in Facebook app, for example, the bottom 5 are the main sections and the rightmost item is a hamburger that opens a sliding menu. This will replace the current sidebar.

Makes sense. We'll need to spend some time to decide what features do we want to show up front and what to hide behind menus.

+1 for your design, can you share your sketch file?

Here you go https://drive.google.com/file/d/1DQWucZE-tkq4bPLDhJE_e6bMIDboDfFI/view?usp=sharing

@amitosh @thelittlewonder
I have observed developers are a curious bunch :). we can have the opening screen to have some quotes or some interesting fact this connecting emotionally with the user and improving the emotional design.
I already thought to include notification in each of the apps to tell whats going on in the community. this way we can give more information without increasing screens.
Do we need hamburger menu right now? well hamburger menu go against the principle of visibility . if it can be avoided then we must.

we can have the opening screen to have some quotes or some interesting fact this connecting emotionally with the user and improving the emotional design.

Not quite sure what you mean by that. :confused: Do you want to say we show quotes on the main home page of the app or the loading screens? Loading Screens might be a good use case rather than the main homepage. We need to accommodate plenty of information on the home page, so adding quotes in the name of Emotional Design won't help our case in my opinion. That being said, I'd love to hear your thoughts if you want to imply something else or have a better rationale. :100:

I already thought to include notification in each of the apps to tell whats going on in the community. this way we can give more information without increasing screens.

Not quite in favor of notifications for an app with a use case like this. Calendar Events to which a user has subscribed? Yes. But that should be it, in my opinion. We should not appear like e-commerce apps say, Myntra who spams your notification bar 24x7 for the things they want to sell.

Do we need hamburger menu right now?

It was never there in the first place, that's why we are using tabs.

@thelittlewonder, +1 for your thoughts behind the design. I have some doubts though:-

1. What about FAS login ?
2. Women section ?
3. Podcast ? (Optional)
4. Notifications ?

How are you planning to fit it in your wireframes ?

@thelittlewonder
I was referring to the hamburger menu amitosh mentioned .
instead of homescreen with notifications i was suggesting something like quotes or some facts about fedora

@a2batic here is what I made
there is a bottom tab. We can book mark articles. any activity on them will be a notification. the ham will have features like write an article , shared articles etc

https://pagure.io/Fedora-app/issue/raw/files/20f82dd693e8b0f060655c8651d229c95895d6ed44c9b80b286aa6756772a276-magazine-01.jpg

@thelittlewonder
here is what a meant by a homescreen we can have in the name of improving emotional design. The users have an option now to select the app they want too.

@a2batic what do you think?

• What about FAS login ?

FAS login will be before entering the home screen, You can log out and access settings + notification by clicking the user icon(That design pattern is used in the Twitter mobile app)

Women section ?

What exactly goes in that section? I can better comment once I know what kind of information will we be showing there.

Podcast ? (Optional)

The most recent podcast can be shown upfront, clicking will which lead to the podcast page. Another way to access the podcast page can be Social. We can nest the page somewhere in social tab.

Notifications ?

Tab wise notification can be shown (red dot) on the tab icons. The account wise notification can be done on the account icon.

Let me know what do you think and we can improve it further

@shilpi1958

here is what a meant by a homescreen we can have in the name of improving emotional design. The users have an option now to select the app they want too.

Can you label the icons on the tab, I can't make much sense of this at the moment.

the ham will have features like write an article , shared articles etc

Different options in the hamburger menu for different tabs?

Different options in the hamburger menu for different tabs?
yes

@a2batic I have covered this issue in #27
Can you assign me the issue here?

After going through the comments, and issue #1 the whole point is to reduce the cognitive load on the users. If we are upfront showing so many tabs (which exceeds iOS and android guidelines), we are simply creating load on the users. Preferable we should only show trending articles or social updates, with a banner space on top for commercial or ad-hoc purposes. Rest can be handled through a hamberger. You can view a detailed landing analysis on #27 . :)

Analysis (Research)

Before venturing into the problem statements, I had some critical questions I needed answers for. It is sometimes a tricky business while framing questions for audience. Often times, researchers would frame questions to get an answer to validate their theory. However, on the contrary questions should be very open ended so that multiple views can emerge out of it and can shed light to newer problems as well.

• Why and who would want to use the mobile app of fedora?
• What purpose does the app aims to solve for you?
• What OS do you use for your work?

Understanding your audience is the first step in determining the design consequences. Since Fedora is an OS, I decided to aim for two different kind of audience: students and professionals.

I conducted F2F interviews with them, and following are the results of the research:

Professionals:
60% tend to use Linux, and 40% tend to use Fedora.
When I viewed them the fedora mobile app, they were particularly fascinated with the "ask" feature, and would like such updates from their respective OS.

Students (Technical background)
90% of students prefer Linux for their coding purposes. The primary reason for so, is that they can customise their OS as per their requirements which neither windows or mac enables them to.

This was however to understand the product better, but its implications on my upcoming section led me to define certain criterias for design:
the design should be simple yet very informative;
users are looking for upfront content and delivery of information is primary task
colours were distracting in the current app, and subtle colours would be appreciated

Keeping all this in mind, I framed the problem statements and concluded with their solutions.

Landing Screen

Background

The landing has been simply made consistent with four different parts: Magazine, Social, Ask, Calendar. There's a hamburger button on the top left, which provides with: Home; Magazine, Social, Ask, Calendar; Women

Problem Statement :1:

User Experience

Upon closer look, the hamburger faces two challenges:
1. It's not visible. (Due to its dark colour over a dark background: blue shade)
2. Out of six elements, four are already present on the home screen and can be unnecessary.
3. The "home" element, redirects to a screen which we are already on.

Although the hamburger fails to solve usability on home screen itself (due to inconsistent UX), it is quite useful to navigate on the rest of the mobile app.

Problem Statement :2:

User Experience

The home screen as of now, appears like an on-boarding screen. The segregation of screen into four parts somehow restricts the user's mind that he's stuck on the screen, and the low visibility of the menu icons hampers this problem further.

Problem Statement :3:

User Experience & User Interface

Simply putting the icon on the centre doesn't signify the brand value of Fedora. A good typographic message could have more impact as compared to an icon, which might not be known across to all the users.

Problem Statement :4:

User Interface

The four colours are not forming a harmonious colour palette and mapping the colours with their icons or category doesn't create a better understanding of each product.

Research:

To understand further and validate my thoughts, I conducted a one on one meetings with ten different users who were first time users on the app. I asked the following questions:
1. What was your primary CTA upon first arrival on app?
2. On scale of 5 (5: being most visible), how much was the icon of menu visible to you?

You can view the results here.

1. Upon first time arrival:
2. 20% users clicked on the Fedora brand icon itself.
3. 40% users clicked on the Magazine. (this could be due to the fact that Magazine is listed as first item; for left sided readers)
4. 30% users clicked on the Social.

5. 10% users accessed Menu.

6. Although this was a small survey, it helped me to conclude my assumptions that approximately 60% of the users had mild difficulty in accessing "menu" despite it being upfront on the screen. It could have been due to its: size, colour, and location.

Problem Statement :5:

User Interface
Inconsistent icons

We can use consistent icons for Fedora magazine, social, ask and calendar. As of now, in some of the cases, full text ‘Fedora’ is used while in others only the logo is used. Consistent design is intuitive design. I think usability and learnability can improve when similar elements have consistent look. I made some sketches for the icons but did not know where to share em.

Icons can be adopted from a set of standard library. In this case, I've tried to use Material Icons by Google.

Solution :1-4:

I've redesigned the complete landing/home screen to enhance the user experience and the interface as well. You can view the design process in the following:

1. Wire-framing (Low Fidelity)

Approach-1

Approach-2

The aim is to reduce cognitive load on users upon their first arrival on app.
I decided to pick the second approach since it gives you a news feed on your arrival to the app. Also, it gives Fedora real estate area to advertise for upcoming events or any new feature.
Mobile design faces challenges related to real estate area, and the ability to provide concise information in a screen.

According to the second approach, the screen can be primarily divided into three areas:
- Top Nav; containing the Fedora logo and Menu
- Block of space for other purposes
- Recent news

1. Branding elements

2. Colours:

Colour Palette:

Primary Color: #3b6eb3
Primary Light Colour: #719ce5
Primary Dark Colour: #004483
Primary Text Colour: #ffffff

• Icons: Material Library
  Source

• Typography:
  Font-family: Open Sans; got this reference from Fedora's main website which uses Open Sans as its primary font family.

(All the branding elements are chosen from open source libraries.)

1. Finished UI

Key pointers:
Always use real data. Do not put dummy text as it cannot build the context. Keep iterating, and always store your iterations to view your complete journey. I made two iterations: with material card, sans material card; keeping the material guidelines, I decided to pick up the card concept.

Also, calendar card has the following elements:
Title; Author, date; Content; Read, Share
It has the read/unread feature (bold/regular typography and colour differentiation.)

Mobile design rules:
Font size 14pt, 12pt, 10pt (category heading, content heading & content; author, date, CTAs)
Due to real estate limitations, it is important to optimise font sizes and spaces to accomodate maximum in one glance, and that’s the crux of mobile design.
Font sizes can go down to 10 pts, and spaces between elements to as low as 2 pts.

Final user journey

@a2batic covered all the analysis and solutions here.

Also, the problem we might face due to tabs is that it creates a limitations to introduce new features in the app. We are restricted to horizontal width of the mobile screen; and therefore for future expansion scope it might prove inconsistent. As of now we have six tabs (Magazine, Social, Ask, Calendar, Women and Home itself). Even right now it can be a bit difficult to accommodate everything.

Your views @a2batic?

I was also reading the Fedora's Mission and it's user base. After going through the mission, I feel the colours are important to signify the values what Fedora considers important.
I'll try to incorporate the colours into landing screen keeping the blue tone of app alive.

@wildflower, +1, great analysis points. Its good to go with shades or blue instead of colorful design.

What about FAS login ?

FAS login will be before entering the home screen, You can log out and access settings + notification by clicking the user icon(That design pattern is used in the Twitter mobile app)

+1

Women section ?

What exactly goes in that section? I can better comment once I know what kind of information will we be showing there.

It will concentrate on Fedora Women updates, we can discuss on this on a different issue.

Podcast ? (Optional)

The most recent podcast can be shown upfront, clicking will which lead to the podcast page. Another way to access the podcast page can be Social. We can nest the page somewhere in social tab.

+1, we can add this in social section.

Notifications ?

Tab wise notification can be shown (red dot) on the tab icons. The account wise notification can be done on the account icon.

+1

Let me know what do you think and we can improve it further

What about FAS login ? Notifications ?

Since it's an information oriented app (for eg, like medium), we can allow the user to navigate without login. But let's keep certain features live only when she's logged in. Once she is logged in, notifications can then become a part of her usual navigation.

something on these lines: https://dribbble.com/shots/876515-Search-for-friends-list/attachments/94290

Notification specific to the category would make much more sense, since the user would not prefer viewing every category contents.

Source

@wildflower, +1, great analysis points. Its good to go with shades or blue instead of colorful design.

Thanks!

Flow of the landing, magazine, social and calendar:

Based on the Notifications feedback by @wildflower, I came up with an altogether different design pattern for the app. Thanks @wildflower :-)

The Complete design is available at https://pagure.io/Fedora-app/issue/1

I have tried to solve all the major problems discussed here. But still if someone has some constructive feedback to share, I would be really grateful.

@a2batic What do you think?

Here's a new landing concept. I have taken into consideration inputs from my research and @thelittlewonder inputs, and ideated it to remove all the break points in the UX. Thanks everyone for their inputs here. I have tried to primarily fix the navigation flow, and content hierarchy flow. Having multiple navigations on landing, and one of them disappearing after scrolling down can result in breakpoints, especially if they belong to categories.

The landing consists of 5 parts:
1. Single Navigation and top tabs
There needs to 4 tabs permanent on each screen which are the categories. They should be accessible on all parts of app, and not disappear if I venture into other parts of app. As of now there are 5 tabs:
- Home
- Editorial (Contains magazine articles, add article feature)
- News (Contains all social as well as news articles)
- Q&A
- Events (Similar to calendar)
Notification: To notify incase someone answered a query, the article got published, etc
User Profile: To update bio, update social media links, to view activity of the user

1. Banner space to advertise, showcase about any event etc.
2. Upcoming events and link to all events
3. Editorial and link to all articles
4. Q&A banner: Post scrolling down, if there's something user cannot find or have a query. Instead of showing trending questions, which might not be even why the user is on the app, it is advisable to show a link to Q&A part.

You can view rest of the flow on #1

@thelittlewonder @wildflower, Thanks, I have added my views on issue#1.