Lumicast

Intro Video

Here is a short animation to show the features of the app.

*MUSIC: wWW.BENSOUND.cOM

Research

It's so common to see but so weird that many people don't listen to the podcast as often as they listen to music. I did some research to find out the problem of why podcasts cannot hook them.

Cognitive Walkthrough

*Click the image to zoom in

Interview

Kyle

"I can't spend too much time listening to podcasts, especially for the long episodes, because I'm too busy. I think it will be helpful if some tools that can help me to utilize my fragmented time. And I feel that very few podcast app provides good communicate function. I usually have many thoughts and feels to share, but there is no space for me to post."

Wynn

“I like to listen to audiobooks. Usually, I get the recommendation of those books by checking comments and discussions from others. Thus, I don’t like the atmosphere that Spotify provides. I can’t interact with other users there.”

Ben

"I enjoy using podcasts to explore some English channels. Because English is not my primary language, sometimes, I feel it is hard for me to understand the episode's content, especially when the speech is too fast or the accent is unfamiliar. I wonder if there have some tools that can help me to understand that more clear. I think it would be helpful."

pain Points

According to the interview, I concluded 3 challenges that cause users do not listen to podcasts as often as they listen to music.

1. Language Barrier

Language is a barrier for users to explore foreign language channels.

2. Long Episode

It’s difficult for a busy user to complete a long time episode.

3. Lack of Interaction

Those users who are willing to share their thoughts and feels find no space for them to post.

How might We?

What if I could do to help users to overcome those pain points?

1. How might we help users to follow the content of podcasts way more easy？

Heavy accent or foreign language can make users hard to follow the podcast content, so what if I could make that easier for users to understand and digest?

2. How might we make long podcast enjoyable?

A long podcast could be an arduous task for users to listen to. Some users think it is too long to be enjoyable, and others think they do have not enough time to listen. Thus, what if I could transform a long podcast into a more cushy thing that can be enjoyable?

3. How might we allow users to communicate their thoughts?

Users want to share their thoughts and minds with others. They want to make friends with people who have interesting hobbies and ideas. Also, they want to get helpful information from others' thoughts. Therefore, what if I could create some features that allow them to communicate?

Solutions

At the very beginning, I assumed many ideas to answer “How might we help users to achieve their goals?” After brainstorming and discussing, I removed those ideas which would not work. Here are the solutions that can successfully help users overcome those challenges.

1. Speed Adjustment, Transcripts, Auto-Translation

Showing automatic transcripts and translation for users to check. Allowing users to adjust the spoken speed.

2. Split Episode

Allowing users to split a very long episode into several shorter pieces.

3. Review, Rate, Tag, Comment, Reply

Allowing users to rate, review and tag the podcast channels. They can also share their minds with others.

User Story

john

“As a curious and busy guy who likes to learn a foreign language and interact with others, I find it difficult to know if a podcast channel is good before I try by myself. Also, I cannot fully understand the content when I try to explore some foreign ones. I want some tools that can help me understand the meaning of foreign channels’ content to enjoy it well. Besides, I like to share my thoughts and experience with others. I hope there will have some places for me to do that.”

User Flow

For the Challenge 1: Transcripts, Speed Adjustment

*Click the image to zoom in

For The Challenge 2: Episode Split

*Click the image to zoom in

For The Challenge 3: Review, Rate, Tag, Comment, Reply

*Click the image to zoom in

wireframing

I wanted to know what the core of the app looks like before I onto the high fidelity wireframes and mockups. It gave me a good start to run this design.

Home

Channel Page

Leave Comments

Reviews

Split Episode

Split List

Transcripts

Back and forth

I made many iterations during the design process and got positive feedbacks.

showcase

Design for screens

Prototyping For The Challenge 1:

Translations & Transcripts

Users can check the transcripts and translation on the playing page, and tap the certain paragraph to repeat it.

Speed Adjustment

Users can tap the speed adjust button to choose the speed they want to play episode.

Prototyping For The Challenge 2:

Split Episode

Users can split the episode into many parts by tapping the split button.

Prototyping For The Challenge 3:

Reviews & Rates & Tags

Users can rate the channel from 3 different aspects. They can also customize tags for the channel and write down their reviews.

Comments

You can write down your thoughts and feels about the episodes, or you can post your questions here, waiting for other users to reply you.

Reply

Users can check others' comments and make

Smartwatch pairing

Design screens For Smartwatch Pairing:

Now Playing

Open the app and tap the now playing button to check what is playing now.

Play An Episode

Check the playlists and enter into one of them. Users can tap the channel they want to enjoy, and select one of the episodes in it to play.

Split Episode

When users are in the playing page, tapping the icon on the bottom right corner of your screen. Users can choose how many parts they want it to be divided into. Then the button will automatically become a playlist. Users can choose which part they want to play.

Speed Adjustment

Users can tap the bottom left corner button to adjust speech speed when they are in the playing page.

progress Adjustment

Users can check the translations and transcripts here to see what's going on for the podcast.

Design brief

I want my users to more focus on what the app is delivering, so I choose a relatively dark color scheme for my UI Design. Also, I pick a highly contrast color scheme to highlight the important information. Besides, purple is a kind of mysterious color, which means that the app is waiting for the users to discover infinite channels.

← Previous Project

The Next Project →

What's the problem?

I used "Heuristics Evaluation" to evaluate the existed problems of TigerSafe.

1.Bad Visibility

The app is like a maze. It provides no clues to inform me where I am and what I can expect when using it.

2. Unmatch The Real World

The app uses much jargon. What is blue light? What is Title IX? I asked many of my friends these two questions. The only answer I got was "No." Plus, the app makes some familiar icons to represent some unfamiliar meaning, which makes users feel confused.

3. Poor Error Prevention

One night, I tested the blue light function. I just tapped into the icon and never done anything else, but the public safety of my school called me after about 30 mins and asked me if I am in danger. That made me fear that function.

4.Inconsistency

The name of each function, the layout, the icons and the color scheme are so inconsistent.

5.Poor Hierarchy

Unclear visual hierarchy made the product feel more complex than it really was.

6. TLDR

Almost all the functions have their descriptions in this app. They are all too detailed. When I read them, I feel like I am reading a paper.

7. Not Inclusive

Requiring a university account to log in can definitely help to avoid anonymous misuse of the resources. However, if some visitors also need to reach those campus safety resources, what can they do?

*Screenshots of TigerSafe

What's the goal?

I identified the problems and clear the goals.

1. “You are here”

Always let the users know the current system status. Giving the users appropriate feedback when it is necessary.

2. Familiar To Users

All the words, phrases, and concepts used in the app should be familiar to the users.

3. Avoid Errors

Prevent the users from triggering problems.

4. Make It Consistent

Make all the stuff in a consistent way.

5. Clear Visual Hierarchy

Design in a clear way that allows the users to find the information quickly.

6. Concise

Make every description to be succinct.

7. Consider All The Potential Users

Thinking about all the potential users that use this app. Trying to meet all their needs.

How others do?

To construct a solid and concise foundation for my redesign, I looked at several potential competing products to see what they were already doing and what user needs they were not reaching. Honestly, there are not many campus safety apps in the market. The majority of the features between competitors were very similar. I tried to evaluate those products from 7 aspects that I want to make improvements for TigerSafe.

I noticed some good designs that perfectly solves those problems by reviewing those products:
‍
-Clear titles, tips and inbox messages
-Familiar terminology, common used icons
-Clear descriptions and tips
-All the elements are from the same design system
-Use colors, types and button sizes to figure out the levels of information
-Concise titles and descriptions
-Visitor can get essential resources
‍‍

What's the solution?

After reviewing those products, I proposed some solutions for my redesign.

1. Clear Titles And Feedbacks

Every page should have a clear title to inform users where they are. Presenting feedback and tips to users in an appropriate amount of time is also essential.

2. Speak The User's Language

Using familiar terminologies, phrases to name or describe every function. Also, using commonly used icons to visualize every part.

3. Avoid Errors

Giving a clear guide for users.

4. Design A System

Make a design system to keep the design consistent

5. Build Visual Hierarchy

Considering the levels of all the stuff. Using different colors, fonts, button sizes to categorize them.

6. Simplify

Making all the text concise.

7. Consider All The Potential Users

Allowing the visitors to get essential resources. Simplify the verification process for Edu account users.

User Flow

In order to better understand how to construct the experience for TigerSafe, I drew some user flows. The flows helped me to focus on designing the experience and organizing the functions in a logical way.

Flow 1: Onboarding

When on the onboarding page, visitors can skip the verification process. It will bring the visitors to the emergency page directly. User can use the whole functions that provided in the emergency page. Alternatively, the user can unlock all the features by going through the verification process.

*Click the image to zoom in

Flow 2: Home

The home page includes three main features, emergency, the incident report and health&wellbeing.

*Click the image to zoom in

Flow 3: Utilities

The Utilities includes "escort me" and "campus map." Users can easily share their real-time status with their friends or public safety, to let them if the users are safe.

*Click the image to zoom in

Flow 4: Resources

*Click the image to zoom in

Flow 5: Profile And Setting

*Click the image to zoom in

Wireframing

*Click the image to zoom in

Iterations

After creating my prototype from low fidelity wireframes, I showed my works to the teacher and classmates to get critiques. I described how my design works and asked if they had any problems or questions with it. To get enough feedbacks to perfect the design, this process had been ran for many times.

Bigger Button

The small button was not easy for users to tap. It made user easy to make error. I made a bigger one for that.

Show The Availability

The patient chat doesn't available 24/7. So it should be shown the availability for it. I made the button grey when it in an unavailable time.

Expectation Management

When waiting for the response, people tend to feel upset. A countdown timer can definitely help users to feel comfortable

Highlight The Destination

I made every school building in different colors at the very beginning step of making high fidelity. That was not a good idea. After, I just made the destination with orange color as well as put an icon there to show the entrance.

Showcase

Design for screens

*Click the image to zoom in

Prototyping for features

Inbox & Notification Center

Users can check the messages and feedbacks in the inbox. The notification center is a place that receives important information that the school posts.

Emergency

Users can get access to public safety services by either calling or messaging them. The app will automatically put your location information in the text or automatically share it when you call public safety. If public safety doesn't work, users can alternatively tend to call 911 to help them. The location information is clearly listed below those buttons so that users can easily reach them.

Add Contact

Users can add contacts to the friends list.

Escort By Friends

When the friend accepts your invitation, user will enter the escort me page. In this page, users can pin a destination they want to go, share the real time information with their friends and video chat with them. Their friends can escort them during this process. Their friends can also help them to contact the public safety when they are in danger.

Escort By Public Safety

If no one responds to the escort me invitation, the app will ask you to change to escort by public safety. In this model, users will share their data with public safety.

Design Brief

Different color has a different meaning. Color psychology can help us to build a design identity quickly. Since TigerSafe is a security app, I chose blue as the primary color. It represents trust and security in color psychology.
‍
For the color scheme, I checked the visual salience of colors. Red, blue and green are all with high visual salience. Red has the meaning of fear in color psychology, so I use it in emergency function. Blue has the meaning of reliability, so I use it in the incident report function. Green has a healing meaning, so I applied it in the health and wellbeing section. Orange doesn't has much visual salience as the three colors I mentioned just now. It has a friendliness meaning in color psychology, so I wielded it in escort me function, which is very matched.

For the icon design part, I combined tiger and shield facts. Shield has the meaning of safety, and tiger head gives me a sense of safety as well. I made the mouth and the nose part like two hands holding a heart because I want to highlight that the app is not only a safety app, but also something that cares you.

← Previous Project

The Next Project→

The Host city

This is some text inside of a div block.I chose Amsterdam as the host city for Kern conference. Whether it's fashion, furniture, architecture or graphic, Dutch design is recognized and celebrated all over the world. Amsterdam is the capital city and the most popular city of the Kingdom of the Netherlands, the design and art atmosphere there are great as well. That's the reason why I choose it as the host city.

*The photo is from Unsplash.

Inspirations

When it mentioned Amsterdam, some symbols come up to my mind.

Vincent van gogh

Vincent Van Gogh was a well known Dutch post-impressionist painter. His works are characterized by bold colors and dramatic, impulsive and expressive brushwork.

Piet Mondrian

Piet Mondrian is also a Dutch painter regarded as one of the greatest artists of the 20th century. He was famous for his extremely simple geometric elements artistic vocabulary.

Flag of amsterdam

The official flag for Amsterdam. The current design of the flag includes three Saint Andrew's crosses which are based on the escutcheon in the coat of arms of Amsterdam.

I amsterdam

It was served as a landmark for Amsterdam which located in the place that in front of the Rijksmuseum in the city's center.

Amsterdam Map

The topographic of a city can definitely represents the city. Amsterdam is so unique. It contains more than 60miles of canals in the city. The river Amstel ends in the city centre and connects to the large number of canals that eventually terminate in the IJ, which makes Amsterdam so intriguing.

directions

I tried many possible directions to see if they match the vibe that I want. I finally picked the last direction to dive. The direction that combined Van Gogh's style and the topographic of Amsterdam.

iterations

I made many iterations to see which layout was good. Been critiqued and continue to approach the final version.

Cover:

Content

Showcase

← Previous Project

Back to Projects →

Overview

College is one of our most important seasons. Bed Bath & Beyond wants to deliver a best-inclass experience for their customers at this important life moment. Mobile brings the convenience to people to collaborate anywhere, anytime. That's reason why I choose to pursue the solution that make this app design.

3D Room Designer 🏡

Build your future room in the virtual 3D space right now! Input some data to create a room, browsing products to decorate it.

Collaborate 🤝

Invite friends and families to design the future room with you. They can edit the virtual room space with you. Also, all the members can chat and share goods in the chatbox.

Split Bills 💰

Choose the goods that best fit your future room and invite co-payers to pay for the bill with you. The app will automatically calculate the shared goods price and split the bill evenly.

Problems

How might we help students and parents with the planning process for college?

1. How might we help college students to know if what they want to buy will fit in their dorm/apartment? 🏡

How can we allow the students to know if the items that will go together with that fit their style? How can we help them to know if the sizes of the items will fit in their dorm/apartment?

2. How might we help parents/students collaborate? 👪

How can we allow the parents and students to collaborate during the room build process? How can we give them access to easily interact and communicate with each other?

3. How might we help college students to account for shared items with their roommates? 💰

Accounting for shared items with roommates is a frustrating experience. How can we make this process more easy and clear?

Research

I found landscape analysis to be the most insightful.

Target Room Planner

Target has great room planners for college students. The design and function are amazing. Users can easily build their room in this virtual space and customize their room by using the items in target.

Figma

Figma has a great experience for collaboration. Users can invite people to design with them in the same document. The latest release of figjam even allows users to chat with others while collaborating.

Wechat Split Bill

Wechat has a useful split bill function that allows users to sent bill into group, and split the bill in a very flexible way. Users can pay for the bill or request payment from friends.

Key Takeaways

1. 3D room can really help college students to know what their future dorm/apartment look like.

3D virtual room designer is an intuitive way that allows users to customize their room. With this tool, users can easily know if the products are fit for their room.