CompanyCam: Project Notes

Overview

CompanyCam projects have a project note feature to allow users/companies to add additional information/context to a project. Once they discover it, users find it helpful to use for a broad range of things. We want to make it more visible and accessible so more users can take advantage of it.

Jump to:

Discovery & Concept

This is the most crucial phase of any project. The information uncovered here will influence the decisions made later on in the project, so it is of the utmost importance to give it the proper attention.

1. Pen & Paper

I started with (digital) pen and paper, writing down notes and categorizing as I went. First came a smattering of my initial thoughts after reading the prompt, and then I continued to ideate, considering the business needs, the user perspective, and feature functionality. The most important idea that came out of this brainstorm was the possibility of multiple project notes.

2. Business Perspective

There are many clear advantages to the business that might come out of redesigning the project notes feature. Beyond the obvious pro of providing a more robust and flexible app to CompanyCam users, a revamped project notes feature has the potential to serve needs we were previously unaware of and help sharpen the business's competitive edge.

3. User Experience

I spoke with my friend Robin, who has spent the past few years buying and renovating houses, about the project notes feature in CompanyCam. She was thrilled to discover the app, but after playing with it for a couple of minutes, she pointed out that a project-based app like this sorely needs a to-do list feature.


Although a single interview is not ideal, Robin gave me some food for thought and I let my brain run on from there.

Process

This section describes the process I underwent on my way to the finished product in section 3. I generally adhere to the following method, with a few diversions here and there: discovery & concept → problem definition → sketches & wireframes → hi-fi design → code.

1. Problem Definition

After I organized my notes, I felt confident in defining the problem I would solve with my design:



CompanyCam Project Notes lack discoverability and the varied utility of the feature is lost on many of our users. Additionally, a single project note may not be the best solution for our users that need to store multiple discrete chunks of metadata concerning their project.

2. Sketches

By this point, I had a pretty good idea of what my solution might look like; I grabbed some scraps of paper and began to draw.

3. Design & Code

With the wireframes confirming the viability of my approach, I went ahead and began to mock up the screens that would inform my layout code. You can see the finished products below!

Product

The finished product! In this section you'll see my design prototype, the HTML & CSS layout code, and my attempt at building the app in React.

1. Design Prototype

I created my design in InVision Studio, a robust screen design and animation tool.


VIEW INVISION PROTOTYPE

2. HTML & CSS

HTML & CSS

The phones you see in this section are coded directly onto the page. Feel free to inspect around, or check out my github for the code.



View on Github
close
star share more_horiz
My Cool Project
321 Cool Ave • Lincoln, NE 6806
Active
label Labels
turned_in

Tools Checkout
Check the box if you're using it, uncheck when you've returned it to its station.

chevron_right
Photos (6)
Notes (5)
Docs (3)
more_horiz turned_in

Tools Checkout

Check the box if you're using it, uncheck when you've returned it to its station.

more_horiz turned_in_not

Contacts

Homeowner: Carol 303-535-3241
Foreman: Ned 303-241-7467

more_horiz turned_in_not

Week 6.8.20 Schedule

Refer to this note to find out when you'll be working on this project. Ned can answer any questions.

more_horiz turned_in_not

Week 6.1.20 Schedule

Refer to this note to find out when you'll be working on this project. Ned can answer any questions.

more_horiz turned_in_not

Week 5.24.20 Schedule

Refer to this note to find out when you'll be working on this project. Ned can answer any questions.

NT
Nicholas Tobat  •  4 days ago
Thanks all for your time and patience, we are going to figure this out no problem
chat_bubble
add
tune
close
star share more_horiz
My Cool Project
321 Cool Ave • Lincoln, NE 6806
Active
label Labels
turned_in

Tools Checkout
Check the box if you're using it, uncheck when you've returned it to its station.

chevron_right
Photos (6)
Notes (5)
Docs (3)
more_horiz turned_in

Tools Checkout

Check the box if you're using it, uncheck when you've returned it to its station.

more_horiz turned_in_not

Contacts

Homeowner: Carol 303-535-3241
Foreman: Ned 303-241-7467

more_horiz turned_in_not

Week 6.8.20 Schedule

Refer to this note to find out when you'll be working on this project. Ned can answer any questions.

NT
Nicholas Tobat  •  4 days ago
Thanks all for your time and patience, we are going to figure this out no problem
chat_bubble
add
tune
close

Note Options

edit

Edit Note

send

Share Note

delete

Delete Note

Created by Nicholas Tobat 06/28/2020  •  Modified 06/28/2020

close

Project Note

Save

This is an important note. I better write it down.

check_box

Do this task

check_box_outline_blank

And also this!

format_bold format_italic link library_add_check format_list_bulleted format_list_numbered

3. React

I am, admittedly, fairly new to the React framework. Below is my attempt to bring my design to life with code; it certainly wasn't 100% successful, but it was an excellent exercise in learning React concepts and getting used to the ecosystem. If I was to spend more time on this, I would likely extract components into their own files and set up an external Sass stylesheet.

That's all, folks!