Task #1:
Create a brand identity for a startup company called “Jiving”. Create two separate concepts for a company logo with short, written descriptions for each one.
Time expectation: No more than 1 hour
Task #2:
Create a wireframe showing the content of the Jiving “Employee home” page on the corporate intranet site.
Using the content categories and details on the following page, create two wireframes of the Jiving “Employee home” page:
1. a landscape-format web version.
2. a portrait-format mobile version.
Time expectation: No more than 2 hours
Task #3:
Create a mood board that illustrates the general look and feel of the UI design, including: typography, colour scheme, design patterns, widgets, textures, etc.
Time expectation: No more than 1 hour
Project Outlines
1. Understand and Develop the Concept
· Gather information to understand the project’s overall picture. Know who the end-users are.
· Review the design briefing.
· Create a story board and a scenario.
· Find potential problems and solve them
2. Gather information
· Define “jiving” and “millennials” and work from there.
· Search for design trends that appeal to as many millennials as possible.
3. Work on the design of the logo.
4. Develop an informative design which includes sketches, the developing topology, wireframes, and the layout/composition.
Briefing
· The company is a startup called ‘Jiving’.
· ‘Jiving’ creates collaboration software for larger enterprise companies to facilitate communication between employees, customers, and partners.
· The company branding colours are blue, purple, green, and orange.
· They cater to a millennial demographic.
· They consider the tone of their brand to be youthful, hip and progressive.
Exploratory questions to understand the brand space
1. JIVING (company Name)
What is the origin of this name?
2. Collaboration software
Is this a social media? Is there any examples?
3. Target Audience
Who are the users?
4. Colour
Can I use different shades of these colours? How many colours should I use as a core colour? How many and which ones should I use as accent colours?
‘jiving’
1. swing music or the dancing performed to it
2. a: glib, deceptive, or foolish talk tired of listening to his jive
b: the jargon of hipsters
c: a special jargon of difficult or slang terms street jive
(Merriam-Webster Dictionary)
Software
Software: collaboration software
I have looked at major social media sites (Facebook, Twitter, OK.RU), more thoroughly than I normally do. Also I had interviewed 3 millennials (20-21 years old) to get a sense how they using social media. I learned that they almost never pay much attention to the surrounding designs of social media. It means that social media creators achieved the purpose. Good design is invisible.
Many of the social media sites had great deal of similarity: very light shade of gray background, and they were quite boxy. And a familiar blue links. People still think blue means link.
Colours
Vibrant and bright yet humble and strong.
#2a70ba Blue, symbolizes loyalty, strength, success, wisdom and trust
#2cad73 Green, the color of life, renewal, nature, and energy
#ec4e1b Orange, affordable, Creativity, Enthusiasm, Fun, Jovial, Lighthearted, High-Spirited and Youthful
#492b87 Violet represent the future, the imagination and dreams
Millenialls
What are they like? What do they like?
Millennials are so named because they were born near, or came of age during, the dawn of the 21st century – the new millennium. As the first to be born into a digital world, this demographic group is often associated with the Internet and social media: Technology is incorporated into their everyday lives – it’s been estimated they check their phones as many as 43 times daily – and serving them has been a major contributing factor to the growth of Silicon Valley and other technology hubs. Also known as Generation Y (Gen-Y).
(www.investopedia.com)
Logo Design
The concept of the young generation and collaboration gave me the following ideas.
Typography - bold, straight lines, simple, but with some softness, roundness
Colour - vivid
Items - lines, icons
Inspiration - cool, new, flat design
LOGO concept 1
Co Headline Font
Font is strong, uncomplicated, clean, modern, round.
Made unique enough to stand on it’s own and be recognizable.
For the main logo colour, I chose violet. With these 4 colour combination, I wanted to use blue, orange and green to be secondary / accent colours.
It is social media for professional collaboration.
If we go with violet, I would use a light shade of gray to accompany it.
The placement of colourful circles gives a feeling of a movement, conversation which is going up and down, a collaboration process.
Upside down “i” associated with exclamation mark and importance of a process.
LOGO concept 2
Co Headline Font
Progression, connection and feedback are all ideas that inspired this mark. This unified mark is active, moving, and dynamic. it shows teamwork collaboration.
To appeal to a hip and youthful audience, I went with a
clean and modern look.
Font
strong, uncomplicated, clean.
Wireframe Content Categories and Details
Background:
The Jiving design team has been collaborating with the development and product management teams. Based on their understanding of the requirements of the application, they have progressed to the point of developing basic wireframes for the corporate intranet site.
Task:
Create a wireframe showing the content of the Jiving “Employee home” page on the corporate intranet site.
Using the content categories and details on the following page, create two
wireframes of the Jiving “Employee home” page:
1. a landscape-format web version.
2. a portrait-format mobile version.
Wireframe content categories and details:
Here are the 4 main sections of content for the “Employee home” page and relevant details for each (see below). Please also include a search bar and the company logo in the wireframes.
1. Profile
Name: Clara Liang
Title: Chief Product Officer
Department: Product Management
Email: clara.liang@company.com
189 points, All-star
2. Details
Location: Toronto, ON
Time: 8:45 AM
Phone: (416) 555-1212
Bio: I’m the Product manager for Jiving Connect.
I have an Bachelor of Arts in Economics, and an MBA.
3. Connections & org chart (toggle)
42 connections, 25 following, 31 followers
4. Skills & expertise
Customer relations (8/10)
Product management (8/10)
Mentoring (7/10)
Products (6/10)
Roadmap (5/10)
Strategy (4/10)
Work process
To get a basic concept of how the app will work in user interface form I started to sketch.
After sketching I started to wireframe home page to refine the concept of how the app will work using pixelated greyscale widgets.
Overview
My main focus of the wireframes was on the information design. I was thinking about effective presentation of the
content and made strong layout/composition.
I structured content in certain hierarchy to organize and maintain a useful and usable body of information. Primary focus on the “Employee Home” page is on “Profile” section (I put it on the top). “Details”, “Connections & org chart” and “Skills & Expertise” have secondary focus on the page. They stay behind of profile section.
To create web page I used rule of thirds and Z-layout.