I am in my second week and I am still getting used to using inkscape. I recently found out that inkscape has many functionalities that photoshop does not have. This was especially useful in case of importing and exporting images by directing selecting the required image or drawing. I found out that it is really useful feature that Adobe generally allows it by exporting the entire document. As I am starting to use it more and more, I figured inkscape to better and faster for vector graphics.

Another thing I worked on this week was Jekyll, I finally figured a way to upload my images and mockups. For starters Jekyll is a blog aware static website generator which allows users to share and post their material online. I am finding it very easy to use as compared to WordPress or any other blogging websites available online. Further, it has also allowed to me practice using the Linux command line. I am becoming better and faster at it each day. Thankfully due to the number of mistakes I have committed so far.

Well as for the rest, I also attended the lunch and learn session which is organized by redhat weekly. It gives us the chance to post and ask questions about redhat in general. I attended the Arun Oberoi session this week as he talked about how useful is to make mistakes. I remember in my initial days I was feeling under the weather about how many silly mistakes I had been making so far. His speech emphasized on how important is make mistakes and quickly learn and improve. This actually proved to be a really useful suggestion and I intend to apply that to my internship.

As for the tickets I worked on this week included the PlusPLus widget (https://pagure.io/fedora-hubs/issue/57). I found this to be a really interesting widget to work on, as it involved designing an experience similar to the one in IRC (without really using the IRC integration).

Brainstorming

I brainstormed and sketched before the final mock up (which is posted here). I analyzed the pros and cons of each use-case that I had explored. After the initial brainstorming session, I quickly read up on how the widget will work under the hood. Currently the data for the ++ in IRC is stored in a python shelve file. The way it is written it is not suitable to be shared between the zodbot and the hubs page. So designing this widget might require a total rework of the zodbot plugin. Keeping this constraint in mind, I sketched some mockups for the widget.

Target Audience

As a first step to the design process, I understood the target audience for the hubs as someone who contributes to the open source community and wants to keep abreast of the all major happenings inside the community.The idea is to update the user about the various development likes events, meetings etc happening throughout the hubs. One simple idea would be through the personal calendar widget.
Paper mockups

Paper Mockups

I sketched some ideas for the widget and the designs for the symbol “++”

Final Design

Exploring all the use cases in general, I prototyped the final mockups in inkscape.

Profile page 1

Profile page 2

Subscriber’s page

  1. The user profile will a ++ icon next to the picture which would allow any subscriber to give the ++ to the user. I thought this would be easy for the subscriber to find the particular icon since the ++ needs to be given to the user and not the action

  2. Once the subscriber gives a ++ to someone the icon then grays out. This is designed keeping in the mind the karma cycle, the icon becomes available after 6 months.

  3. Another use case that I can think of is what if the subscriber wanted to know the karma cycle of any user he/she is subscribed to ?. For this purpose, I kept a text field entry for the user’s page, Through which they can check their own and their subscriber’s current karma by using the IRC command karma username. (karma ryan). However this widget can be only accessible to the owner of that page.

  4. The subscriber page will have a karma notification in the stream. Whereas for the owner’s page, the stream will indicate the current karma for that user.

  5. I followed the same color scheme as per the fedora design guidelines and the font used is open sans.

  6. Lastly, I have designed the widget keeping in mind the mobile responsiveness.

Moving on, I do have some improvements that I can think of in this design

  1. The name of the widget can be changed to something better ( instead of plus plus )

  2. The ++ icon can be designed more effectively.

  3. Need to think more in terms of where the widget could be placed more strategically, one way that I can think of is by applying the fitt’s law.

Design guidelines

I followed the standard design guidelines for font and color palette for fedora.