UX: show user name and title on about page

app/assets/javascripts/discourse/templates/components/user-small.hbs

@@ -1,7 +1,9 @@
-{{#link-to 'user' user.username}}
-  {{avatar user imageSize="tiny"}}
-  {{user.username}}
-  {{#if user.name}}
-    ({{user.name}})
-  {{/if}}
-{{/link-to}}
+<div class="user-image">
+  {{#link-to 'user' user.username}}{{avatar user imageSize="large"}}{{/link-to}}
+</div>
+
+<div class="user-detail">
+  <span class="username">{{#link-to 'user' user.username}}{{user.username}}{{/link-to}}</span>
+  <span class="name">{{user.name}}</span>
+  <span class="title">{{user.title}}</span>
+</div>

app/assets/stylesheets/common/base/about.scss

@@ -6,13 +6,43 @@ section.about {
   }
 
   .user-small {
-    padding: 5px;
-    width: 200px;
+    padding: 8px;
+    width: 205px;
+    height: 60px;
     float: left;
 
-    img {
+    .user-image {
+      float: left;
       padding-right: 4px;
     }
+
+    .user-detail {
+      float: left;
+      width: 70%;
+
+      span {
+        float: left;
+        width: 90%;
+        padding-left: 5px;
+      }
+
+      .username a {
+        font-weight: bold;
+        font-size: 16px;
+        color: scale-color($primary, $lightness: 30%);
+      }
+
+      .name {
+        font-size: 13px;
+        color: scale-color($primary, $lightness: 30%);
+      }
+
+      .title {
+        font-size: 13px;
+        color: scale-color($primary, $lightness: 50%);
+      }
+
+    }
   }
   
   p {

app/serializers/user_name_serializer.rb

@@ -1,5 +1,5 @@
 class UserNameSerializer < ApplicationSerializer
-  attributes :id, :username, :name, :uploaded_avatar_id, :avatar_template
+  attributes :id, :username, :name, :title, :uploaded_avatar_id, :avatar_template
 
   def include_name?
     SiteSetting.enable_names?