Screen Shot 2018-11-18 at 17.17.58.png
Understanding the Design Task
Redesign the team page and the individual page, a more visually appealing and useful feature set.

The Team Page is comprised of two front-facing elements; The main team page example and the individual page example For this design challenge, I am allowed to completely change the layout, look and feel of both pages. I can add additional features or design elements if yo. 


Before I start, there are things that will need to be addressed in for this design challenge.


1. What does it look like if a user does not upload an image? 

2. How do customers know if a user is online?

3. How is the company branding represented?

4. What functionality is present?

5. How does that functionality help a customer to quickly connect with someone that can help them? 

6. Is the design mobile friendly?

7. What additional interactions could be created to bring added value to the product?



Who is Target Audience? what is this product targeted for?

I am allowed to choose the size of the target audience or just design for a general audience. But most importantly, the product focuses on the overall product appealing to a vast audience which implies that features and visuals must be easy to understand and make users exciting to use. 


Before I start designing, I analyze the components in each page. 

The Main Team Page
Screen Shot 2018-11-18 at 17.29.57.png
The Individual Page
Screen Shot 2018-11-18 at 17.30.11.png
Page Title
Page Subtitle
Profile Picture
Availability Status
Call Button
1. Email 
and other social networking 
2. LinkedIn link
3. Facebook link
4. Twitter link
The Main Team Page's basic elements
The Individual Page's basic elements
The problem that I found is that users need to go another pagination to see detailed information such as email and other social networking links. I question myself that if it is the most convenient solution to navigate for users.
1. two separate pages are necessary to navigate?
Particularly pagination is not necessary for this interface, it is alright to be as one page. When user comes to this page, they look for quick info of each person. Making them to click and see the details and click to come back is not an intuitive solution. So I make it as intuitive and simple interaction.  
2. Is A to Z order the best solution? Is it navigating easily to find an employee who can talk now? 
There is the only way to find a person through A to Z order. So it is necessary to have filters to sort out who is online. So automatically showing someone to call right away is convenient for users. Users are coming to the page for immediate help not browsing to see every employee. Also, having a search box would be a good solution to find a person they purposely want to contact.  Especially, for mobile, it requires too much swipe down to see all team employees.  Showing available employees and search box can help users to find when they seek for help. 
3. How important is the profile pictures for user? How to deal with the profile with no picture? 
If employees do not want to upload their pictures or not use their face as a profile, what can we make it look good? For the original design, photo takes 60%. it's quite a lot of proposition. So I want to make this parts partial and not bother to users to see without a profile picture. So minimalize the profile picture can cause more space for other components. Putting the information to know before contact is my solution. 
 Also, the notification is presented around their profile picture with a circle notification mark on. It will show users to find easy to realize who is online. 
4. Layout and color scheme does not present the company's branding which is free and borderless. 

I focus on the Interactive interface. When user hovers over the mouse pointer to employees information, it flips to navigate to calling option. 

From the original design, the layout does not work efficiently. For instance, the page title and page subtitle and logo are a bit disturbing. So I want to design the layout to be merged together and more contemporary with different color schemes.  
Screen Shot 2018-11-18 at 17.37.30.png
Screen Shot 2018-11-18 at 17.31.07.png
Screen Shot 2018-11-18 at 17.32.02.png
In terms of mobile friendly, I found that it is good to have each person to scroll down but another pagination is just too much for this interface.  Finding a person who is online to help right away is hard to find on mobile. So showing who is available first is better as solutions for web app. And search box on top would help users to find quickly. 


Based on that consideration and ideations, I came up with the wireframes for web and mobile which can make users to find it easy with search box feature and wide layout.


Web app wireframe
Mobile app wireframe

Visual Design

Based on that consideration and ideations, I came up with the wireframes for web and mobile which can make users to find it easy with search box feature and wide layout.


Available employees shown the first row and others are saturated. Visually easy to figure out and time-saving for users. 
Team Page Main Page.png
When user clicks the profile anywhere except the links to social media and email, it will navigate to calling.
Screen Shot 2018-11-22 at 01.05.25.png