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