DESIGN UNL P O R T A L
D E S I G N
A LY S S A B R U N S W I C K | G R P H 3 2 4 | S P R I N G 2 0 1 4
2
PROJECT BRIEF
As an exercise in large-scale web development, you will work as a “class development team� to design a communications portal for all design students at UNL. The primary goal for this site is to create a one stop source for (in the order of importance): jobs, internships, news, events, resources and ideally to foster a design community. A core concept we will be focusing on is UCD or user-centered design. User-centered design is a design philosophy that puts the user of a product, application or experience at the center of the design process. In UCD, a designer strives for a detailed understanding of the needs, wants and limitations of the people who will use the end product and then makes design choices that incorporate this understanding. UCD requires that designers not only analyze and foresee how users engage but also test their designs.
3
P R E - D E S I G N
Some of the websites we looked at during our research. We picked out which features of each of the different sites we liked the most, and tried to implement those in our designs. Some • • • • • •
of those features included sort by location sort by job type date posted date due/closing description of company clean and simple listing design, but much more information inside • the ability to resort based on priority
4
W O R K
5
6
WIREFRAMING
7
GROUP WIREFRAMES
These are the three sub-pages we decided would be good for the jobs page. We thought the main focus should be the job listings themselves, and then a connect/alumni page which would allow alumni to post jobs they know of that are not being publicly posted, or if they are specifically looking for a UNL student to take the job.
8
LOGIN / ACCOUNT
JOB Search Alumni:
CONNECT
SEARCH
TIPS
POSTS BY ALUMNI SORT BY:
Browse profiles:
popularity
most recent
MARK SMITH
FREELANCE GRAPHIC ARTIST If you've ever thought about graphic design, it can be a very rewarding career path. Here's how to get started and a look at what graphic designers do...
DIANA GRANGER DISNEY DESIGNER
My originality landed me a position in 2011 with Walt Disney Imagineering, where I designed the shows, rides, pavilions, and attractions for Disney’s theme parks worldwide and online...
RICK LANCE
MULTIMEDIA ANIMATOR Not a week goes by when someone doesn't ask how much money an animator makes. Many imagine the starving artist, sharing a tiny studio apartment with six other animators ...
KATHY ROSS
9
FINAL GROUP WIREFRAMES
Revisions of our previous designs based on feedback. In the end we decided it would be best to combine jobs and internships because students are often looking for both, and it would be okay to list them both with the ability to check or uncheck either.
10
11
FULL WIREFRAMES
Full wireframes of every page of the site. This was done by taking each group’s wireframes and making them our own, or altering their designs to be what we thought was best for that page.
12
13
FULL WIREFRAMES
14
15
FULL WIREFRAMES
16
17
18
DESIGNING
19
DESIGN ONE
First designes of two pages. I did the landing page of the site and a resource example page.
20
I thought the landing page should include a little bit of each section of the site. I have a resource as the top section, although this could change sections of the site depending on what was the most important or newest bit of information uploaded.
The sidebar first gives four of the latest job and internship postings. These include the options to save or go to the application straight from this page. There is also the option to see more postings/go to the job listings page. Below the job postings are four upcoming events from the calendar, with the option to see more or get more information on that specific event.
Then there is an article from the tips section of Jobs & Internships. At the bottom I included a form for submitting a resource.
The bottom of the sidebar included a “swatch of the week� as a sort of visual inspiration for anyone who visits the site.
21
DESIGN ONE
The resource page includes an image of the resource and an article reviewing it. There is a part at the top that tells which section it falls under in the resources section. There is an overall rating shown, with the ability for users to rate it themselves. At the bottom there is a comments section, giving the user’s image, name, a title for the comment, the comment itself, and the rating the user gave the site. The comment box is right below that. The sidebar of the resource page lists related resources and a short description for each, with a link to that review and the option to see more resources/go to the full resources page. Below the related resources there is a list of newest resources, with the same options as above.
22
The bottom of the sidebar incluedes a form to submit a resource. I stuck with the same theme and fonts as the current arts.unl.edu site, beacuse that is an understandable site that people who would be using this site would already know and understand.
23
DATA STUDY & RESEARCH
We were to ask students in the art college to answer a survey and review our personal site designs.
Results/Calculations
24
Year Seniors Juniors Sophomores Freshmen
53.4% 27.2% 13.6% 5.6%
Education BA BFA
42% 50%
General feedback Like the idea Good
40% 86%
Features Importance Lowest Highest
News & Events Jobs & Internships
Should be designed in ID1 All Design All Art and Art History
72% 80% 76%
For the most part, people seemed to think asking if the portal itself was a good thing was stupid, because it’s an obvious yes. They all want a portfolio and help making one. When it came to the design, I followed the current arts.unl.edu site, and most people thought that was a good thing. They like that site and it’s something they’re familiar with now, so it’d be fine to just continue those standards. When it came to my personal design, they wanted more images and less text. There was a lot of “look at something like behance.” That makes sense, since they’re all visual people, they want more visual examples and less text. I did have one response that did not like having the job listings on the side of the page so much. She thought they should just exist on their
Main Page 1. Do you like having job postings on the side? 1–1 9–2 10 – 1 Comments: They should just stay on their own page. 2. How likely would you be to submit a resource? 2–2 6–2 Comments: People said they were lazy, but they might rate a resource, so make that the prominent feature of resources besides images.
own page. A majority did, however, like them there. No one really said they were very likely to submit resources or comment and rate them. That means way more work on the part of the site owner to create all of that content. People are lazy, and they don’t want to do your work for you. You would really have to amp up the community part of this project to get people to want to help each other out. Personally, for my site I think I need to work on making images more prominent and reorganizing using parts of the internet that are popular today (full-width images, carousels, hovers, etc.) My questions were mostly quantitative.
Secondary Page 1. How likely would you be to rate/comment on resources? 4- 3 8–1 Comments: People said they were more likely to comment than submit a resource, but would most likely just rate it and leave. They would like more images to show what the resource does and all of its features.
3. With 1 being more text-heavy and 10 being more image-heavy content, what would you like to be the balance of image to text description of resources? 6-1 7-1 8–1 10 – 1 Comments: More. Images.
2. How well do you like the format of the resource? 2- 1 7–1 8–2 Comments: Fewer words and more images, make it look like behance.net
25
SECOND DESIGN
Based on the feedback from my surveys, I made my main page more image-heavy, and made the resource form smaller. I condensed the job postings and the events listings, because they were too spread out. I added more tips, that would shuffle based on importance, page views, newness, etc.
26
I also added a carosel of images for the main article, so people could see more than just one image. On the resources page I also made the image a carousel of different images of the resource. There weren’t any other major changes made to that page.
27
A LY S S A B R U N S W I C K | G R P H 3 2 4 | S P R I N G 2 0 1 4