UX/UI: Flame Dialogues APP

weilu-effect-2

Project Overview


The project is to design a mobile app prototype for Flame Dialogues, an online blog built on Wechat media platform. The goal is to solve the problems the readers are met with on the current platform and offer them a better reading experience.

Individual Project
2016.5


 

Background Briefing

 

Flame Dialogues is a platform for exchanging ideas based on Wechat media platform. It enjoys more than 7,700 stable subscriptions across the country. It is organized and ran by students from top universities in China.  The main audience is college students.

As the design director and one of the core members of Flame Dialogues, I was responsible for the brand identity and the whole visual design. When doing the ideation of the final project of the UX course, I decided to design an APP for Flame Dialogues and its readers.

Design Approach

design process.png

 

 

Research and Problem Finding

I interviewed the current readers of Flame Dialogue about their current experiences and their reading habits. I also asked the manager of the platform for some detailed information. Here are some key findings:

  1. A lack of space holding favorite articles: the saved articles were mixed with other articles from other Wechat accounts, which made it difficult for them find an article and review it.
  2. Limited search function: if a user would like to search for an article, he can only do this by either typing some keywords set by the organizer or selecting a certain type from the menu. It was not free and customizable enough.
  3. Limitation on social aspect: a reader could only interact with other readers by sending a thumbs-up under an article. There is no reply feature. The reviews could be showed only after the screening.

Below is the current user journey on how to write a comment or attempt to write a comment to others, along with the problems I found in this whole process.

Current User Flow on attempting to write a comment to an article and another reader w/ problem findings

current user flow on commenting.001current user flow on commenting.002

Current problem on “adding an article to my favorites”

save

Solution & Feature Requirements

  1. Personal account page
  2. Better system to save an article, send a comment and manage comments
  3. Search page

Design

Information Architecture

Even though it was an idea-sharing platform with a relatively small audience, the requirement on IA was still quite high. Also, Flame Dialogues already has its own design of navigation on different sections.

Here is my design of the app map.

围炉整理.001.jpeg

 

屏幕快照 2017-04-27 下午12.21.23
Mind Map / Sketch

I discovered that the readers had used to the current design of the menu. Also, I thought at the beginning phrase of the app development, too many differences would make the current readers feel a lack of familiarity. Therefore, based on the original menu on WeChat, I adjusted the navigation and added features/pages such as search and personal page.
Later, we could base on the testing results and design a more convenient as well as clear navigation for readers, such as adding filter feature to the history page.

 

 

Interaction Design | Interface Design

Tab Bar

Three buttons are set at the bottom of the page. They are the three main sections of the app. Also, it matched the current user habits on choosing different articles at the bottom menu on WeChat.

Home Page

  • Swipe left/right to see recommended articles and event promotion posts.
  • Wipe up to go into the reading mode — card design for more convenient to switch between articles.
围炉整理.002
Home Page

 

History Page

Double-tab design for switching between selected articles and the history articles.

围炉整理.003
History Page

Special Issues Page

To make a difference between History and Special Issues, I used larger card along with clean layout.
Potential improvement: a user can change the order by dragging.

围炉整理.004
Special Issues Page

 

Personal Page

  • Three tab menu design for easier switch different features
  • Swipe left to delete an article
围炉整理.005
Personal Page

 

Article & Comment Page

  • More social elements for better interaction among readers:
    • Show the number of saved, comments
    • Comment page for all the comments
    • Share page
  • Multiple doors to the same goal – comment
围炉整理.006
Article & Comment Page

Loading Page and Setting Page

  • A loading page with our tagline to better show our identity
  • Have a setting page for customization. We can also gather some suggestions from our user
围炉整理.007
Loading Page & Setting Page

 

Some mind maps and sketches to show my design process

Interface Design – Mockup

I used Sketch and Illustrator to design the mid-fi mockup along with some elements and cards design.

interface design.png

 

Prototype

I used Invision to build an interactive prototype for showing the relationship among pages and the interactions I designed.

e5b18fe5b995e5bfabe785a7-2017-04-24-e4b88be58d883-55-37.png

Usability Testing & Lessons learned

I conducted three face-to-face usability testings.

Problem:

  1. the design for the home page was confusing. Users didn’t know the main way of interaction.
  2. I lack many details througout a user’s journey on navigating the app.
  3. The speed of the loading page was too slow.

Analysis:

  1. I didn’t do a good job on user flow and task analysis at the first place, leading to my lack of some interaction steps.
  2. There were too many features I intended to design at the beginning of the project, which made it hard for either design or testing. It didn’t match the MVP thought either.
  3. The limitation of Invision on building interactions made it hard to understand the interactions I designed. May consider using other prototyping tools.

 

Next Steps:

  1. Use better prototype tools for a completed interaction demonstration ( Principle, Facebook Origami, Axure, etc)
  2. Design a better user flow with related tasks
  3. There is a big room of the improvements on the information architecture. We could do more interviews and market research to improve the design. The goal is to make it customizable enough but not too complex.
  4. This iteration, because of the cost of time and Minimum Variable Product, I didn’t design the whole process of signing in/up, which can be considered in the future development.
  5. Emotion Communication: For blank/empty pages or updating page, could add some instructions or icons for communicating emotions to the readers.

As my very first UX/UI project, there are so many things can be improved. But I am consistantly learning and working hard. Thank you for reading~=D

围炉app.jpg

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s