Skip to content

Commit

Permalink
cleaned up some formatting issues
Browse files Browse the repository at this point in the history
  • Loading branch information
@amaelena
amaelena authored Jul 21, 2019
1 parent bb84ba2 commit 82b940d
Show file tree
Hide file tree
Showing 4 changed files with 59 additions and 53 deletions.
34 changes: 4 additions & 30 deletions careconnect_prototype.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,44 +84,18 @@ <h2>Prototyping</h2>
<div class="project-section">
<h2>Digital Prototype</h2>
<p>After testing my revised paper prototype again with peers and caregivers, I created my digital prototype. Based on my personas, I identified the need for a tailored experience within the app. My users would receive the most benefit from being able to meet other caregivers facing similar challenges, so I gave users the option to input information about their individual situations during account setup. To build community, I provided users with the flexibility to search for groups by mile radius. I also streamlined the account setup process and incorporated a tutorial after considering user feedback.</p>
<br />
<p>See below for a few screenshots of my digital prototype.</p>
<a href="https://xd.adobe.com/view/ac9f8af4-27d6-4dd5-5f14-f4246e078018-daae/" target="_blank" class="button">View Interactive Prototype</a>
</div>
<a href="https://xd.adobe.com/view/ac9f8af4-27d6-4dd5-5f14-f4246e078018-daae/" target="_blank" class="button">View Interactive Prototype</a>
<!-- <div class="slideshow-container">
<img class="mySlides" src="imgs/careconnect_screen1.png" alt="CareConnect Log in Screen">
<img class="mySlides" src="imgs/careconnect_screen2.png" alt="CareConnect Create New Account">
<img class="mySlides" src="imgs/careconnect_screen3.png" alt="CareConnect Begin Onboarding">
<img class="mySlides" src="imgs/careconnect_screen4.png" alt="CareConnect Onboarding Page 2">
<img class="mySlides" src="imgs/careconnect_screen5.png" alt="CareConnect HomePage">
<img class="mySlides" src="imgs/careconnect_screen6.png" alt="CareConnect Groups Page">
<img class="mySlides" src="imgs/careconnect_screen7.png" alt="CareConnect Walking Buddies Page">
<img class="mySlides" src="imgs/careconnect_screen8.png" alt="CareConnect Create Group Screen">
<div>
<a class="previous" onclick="nextSlide(-1)">&#10094;</a>
<a class="next" onclick="nextSlide(1)">&#10095;</a>
</div>
<div class="dot-container">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
<span class="dot" onclick="currentSlide(4)"></span>
<span class="dot" onclick="currentSlide(5)"></span>
<span class="dot" onclick="currentSlide(6)"></span>
<span class="dot" onclick="currentSlide(7)"></span>
<span class="dot" onclick="currentSlide(8)"></span>
</div>
</div> -->
<div class="project-section">
<div class="sidebyside">
<div class="sidebyside_imgleft">
<img src="imgs/careconnect_phones.png" alt="Careconnect phone screens"/>
<p>When first setting up the app, users can input information about their unique situations so that the app can tailor its suggestions and provide a personalized experience.</p>
</div>
<div class="sidebyside">
<div class="sidebyside_imgright">
<p>After initial setup, the user is taken to the home screen, where tailored recommendations are displayed at the top. There is an option to search by keyword or mile radius, and groups that aren't in the top row of recommendations are sorted by mile radius. Emphasizing groups that are close to home helps to build community locally and makes it easier for users to participate. </p>
<img src="imgs/phone1.jpg" alt="Careconnect phone screens"/>
</div>
<div class="sidebyside">
<div class="sidebyside_imgleft">
<img src="imgs/phone2.jpg" alt="Careconnect phone screens"/>
<p>Choosing a group from the home screen takes the user to a details view. All groups have information regarding accessibility accommodations. This decision was made based on comments from caregivers that it can be difficult to find social activities that accommodate these needs. Additionally, group creators have the option to cap groups. A smaller group size encourages participation, thereby building community and a supportive network.</p>
</div>
Expand Down
56 changes: 45 additions & 11 deletions css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -168,12 +168,13 @@ ul {
}

a.button {
-webkit-appearance: button;
/* -webkit-appearance: button;
-moz-appearance: button;
appearance: button;
appearance: button; */
text-decoration: none;
text-align: center;
color: initial;
border: 2px solid #7c6c7a;
padding: .8em .8em .8em .8em;
font-family: 'Open Sans', sans-serif;
text-transform: uppercase;
Expand All @@ -184,6 +185,11 @@ a.button {
width:80%;
margin: 0 auto;
}
a.button:hover{
background-color: #7c6c7a;
transition: 0.3s;
color: white;
}
.gallery_container{
display: flex;
flex-wrap: wrap;
Expand Down Expand Up @@ -300,16 +306,19 @@ a.button {
margin-right: auto;
}
.project-section {
padding-bottom: 3.5rem;
padding-bottom: 3rem;
}
.project-section img{
display: block;
margin-left: auto;
margin-right: auto;
padding-top: 2rem;
padding-bottom: 2rem;
}
.project-section p{
padding-bottom: 1rem;
padding-bottom: 2rem;
}
.project-section ul{
padding-bottom: 2rem;
}
.project-section h2{
position: relative;
Expand Down Expand Up @@ -459,21 +468,40 @@ header {
position: relative;
padding-top: 30px;
}
.sidebyside{
.sidebyside_imgleft{
display: flex;
flex-direction: row;
flex-wrap:wrap;
justify-content: space-between;
align-items: center;
}

.sidebyside img{
.sidebyside_imgleft img{
display: flex;
align-self: flex-start;
max-height: 100%;
padding-bottom: 30px;
}

.sidebyside p{
.sidebyside_imgleft p{
height: 100%;
}
.sidebyside_imgright{
display: flex;
flex-direction: row;
flex-wrap: wrap-reverse;
justify-content: space-between;
align-items: center;
}

.sidebyside_imgright img{
display: flex;
align-self: flex-start;
max-height: 100%;
padding-bottom: 30px;
}

.sidebyside_imgright p{
height: 100%;
}
}
Expand Down Expand Up @@ -686,15 +714,21 @@ footer {
.about-text{
margin-left: 2rem;
}
.sidebyside{
.sidebyside_imgleft, .sidebyside_imgright{
flex-wrap: nowrap;
}
.sidebyside img {
.sidebyside_imgleft img {
max-width: 40%;
}
.sidebyside p {
.sidebyside_imgright img{
max-width: 40%;
}
.sidebyside_imgleft p {
margin-left: 2rem;
}
.sidebyside_imgright p{
margin-right: 2rem;
}
.index_container{
flex-wrap: nowrap;
}
Expand Down
10 changes: 5 additions & 5 deletions fares.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,13 +63,13 @@ <h2>Overview</h2>
</div>
<div class="project-section">
<h2>Task Diagramming</h2>
<p>Before diving into the redesign of the workflow, with my team, I created a task diagram to understand how people in different job roles interact with the software. Fare analysts (the primary users) use PROS software to investigate fare pricing changes and ensure that flights are priced appropriately. Administrators use the software less frequently, only entering the system every couple months for approval purposes or editing data in the database.</p><br>
<p>Before diving into the redesign of the workflow, with my team, I created a task diagram to understand how people in different job roles interact with the software. Fare analysts (the primary users) use PROS software to investigate fare pricing changes and ensure that flights are priced appropriately. Administrators use the software less frequently, only entering the system every couple months for approval purposes or editing data in the database.</p>
<p>Through this task diagramming exercise, it became obvious which screens were the most vital to each role's job functions. My team and I worked together to determine areas where we may be able to simplify the workflow.</p>
<img src="imgs/task_diagram.png" alt="task diagram">
</div>
<div class="project-section">
<h2>Identifying Pain Points</h2>
<p>Before I arrived at my internship, my teammates conducted the first round of interviews with proxies for our customers (customer success managers who frequently received direct feedback on the product). I listened to all the interviews to pull out key themes and pain points. My team analyzed our collective notes and perceptions of what the most urgent problems were within the system. We determined that the following issues were essential to address within our prototype before testing:</p><br>
<p>Before I arrived at my internship, my teammates conducted the first round of interviews with proxies for our customers (customer success managers who frequently received direct feedback on the product). I listened to all the interviews to pull out key themes and pain points. My team analyzed our collective notes and perceptions of what the most urgent problems were within the system. We determined that the following issues were essential to address within our prototype before testing:</p>
<ul>
<li>The existing workflow requires <strong>significant jumping between screens</strong> for analysts to investigate fares. While analysts are able to view all the information that they need at a glance within a modal, they can't make any adjustments without navigating to several other separate pages.</li>
<li><strong>Fare analysts lose context when moving between tabs.</strong> In the existing modal containing four tabs with detailed fare information, the basic fare information is not visible except within the first tab. Losing context is annoying to users and causes the need to repeat steps.</li>
Expand All @@ -79,15 +79,15 @@ <h2>Identifying Pain Points</h2>
<div class="project-section">
<h2>Paper Prototyping</h2>
<p>My team worked together to sketch solutions and determine the most efficient pathway during design sessions. Once we had come up with a revised workflow, I created a paper prototype that incorporated these changes. We were able to show this prototype to the product manager and make adjustments before moving into high-fidelity prototyping. Pictured below are a few samples from the paper prototype.</p>
<div class="sidebyside">
<div class="sidebyside_imgleft">
<img src="imgs/fare_details.png" alt="fare details modal">
<p>Fare details replaces the bottom half of the screen in the new workflow, giving the user more space to view data. Empty tables do not appear, reducing visual clutter, and a summary at the top helps the analyst to retain context during investigation.</p>
</div>
<div class="sidebyside">
<div class="sidebyside_imgright">
<p>The analyst can view influences applied to the fare to help determine why the fare has triggered an alert.</p>
<img src="imgs/influences.png" alt="influences screen sketch">
</div>
<div class="sidebyside">
<div class="sidebyside_imgleft">
<img src="imgs/new_influence.png" alt="new influence">
<p>Based on the results of fare investigation, the analyst can influence the fare directly from the Influences screen. This removes several steps in comparison to the old workflow.</p>
</div>
Expand Down
12 changes: 5 additions & 7 deletions university_consulting.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,37 +60,35 @@ <h2>Overview</h2>
</div>
<div class="project-section">
<h2>Process</h2>
<p>My team conducted a series of interviews with several offices on campus to learn about the differences in course description creation and management. I conducted interviews and took notes for my teammates when they were interviewing. My team met after each interview to go over the key takeaways from the sessions.</p><br>
<p>My team conducted a series of interviews with several offices on campus to learn about the differences in course description creation and management. I conducted interviews and took notes for my teammates when they were interviewing. My team met after each interview to go over the key takeaways from the sessions.</p>
<p>Based on our notes from these debrief sessions, my team constructed an <strong>affinity wall</strong> to determine our interviewees' main paint points and common threads within the interview data. We grouped quotes and observations that we had collected throughout the semester into a hierarchy. We then created a second level to our hierarchy to determine overarching themes within our data.</p>
<img src="imgs/index_photo4.jpg" alt="Affinity Wall">
</div>
<div class="project-section">
<h2>Findings</h2>
<p>From the affinity wall exercise, we discovered that there were three key themes that consistently appeared across our interviews.</p><br><br><br>
<p>From the affinity wall exercise, we discovered that there were three key themes that consistently appeared across our interviews.</p>
<blockquote>"That sounds cool! I'd be interested in learning more about that."</blockquote><br>
<p><strong>Communication breakdown</strong> between our client's office and individual colleges led to <strong>confusion and lack of awareness</strong> regarding the data visualization tool. Despite the fact that the tool was a University-wide initiative to bring transparency to course evaluation data, the representatives from smaller colleges that we spoke with had never heard of it. However, several interviewees expressed interest in getting more information about this tool so that it could be shared with their students.</p><br><br><br>
<p><strong>Communication breakdown</strong> between our client's office and individual colleges led to <strong>confusion and lack of awareness</strong> regarding the data visualization tool. Despite the fact that the tool was a University-wide initiative to bring transparency to course evaluation data, the representatives from smaller colleges that we spoke with had never heard of it. However, several interviewees expressed interest in getting more information about this tool so that it could be shared with their students.</p>
<blockquote>"It would be great if we could input our data digitally and avoid all the human error from manual entry."</blockquote><br>
<p><strong>Lack of a centralized workflow</strong> to process course information impeded collaboration across campus offices. Each college had its own workflow for sending information to the central registrar. Some of this process was done with paper forms and needed to be entered into the database manually, meaning that an extensive QA process took place afterwards to ensure course description accuracy.</p><br><br><br>
<p><strong>Lack of a centralized workflow</strong> to process course information impeded collaboration across campus offices. Each college had its own workflow for sending information to the central registrar. Some of this process was done with paper forms and needed to be entered into the database manually, meaning that an extensive QA process took place afterwards to ensure course description accuracy.</p>
<blockquote>"Well, right now it's held together with rubber bands and sealing wax."</blockquote><br>
<p>There were <strong>technical constraints</strong> due to massive amounts of course data housed by different campus offices. Some colleges had shadow databases with extra course information, and the process to sync this data with the University's central database would be quite extensive. The central database had been around for a long time and had amassed an enormous amount of information. While there were plans in place to update its structure, this was not an easy endeavor.</p>
</div>
<div class="project-section">
<h2>Solution</h2>
<p>My team brainstormed and sought feedback from classmates and instructors on our solutions. The ideas we proposed to our client included:</p>
<br />
<ul>
<li>Regular all-hands meeting to improve communication between departments</li>
<li>Collaboration between our client and the University IT department to revamp the course information form, allowing professors and administrators to enter complete information and eliminating the need for shadow databases</li>
<li>Working with the IT team to sync existing shadow databases with the data visualization tool</li>
</ul>
<br><p>The culmination of this semester-long endeavor included a final report and presentation analyzing the key themes we had uncovered during the interview process and offering solutions.</p>
<p>The culmination of this semester-long endeavor included a final report and presentation analyzing the key themes we had uncovered during the interview process and offering solutions.</p>
<img src="imgs/client_presentation.jpg" alt="LSA databases slide">
<p><i>Many thanks to my teammate <a href="http://zachzeng.com/index.html">Yizhou</a> for creating such outstanding graphics for our client presentation.</i></p>
</div>
<div class="project-section">
<h2>Discussion</h2>
<p>Overall, my team had a great experience working with our client and learning more about the ins and outs of University administration. A few key takeaways:</p>
<br />
<ul>
<li>Our team encountered a learning curve as far as figuring out how to balance constraints (class requirements) and client expectations. What our client needed did not line up with the typical schedule and process that had been provided by our instructors. Through consistent communication with both clients and instructional staff, our team was able to adjust on the fly and provide useful solutions. While this ended up being a bit more up-front work, this project was a useful exercise in creatively working around constraints.</li>
<li>We presented our findings and solutions to classmates, instructors, and clients. While the information conveyed was essentially the same for each group, the delivery differed significantly. I learned a great deal about “knowing my audience” and presenting information in a format that made sense for each group. While creating several versions of each presentation took some time, I believe that a tailored approach to presenting sparked more thoughtful discussion than if we had not thoughtfully considered our audience’s needs.</li>
Expand Down

0 comments on commit 82b940d

Please sign in to comment.