-
Notifications
You must be signed in to change notification settings - Fork 0
/
p5.html
112 lines (108 loc) · 14.9 KB
/
p5.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ro Dixon | Alumni Association Membership Portal</title>
<meta name="description" content="I designed and developed the front-end portion of this app, which was to be used by schools to share yearbook photos, information, and events with fellow alumni.">
<!-- Google / Search Engine Tags -->
<meta itemprop="name" content="Ro Dixon | Alumni Association Membership Portal">
<meta itemprop="description" content="I designed and developed the front-end portion of this app, which was to be used by schools to share yearbook photos, information, and events with fellow alumni.">
<meta itemprop="image" content="http://rodixondesigns.com/assets/meta-image.png">
<!-- Facebook Meta Tags -->
<meta property="og:url" content="http://rodixondesigns.com">
<meta property="og:type" content="website">
<meta property="og:title" content="Ro Dixon | Alumni Association Membership Portal">
<meta property="og:description" content="I designed and developed the front-end portion of this app, which was to be used by schools to share yearbook photos, information, and events with fellow alumni.">
<meta property="og:image" content="http://rodixondesigns.com/assets/meta-image.png">
<!-- Twitter Meta Tags -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Ro Dixon | Alumni Association Membership Portal">
<meta name="twitter:description" content="I designed and developed the front-end portion of this app, which was to be used by schools to share yearbook photos, information, and events with fellow alumni.">
<meta name="twitter:image" content="http://rodixondesigns.com/assets/meta-image.png">
<link rel="icon" href="assets/favicon.ico">
<script src="https://use.fontawesome.com/f766bd3c92.js"></script>
<link href="https://fonts.googleapis.com/css?family=Quicksand|Fira+Sans" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/uikit.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script defer data-domain="rodixondesigns.com" src="https://plausible.io/js/plausible.js"></script>
</head>
<body>
<div class="uk-offcanvas-content">
<header>
<div id="top" class="uk-position-relative lt-gray">
<div class="uk-position-top">
<div uk-sticky="animation: uk-animation-slide-top; sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky; cls-inactive: uk-navbar-transparent; top: 400">
<nav class="uk-navbar-container uk-navbar-transparent" uk-navbar>
<div class="uk-navbar-left uk-margin-left">
<ul class="uk-navbar-nav uk-visible@m">
<li><a class="lobster" href="index.html">Resumé</a></li>
<li><a class="lobster" href="about.html">About</a></li>
<li><a class="lobster font-dk-blue underline" href="work.html">Work</a></li>
</ul>
<div class="uk-navbar-right uk-hidden@m uk-margin-remove-left"> <a class="uk-navbar-toggle" data-uk-toggle data-uk-navbar-toggle-icon href="#offcanvas-nav"></a> </div>
</div>
<div class="uk-navbar-right uk-visible@m uk-margin-large-right"><a href="https://drive.google.com/file/d/1u4UOCdeU8hJIn0t6guTrXeFWVfqW3bgi/view?usp=sharing" target="_blank" class="btn-white font-link-lt lobster"><span uk-icon="icon: print"></span> Resumé </a></div>
</nav>
</div>
</div>
</div>
</header>
</div>
<div class=content>
<section class=ro-div>
<div class="padding-50 uk-hidden@m"></div>
<a class="uk-link-text font-green uk-text-small" href="work.html"> <i class="fa fa-angle-left" aria-hidden="true"></i> Back to Work Samples</a><h2 class=font-dk-blue>Alumni Association Membership Portal</h2><h4><strong>Challenge</strong></h4><h5>This is a personal project I completed on a freelance basis. The client was asked to build an online database that housed yearbook photos and alumni contact information. Their goal was to have a free version where all alumni could login and view photos of their fellow classmates, and a paid membership where in addition to the yearbook photos they could see current ones and classmates contact information.<br><br>There would also be an association newsletter archive, a memories page where paid members could submit photos, a calendar of events, and group page where alumni could join groups with others of similar interest, such as Band Members, Athletes, etc.<br><br><strong>Role:</strong> Designer + Front-End Developer<br><br><strong>Tools:</strong> Pen & Paper, Sketch, Invision</h5><a class=btn-green href=https://invis.io/AEOBD6PYSPR target=_blank>View Wireframe</a><hr class=uk-divider-icon><h4><strong>Discovery</strong></h4><h5>After our initial consultation where the client and I discussed the app’s requirements and what he and his client hoped to accomplish with the project, I began sketching ideas.<br><br>Persona<br>The persona was particularly important for this project, because all of the users met very specific criteria. They would all be of the baby boomer era, which meant a majority of them would have limited experience with modern web technologies/interactions and some might have trouble seeing funky fonts or small text.<br><br>Here is a persona I hand wrote and continually returned to review during the design process. Since I’m the only designer I didn’t think it was a valuable use of my time to design a fancy persona in sketch, but the exercise of writing it was extremely helpful.</h5><img src=projects/persona_sketch.jpg alt="Persona Sketch"><h5>I think some designers my age might have taken an app designed specifically for baby boomers and attempted to create something bland with huge fonts and no flair. I didn’t want to do that. I had an amazing relationship with my grandparents, and my grandpa was actually pretty computer savvy, as would be some of the users- so I wanted to design something easy to use- but fun. The more fun the users had, the more likely there were to buy a membership as well!<br><br>So I started designing just the yearbook listing, this way I could give the client options and then design the rest of the app based on which design he preferred. The movie reel was my favorite. I think it complemented the era of photos it would house, and would remind users of the days in which the photos were taken. In the end, the client preferred the simpler version with navigation that was less styled and photos with a clean white background.</h5><div class="uk-position-relative uk-visible-toggle uk-dark uk-width-1-1" uk-slideshow="min-height: 800"><ul class=uk-slideshow-items><li><img src=projects/yb_movie_option.png alt="Yearbook Design, Movie Option"><li><img src=projects/yb_simple.png alt="Yearbook Design, Simple Option"><li><img src=projects/yb_alt_simple_details.png alt="Yearbook Design, Simple Option with Details Open"></ul><a class="uk-position-center-left uk-slidenav-large uk-hidden-hover" href=# uk-slidenav-previous uk-slideshow-item=previous></a> <a class="uk-position-center-right uk-slidenav-large uk-hidden-hover" href=# uk-slidenav-next uk-slideshow-item=next></a><div class="uk-position-center-left-out uk-position-small"><ul class="uk-dotnav uk-dotnav-vertical"><li uk-slideshow-item=0><a href=#>Item 1</a><li uk-slideshow-item=1><a href=#>Item 2</a><li uk-slideshow-item=2><a href=#>Item 3</a></ul></div></div><br><br><h5>When I felt I had two valid options for accomplishing the same task, I would go ahead and design both, planning to complete A/B testing at a later date. Below is an example of two login design options:</h5><div class="uk-position-relative uk-visible-toggle uk-dark" uk-slideshow="min-height: 600"><ul class=uk-slideshow-items><li><img src=projects/signup_option2.png><li><img src=projects/signup_option1.png></ul><a class="uk-position-center-left uk-slidenav-large uk-hidden-hover" href=# uk-slidenav-previous uk-slideshow-item=previous></a> <a class="uk-position-center-right uk-slidenav-large uk-hidden-hover" href=# uk-slidenav-next uk-slideshow-item=next></a><div class="uk-position-center-left-out uk-position-small"><ul class="uk-dotnav uk-dotnav-vertical"><li uk-slideshow-item=0><a href=#>Item 1</a><li uk-slideshow-item=1><a href=#>Item 2</a></ul></div></div><h5>Then once I had designed every major screen, I dug deeper. The challenge in designing a new application from scratch is making sure you account for all scenarios, such as errors and administrative tasks. Below are some examples of the those designs. There’s a separate navigation for Administrative users where they can manage membership access and settings for the application. I also designed an example of an email users might receive regarding their account.</h5><div class="uk-position-relative uk-visible-toggle uk-dark" uk-slideshow="min-height: 800"><ul class=uk-slideshow-items><li><img src=projects/admin_page.png><li><img src=projects/email_design.png></ul><a class="uk-position-center-left uk-slidenav-large uk-hidden-hover" href=# uk-slidenav-previous uk-slideshow-item=previous></a> <a class="uk-position-center-right uk-slidenav-large uk-hidden-hover" href=# uk-slidenav-next uk-slideshow-item=next></a><div class="uk-position-center-left-out uk-position-small"><ul class="uk-dotnav uk-dotnav-vertical"><li uk-slideshow-item=0><a href=#>Item 1</a><li uk-slideshow-item=1><a href=#>Item 2</a></ul></div></div><h5>Here is the final wireframe.</h5><a class=btn-green href=https://invis.io/AEOBD6PYSPR target=_blank>View Wireframe</a><div class="uk-alert-warning uk-padding" uk-alert><p><strong>NOTE:</strong> I completed this project in late 2019, if you'd like to see the live app please contact me and I can get you a username and password to the staging site, or access to the github repository. Thank you!</div></section></div>
<section id="contact">
<div class="uk-background-cover uk-height-large uk-padding" style="background-image: url(assets/contact.jpg);">
<div class="uk-flex-middle uk-flex-wrap" uk-grid>
<div class="uk-width-1-2 uk-visible@m" uk-scrollspy="cls: uk-animation-scale-up; repeat: true">
<h2 class="font-white">Contact Me</h2><a href="tel:812-946-1839" class="font-white font-small"><i class="fa fa-phone-square" aria-hidden="true"></i> (812) 946-1839</a>
<br>
<br><a href="mailto:ro@rodixondesigns.com" class="font-white font-small"><i class="fa fa-envelope-square" aria-hidden="true"></i> ro@rodixondesigns.com</a></div>
<div class="uk-width-1-1 uk-width-1-2@m" uk-scrollspy="cls: uk-animation-scale-down; repeat: true">
<div class="uk-hidden@m uk-text-center" uk-scrollspy="cls: uk-animation-scale-up; repeat: true">
<h2 class="font-white">Contact Me</h2>
<!--<p class="uk-text-small font-white"><a href="tel:812-946-1839" class="font-white font-small"><i class="fa fa-phone-square" aria-hidden="true"></i> (812) 946-1839</a> | <a href="mailto:ro@rodixondesigns.com" class="font-white font-small"><i class="fa fa-envelope-square" aria-hidden="true"></i> ro@rodixondesigns.com</a></p>-->
</div>
<form action="https://formspree.io/ro@rodixondesigns.com" method="POST">
<div class="uk-margin uk-width-1-1">
<br>
<br>
<label class="uk-form-label font-white" for="form-stacked-text"><i class="fa fa-user"></i> Full Name</label>
<input class="uk-input" type="text" name="name" placeholder="Enter name here">
</div>
<div class="uk-margin uk-width-1-1">
<label class="uk-form-label font-white" for="form-stacked-text"><i class="fa fa-at"></i> Email Address</label>
<input class="uk-input" type="email" name="_replyto" placeholder="Enter email here">
</div>
<div class="uk-margin uk-width-1-1">
<label class="uk-form-label font-white" for="form-stacked-text"><i class="fa fa-commenting"></i> Message</label>
<textarea class="uk-textarea" name="message" placeholder="Enter your message here"></textarea>
</div>
<button class="uk-border-rounded uk-align-left uk-button uk-button-default uk-button-small white" type="submit"> Send </button>
</form>
</div>
</div>
</div>
</section>
<section id="social" class="uk-padding uk-text-middle uk-text-center">
<h2 class="font-white uk-margin-right">Find Me Online</h2>
<div><a class="uk-padding" href="https://linkedin.com/in/ro-dixon-ux" target="_blank"><i class="fa fa-linkedin-square fa-3x font-white uk-margin-right" aria-hidden="true"></i></a><a class="uk-padding" href="https://medium.com/@rodixon30" target="_blank"><i class="fa fa-medium fa-3x font-white uk-margin-right" aria-hidden="true" ></i></a><a class="uk-padding" href="https://www.behance.net/ro_dixon" target="_blank"><i class="fa fa-behance-square fa-3x font-white uk-margin-right" aria-hidden="true"></i></a><a class="uk-padding" href="https://dribbble.com/rodixon30" target="_blank"><i class="fa fa-dribbble fa-3x font-white uk-margin-right" aria-hidden="true"></i></a></div>
</section>
<div id="offcanvas-nav" data-uk-offcanvas="flip: true; overlay: true">
<div class="uk-offcanvas-bar uk-offcanvas-bar-animation uk-offcanvas-slide dk-blue">
<button class="uk-offcanvas-close uk-close uk-icon" type="button" data-uk-close></button>
<ul class="uk-nav uk-nav-default">
<h2>Menu </h2>
<li><a class="lobster" href="index.html">Resume</a></li>
<li><a class="lobster" href="about.html">About</a></li>
<li><a class="lobster" href="work.html">Work</a></li></ul>
<div class="padding-50"></div>
<div><a href="https://drive.google.com/file/d/1u4UOCdeU8hJIn0t6guTrXeFWVfqW3bgi/view?usp=sharing" target="_blank" class="btn-white font-link-lt">Print Resume <i class="fa fa-external-link"></i></a></div>
</div>
</div>
</div>
<script src="uikit.min.js"></script><script src="uikit-icons.min.js"></script>
</body>
</html>