Tagpen Screenshot


"Tagpen" is an Andriod App which can organize, discover, consume, and share interesting news via #HEADLINES created by your friends, people you care about, and publishers on the Internet. This project is a new experience for me because it was the first time when I collaborated with the other 3 team members distantly in different time zones. When I joined this project, I got the product requirements and the initial wireframes of the App ready, my job was mainly modify the wireframes and design iteratively of all the user interfaces based on the wireframes. I also helped designed the logo and the launching page of the App

Time: 2013.06 - 2013.12

Type: Teamwork with Sean, Anthony and Fan | Freelance

Role: UI designer

Method & Skill: Interface Design, Graphic Design, Photoshop, Html, CSS and Javascript.


1. Designing Interfaces.

Four main pages constructed the Tagpen App: the “homepage” was where people could see all the hashtag contents; the “match page” was where user sort and organise their hashtag sources, either in inner circle or outer circle; the “activity page” was where user could see their friends’ postings and comments of certain hashtag topics; and the setting page was where user could link his or her social network account and set priorities.

structure of the App

Four main components of the App

interface design of homepage
interface design of the matchpages
interface design of the activepages
interface design of the four pages

Interface examples of homepage, matching page, activity page and setting page

2. Designing #topic layout

One big challenge in this project was how to display all the hashtags timely and make it beautiful regardless of the number of hashtags. We considered several design questions:

1) What time length to use to separate the hashtags;

2) How to display multiple hashtags;

3)Edge cases of font size, and the length of the hashtags;

4) How to display hashtags that were longer than the edge case;

5) How to separate the hashtags of different sources.

hashtag  v1
hashtag  v1
hashtag  v1
hashtag  v1
hashtag  v1
hashtag  v1
hashtag  v1
hashtag  v1
hashtag  v1
hashtag  v1
hashtag  v1
hashtag  v1

Experiment with different hashtag layout

3. Designing the Tagpen Logo

3.1 Inspirations

Firstly I took some example logo to seek inspirations. The design of logo include changing the font weight, color, creating shape, make combinations of letters and make transformations of letters.

logo Inspiration

3.2 Design Iterations

Then I play with the "T" and "a" within the name Tagpen, wanting to find suitable transformation of letters to form a logo

tagpen logo iteration1
tagpen logo iteration2

Design iterations of tagpen logo

4. User On-boarding Experience Flow

The user on boarding experience was very important as it formed the first impact of the App on user, letting user understand what they could do with it. Thus we designed a welcoming and friendly user on boarding pages.

user onboarding 1
user onboarding 2
user onboarding 3
user onboarding 4

Illustration of User onboarding flow

5. Landing Page

A simple, eye catching landing page was designed and built for Tagpen.

landing page

Designing landing page

-- Thanks for reading --
If you have any questions or simply want to chat with me about this project, feel free to drop me an email.