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.
Four main components of the App
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.
Experiment with different hashtag layout
3. Designing the Tagpen Logo
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.
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
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.
Illustration of User onboarding flow
5. Landing Page
A simple, eye catching landing page was designed and built for Tagpen.
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.