A project for Cornell University course CS 5150: Software Engineering. Working with real client, we are built a platform for people to connect to projects relevant to their interests. The idea is to match skills/talents with projects rather than jobs or organizations. The client intended to take our end-of-semester project and use it as a jumping off point for further development into a launchable product.
The Starting Point
We began with an Invisio mock-up of what the client's invisioned and were using to present their idea.
They expressed a strong interest in a thoguhtful and intentional user experiece, but admitted to little experience in the area. Thus, they were very open to use re-evaluating their initial design. They were intersted in keeping the color scheme and logo.
First Steps
Day 1 - Day 10 - Day 100
We considered what would bring someone to CoProject, what would make them return, and what would keep them returning. In storyboard form, we fleshed out the interactions likely to be most useful and salient.
Day 1 - Day 10 - Day 100
We considered what would bring someone to CoProject, what would make them return, and what would keep them returning. In storyboard form, we fleshed out the interactions likely to be most useful and salient.
The Users
Identifying the Users
We then began with some ideation around who different users of the site might be. We landed upon seekers/joiners (those looking for projects - students, faculty, new graduate, etc), (those posting projects - student leaders, start ups, project teams, faculty, etc), and explorers (those who are browsing - parents, students, employeers, enthusiasts).
Defining to the Users
Splitting up among our team, we each tackled user personas and user stories. An example is below.
Revision - Users Stories, Take 2
After meeting with our client and identifying some holes in our user stories, we modified the story and drew associated wireframes (at a high, layout level). The yellow boxes in the mockups correspond to clickable areas and the orange outlines highlight the story progression.
1. Will follows a link from his RA in an email about good resources for getting involved.
2. Will lands on the homepage and pokes around to gauge the usefulness. Finding it pleasing, he decides to do his own search.
3. He types "music in Ithaca" and hits Enter to search. He lands on the results page.
4. Interested by the plus-sign on the end of the search bar, Will clicks it to expand the search options.
5. Wishing ot find geographically accessible projects, Will clikcs the "near Me" checkbox. He is met with a sign up/sign in prompt (because geography would be based on stored data).
6. Will decided to register. He clicks "Sign Up."
7. He fills out the brief form and clicks "Next."
8. Pleased to see the dialog address him personally, Will provides the last bit of information and clicks "Done" to dismiss the prompt.
9. Back on the resutls page, but now signed in, the "Near Me" box has been checked, and Will is satisfied with the criteria so he clicks "Ok" to collapse the options.
10. This triggers a change in the search results based on his filters. Based on the title and description of the first item, Will decides he is interested and clicks the Favorite button.
11. The icon changes to reflect the action.
12. Will looks at the next result, but doesnt find the description very informative, so he opens the project page.
13. He peruses the page and discovers some illustrative information as well as upcoming events - including a meet-and-greet. Intrigued, he wants to share the page with his friend who might also be itnerestsed in attending.
14. Having found the "Share" button, Will types up a quick message before sending the page to his friend Alex.
Wireframing
Taking the user stories and feedback from our client, we moved into the wireframe stage. We created wireframes in Balsamiq, ultimately crafting a clickable mockup.
Using the following user testing script and the clickable wireframes (downloadable here), we evaluated our design through conversations and observations of ten students.
Script
Hello _______, my name is ______________, and I’m going to guide you through this quick session today. Before we begin, though, I’ll give you a short explanation of what we are trying to accomplish.
We are in the process of developing a website. It is in its middle stages, and as such is not fully functional. There may be buttons that do not do anything or pages that have filler content. Try not to be deterred by this, and simply provide feedback on what we show you and understand that this is not the final project. We will be showing you what are called “wireframes” which are a low fidelity version of the final design. Wireframes do not have colors or finalized icons, but the gist and feel should be there.
We would like to see if it works as we intend. In addition, we would like to understand what you really like and dislike about our website. We are going to be asking you quite a few questions along the way. But keep in mind, we are testing the website, not you. There are no wrong answers; just answer how you honestly feel.
As you use the website and follow our guidelines, please talk out loud. Tell us what you’re looking at, trying to find, and anything else crossing your mind. If at any point you have any questions, feel free to ask them. Again, this is not a test of you, it is a test of our system. If you are confused, that is our fault, not yours!
Any questions so far?
----------------------------------------------------------------------------------------------------------------------------
Just for some background purposes can you please tell me...
...your major/profession?
...approximately how many hours per day do you spend on the internet? What’s the split between email and web browsing?
...what types of websites do you typically visit? Do you have any favorite websites?
----------------------------------------------------------------------------------------------------------------------------
Allow user to see the CoProject homepage.
Take a quick look at this page, and tell me what you think about it. What are your first impressions? What stands out? What do you think is the purpose of this particular website?
----------------------------------------------------------------------------------------------------------------------------
The following are a series of tasks that you should try to complete. They are not intended to be tricky, but they are purposely open-ended so that you have room to explore and we can follow your thought process. Remember, there are no wrong answers!
[You can answer their questions and help them along, but do not “suggest” buttons until they have exhaustively searched or give up].
1. Explore the home page and tell me your thoughts.
2. Log In.
3. Add a media update to your page. [media buttons aren’t clickable, but as long as they recognize their presence and click “Post” it’s ok]
4. Update your degree on your profile and change your personal tagline. [essentially just need to click the “Edit Profile” and then “Save Changes” as the fields are not interactable]
5. Create a new project. [accomplishment criteria: find the button to create new project]
6. Search for projects in the music industry.
----------------------------------------------------------------------------------------------------------------------------
What overall impressions do you have of the site? Is there anything you’d like to share about your impressions or things you found particularly bad or good?
Thank you very much for your time. We will be compiling user testing feedback in order to improve over our next iteration. There will be future rounds of testing before the final product is reached.
Do you have any questions?
The Results
The testing revealed a few areas that needed further refinement. Specifically,
-Although the pages were easy for most users to navigate, the overall purpose of the website was unclear. Many users were quoted saying, “What is a co-project? A co-op?” or that the website could use a succinct, descriptive tagline to inform users.
-Some users had difficulty finding media update buttons from the homepage.
With this in mind, we iterated on the wireframes and our second set (downloadable here) were used to begin the actual execution of the website.
Flow of Interactions
Using input from testing, clients, and personal knowledge, we developed the following flow to be implemented in our design.
What We Produced
We completed the building phase in conjunction with the backend team. The frontend team who collaborated on the design ideation completed the layout, CSS, HTML, and Javascript interactions.
Some screenshots can be seen below, of the basic live prototype. This was a first version prototype that our client used to move forward after the project wrapped up.
