Student Reps Registration Page redesign

RESOLVED FIXED

Status

task
P2
normal
RESOLVED FIXED
9 years ago
6 years ago

People

(Reporter: emurto, Assigned: jslater)

Tracking

Details

Attachments

(3 attachments)

(Reporter)

Description

9 years ago
Please help us redesign the studnet reps registration form page. 

Here is current content and registration page that it will be replace: 
http://mozilla.us1.list-manage.com/subscribe?u=168bf22f976f5a68fe5770d19&id=9e35bff4f4

Form fields:
First Name
Last Name
Email address
School
Major (subject of study)
Graduation year (picklist) 
Country (picklist)
Tell me more about  (check boxes "Localization opportunities" and "Developer news (web, mobile, add-ons, applications)

Deadline: would love a design by Friday 9/17/10 if possible. 

This would be implementated in Responsys (rather than Mailchimp) 

Thank you, Eve
(Reporter)

Updated

9 years ago
Priority: -- → P2
(Assignee)

Comment 1

9 years ago
Hi Eve. The current registration page has a *ton* of explanatory copy around what student reps are and why someone should become one. 

I'd like to base this page on https://www-trunk.stage.mozilla.com/en-US/newsletter/, which has a lot less copy and is generally more straightforward. Is that ok? 

If so, here's what we'll need (asap) to have this ready by Friday:
- headline & subheadline copy
- name of the newsletter
- sample newsletter image we can use as the hero image

Let me know if you want to discuss further...thanks!
I'm definitely ok with using a lot less copy. In addition to being a newsletter signup, this page is also how students register to become a Rep. We can make that clear in shorter copy though. Here's what I'm thinking:

Headline: Be a Student Rep at School (let me know if this is too long)

Subheadline: Show your classmates why Firefox rocks, and help others have a better Web experience. Become a Student Rep at your school by signing up now.

Name: Mozilla Student Reps

Sample images: Here are three. Pick the one you think is best: http://people.mozilla.com/~williamr/studentreps/newsletter-heros/
(Reporter)

Comment 3

9 years ago
John: lets chat quickly with William to figure out one page or two ... 

As William mentions, this is the main web page about the student reps program, and as such it would be great to offer several paragraphs about the program about what it is and the benefits. (plus other exciting stuff on the page like a campus photo of an event, or a quote from a student rep, a map, etc.). 

Plus can also offer the rather short registration form (to apply for the program) on the same page, or as a click thru to a second form page. What is your preference? 

Frequently form signups are higher by having the form on the side or bottom of a key page, rather than a click thru to another page, by the way.  But either way.
(Assignee)

Comment 4

9 years ago
Yeah, I think I misunderstood the page at first. Would love to have a quick discussion.
(Assignee)

Comment 6

9 years ago
Thanks Rhonda. A few thoughts on this:

- the page feels kind of unbalanced with all the text on the left but nothing much on the right. I suppose one option would be to use a more vertical illustration to fill the space (wasn't there a guy holding a trophy?). Another might be to make the fields themselves more horizontal...have the name, email and school ones on the left, and then the drop downs, check boxes and buttons right next to them on the right (under the current illo)...a two column approach, basically. Would be great to see both as options, or anything else if you have other ideas.

- it is possible that some of the layers are turned off in the illustration? Comparing this to the one on http://studentreps.mozilla.org/en/ there are some details missing.

- can we put "Become a Student Rep!" all on one line? That might also help scoot things up a bit.

- also, this might not matter much now, but the font stylings on this page are a little different than the live site (see http://www-trunk.stage.mozilla.com/en-US/newsletter/ for reference).

William, Eve...let us know if you have additional comments. 

Thanks!
(Reporter)

Comment 7

9 years ago
Wow, this looks fantastic!  Beautiful job. 

When the creative is final ... we'll be implementing this as a form in Responsys (rather than on Mozilla.com web site), so we can grab the HTML and import it easily into the form.  Will have Steve Garrity help us out with this next week.  

We'll need access to the graphics and art images. 

We'll use all 3 pages in the implementation in Responsys. Definitely the confirmation note, and I'll check on the error note operations.   thank you!  -Eve

Comment 8

9 years ago
PROOF 2 includes 2 different versions, using 2 different illustrations. One version is layed out more horizontally and saves some room in the length of the page, while the other has more of a vertical form with all info in one column.
(Assignee)

Comment 9

9 years ago
Thanks Rhonda. I'm leaning towards version 1 (the vertical one). My only suggestion there would be to add a little drop shadow or something under the illustration...right now he's kind of floating there. Maybe scoot him down a couple of pixels, too.

William, Eve...any other thoughts or comments?

Comment 10

9 years ago
Proof Three incorporates change to illustration, added drop shadow and moved down a few pixels. If this is good to go I will post the layered PSD file.
(Assignee)

Comment 11

9 years ago
Looks good to me! It might be nice to see a *little* more drop shadow underneath him but that's not a huge deal. I'm ready to sign off on this...it's really William's page, though, so I'd love to hear from him too.

William, final thoughts?
(Reporter)

Comment 12

9 years ago
I prefer the vertical form a little more than horizontal.  -Eve
Proof three looks good, especially with the spacing and layout changes compared to proof one. I like the trophy character as well. I would add a *little* more drop shadow underneath the character as John suggested.

I'm noticing we're using the mozilla.com template right now. I'm wondering if it would make more sense to use the template from the Student Reps site, since that's how students will be getting to this form. It feels a bit weird to me to go from the orange/tan template to the blue template. John, what do you think?

Student Reps site: http://studentreps.mozilla.org/en/

If we want to use the template from the Reps site, the PSD files are here: http://people.mozilla.com/~williamr/studentreps/site-designs/
(Assignee)

Comment 14

9 years ago
Let's go with proof 3 using the vertical layout as discussed (with a bit more drop shadow, also as discussed).

I agree that using the student reps template would be better here, but it will probably push back the final file delivery to Monday or so. Is that ok? In the future, please let us know that sort of thing up front - it's definitely an important detail.

Rhonda, let me know if you have any questions about any of the feedback. Thanks!
That sounds good to me. Eve, does that timing work?

Sorry for not mentioning the template earlier -- I didn't think of that until seeing the proofs. I'll definitely keep that in mind next time.

Comment 16

9 years ago
Hey John--
If you want to use the student reps template for the background, Im happy to replace it, just need the graphic that you would like me to use instead and I can get that for you probably soonest Monday am? :)
(Assignee)

Comment 17

9 years ago
Thanks Rhonda - Monday is fine. The files you need for that background are at http://people.mozilla.com/~williamr/studentreps/site-designs/.

Appreciate it!
Just to be clear, since we're using the Student Reps template, we should use the same brown palette of text colors that appear on the site: http://studentreps.mozilla.org/

Thanks!

Comment 19

9 years ago
The new Student Rep Sign up page proofs are here for review:
http://www.intothefuzz.com/rhonda/student_rep_signup/

thanks!
--rhonda
(Assignee)

Comment 20

9 years ago
Looks great to me. William, what say you?
Beautiful! No changes. Thanks so much Rhonda :)

Eve, what's the next step here? Handoff the design file?

Comment 22

9 years ago
The final JPG proofs and layered PSD can be found here for pickup:
http://www.intothefuzz.com/rhonda/student_rep_signup/

:)
Thanks!
--rhonda
(Reporter)

Comment 23

9 years ago
 We'll handle pickup shortly.  Thanks! -Eve

Comment 24

6 years ago
Outdated/outstanding bug, closing out. 
Please ping/re-open as needed. Thanks!
Status: NEW → RESOLVED
Last Resolved: 6 years ago
Resolution: --- → FIXED

Comment 25

6 years ago
Outdated/outstanding bug, closing out. 
Please ping/re-open as needed. Thanks!
You need to log in before you can comment on or make changes to this bug.