Key Concepts
Sketching, Wireframing, User Stories, Front-End Development, & Presentation Session
Group Members
Kathryn Brusewitz
Lisa Koss
Jason Peacher-Ton
Date
Oct. - Dec. 2016
Instructor
Joel Ross
Tools & Frameworks
Pencil, React.js, Firebase, Material Design Lite, CSS, HTML
Role
UX Designer & Developer
Overview
I worked as a UX designer and developer on a team with three other people to create an application called Bandit, which is a service designed to connect musicians to musicians in order to help them find their next gig, band, or collaboration breakthrough locally or worldwide. The application features a message board that allows musicians or bands to post or search through job listings along with a profile system that showcases each musician or band's skills and experience.
We aimed to help get rid of the uncertainty of searching ads on other websites, such as Craigslist, and create a hub only for musicians so talented musicians can find what they're looking without the hassle.
The PROBLEM
Current solutions like Craigslist are often troublesome because Craigslist doesn't verify who's posting a listing and whether that listing is legitimate due to a lack of user profiles and listing history. Additionally, sites such as Facebook have platforms that cater to many different types of users so they may not have a strong community of musicians in a musician's local area, causing them to miss out on opportunities that may be right down the street. Our solution would provide a platform of relevant and reliable information to its community of users so that they can be aware of musical opportunities in their area that could lead to their next big break.
USER STORIES
We then decided to think about our potential users, their goals, and any pain points they might encounter with the current platforms that they use. We concluded that potential users:
- Might be discouraged to contact job posters on unverifiable or unreliable websites
- Would like to compare skills and experience from interested musicians in a similar format
- Are looking for a strong community of musicians, but might be unsure where or how to find it
- Might not be comfortable reaching out to people they know personally on other social media platforms
We created a few user stories to help identify what our users want and why. Here is a sample of two user stories:
“As a drummer,
I want to search job listings that are looking for someone who plays the drums,
So I can become part of a band.
As a musician,
I would like to customize my profile with my skills, talents, and experience,
So I can have a better chance at booking that next job.”
SketchES
After identifying and exploring our user's needs and wants, we brainstormed features that our users would find useful in fulfilling their desires while simultaneously solving their pain points. All of us seemed to have a a similar idea of our ideal solution in our heads so we jotted down our ideas before coming up with the initial sketches and a basic UI design.
The persistent UI is simple: A logo will be present along with a navigation bar of tabs that include links to all of our identified components. Whether the user is using a mobile device or a larger device, such as a tablet or laptop, the UI will remain relatively the same. The only exception is in the mobile view these components will be displayed horizontally across the top of the screen while these components will be displayed vertically on larger screens, maximizing the use of space in both cases.
At the time of sketching, we decided that we wanted to include features such as a message board, a suggestions section, an inbox, and user profiles.
Early sketches of Bandit that show our initial ideas of how our features would look and interact with each other to achieve our user's goals.
Our group then designed what some of the contextual content would look like. We initially thought the posts should be condensed into small table rows with a search bar at the top for easy searching and reading, which would be similar to the inbox design. We also wanted to include a button so a user could message another musician from the post directly.
For the suggestions page, we thought it would be ideal to use cards to represent the suggestions for a user, based on their skills and experience, so they could briefly see what the post was about before viewing more details about it. We also wanted to include some sort of profile system so users can see what other listings a musician has posted while also being able to manage their account preferences.
Wireframes
When we started wireframing, we modified our initial UI design quite a bit because we knew that we would be using Material Design Lite as our design framework at this point. As a result, we kept in mind Material Design's style when mocking up the components in each wireframe seen below.
Home
For the home page, we wanted the search feature to be prominent, by being front and center, because it's one of the most important features within our application. The search, along with viewing the message board directly, it how we aim to connect musicians to one another so it should be one of the first things that users see when using our website.
To further increase the user experience of our application, we also decided to re-design how Bandit's navigation looks. In our previous sketches, we wanted to use icons to represent each tab, but in retrospect, it makes more sense to use words only or a combination of icons and words. However, to stick with typical web design standards, we went with words only in a sticky navigation bar that is horizontal, and not vertical for both mobile and web views. This way, no matter what part of the screen a user is on or what device that they're using, the navigation will always be visible.
The home page of Bandit that shows many different kinds of UX design choices that we made: a sticky, horizontal navigation header for quick access and only a few elements on the front page in order to draw attention to one of the most important features — the search.
Listing Board
As a team, we also decided to show all of the posts by users in a card format so users could quickly browse the message board without being overwhelmed by a lot of information coming from one post. Each post would include a title and a short description, along with who posted it, so users can make informed decisions if they want to read the post further or bookmark it for later.
The manage posts section has a similar card format to mimic the message board. We thought this would streamline the user experience because users will already know how to interact with these cards because they are exactly the same and show almost the same information as they do on the message board. Any commands that a user needs are shown on the card itself for ease of access.
Initial message board wireframe.
Initial manage posts (posts by the user and bookmarked posts) wireframe.
Development
During the planning stages of development, we knew we would be using React.js in conjunction with Firebase (a no-SQL database) to store user data and perform user authentication. We chose React.js because it allows you to componentize blocks of code so all four of us could develop separate pieces of Bandit without worrying about how they would integrate together since they would integrate flawlessly as long as each component worked properly on it's own. Additionally, we choose Firebase because it handles user authentication without any back-end code from any of us, shortening what we had to code while maximizing security since Firebase (aka Google) would be handling it on their end only.
Below are the finished interface designs that are also fully developed and functional. All of us designed them using the Material Design Lite framework to maintain consistency across all screens while adhering to the same web standards that Google does.
We designed an experience for musicians that is reliable while exemplifying a strong community platform.
Home & Navigation
Home page. Here, the search is now a button rather than a search bar.
Drawer navigation that is accessible from all pages.
When we actually started developing and interacting with our design, we found out that our initially designed navigation and search bar weren't very effective at communicating what we wanted to so we modified the design. First, we added a hamburger menu so users could quickly access secondary links, such as edit profile, create a listing, or recent listings, quickly without having to perform extra clicks, no matter where they were in the website hierarchy.
Search
Instead of the search bar being on the home page directly, we have an entire page dedicated to the search so results could show up on the page dynamically as the user types. By giving the user instant feedback, they can modify their search parameters as necessary to find what they're looking for.
The search feature has it's own page so the results can be dynamically updated as the user types.
Profiles
The profile pages allow musicians to share their experience to help build a strong community of talent and skill. By having a profile system, users who post listings can increase their reliability by filling it out to provide detail about themselves. Profiles even give an insight into what kind of listings they have posted in the past so other musicians can gauge whether this person is someone who they can trust. A listing owner can also compare interested musicians by viewing their profiles to learn about the same kind of information in a similar format.
Profile pages showcases a user's skills, experience, and more.
Profiles can be easily updated in a single place; the about and experience sections also safely allow HTML styling.
Listing Board
The listing board is very similar to how we mocked it up in our earlier wireframes, using the card motif allows users to quickly browse lots of information in a short period of time so they can find what they're looking for.
However, for the my recent listings page, we determined that showing the user's recent listings in a row format was a more effective re-use of code because this format also showed up on the user profiles. By avoiding the cards in this case, users can quickly scroll looking at the title and the tag of either wanted or offering before reading more details about each listing. Using the color red or green for wanted and offering respectively allows musicians to associate those colors with the meaning of the words, cutting down on the time required to thoroughly read each posting.
Using color to represent offering and wanted help users discern what the listing is about at first glance.
A recent listings page shows users what listings they've posted recently so they can quickly go back to them without searching.
Also, due to a time crunch, we scrapped the bookmark feature seen in the earlier wireframes because we determined that users can use the bookmark feature on their browser rather than via web application itself, giving us time to work on other features that didn't re-invent a feature that users already use.
Create a Listing
The create a listing page includes error checking for all required fields, informing the user if they have made a mistake in real-time as they type so they can fix the mistake promptly.
Only the most important fields are included in the form to ensure that listings can work for whatever a user is offering or looking for.
Individual Listing & comments
A listing page shows the most important information on the left, which includes the description of the listing as well as the job title and skill set that the poster is looking for. By making this area the largest, users will read this section before anything else. We also conveniently put a link to the poster's profile along with a link to the comments for that post to the right so users can access those areas as needed once they're done reading the post.
At this point, one of the developers on our team had problems implementing the inbox feature that we had planned. To remedy this complication, we decided to create a comment system instead so almost all communication on Bandit would be public to promote a stronger community so others could see how the listing owner interacts with others.
A sample listing on Bandit. If a user is interested, they can leave a comment on the post or view the poster's profile to get more information about them.
Having a comment system allows others to see answers to the same questions they might have, but also allows a musician to gauge how well that poster interacts with others.
reflection
Working on Bandit has given me a great insight into how fast a project can change based on whether what you designed or thought of can feasibly be coded with the skills of the developers on the team. Whenever we ran into a roadblock, we had to go back to the drawing board to reiterate on the idea and think about the user flow again that we wanted our user to experience while using our application. When we made a trade off to develop a new design, we had to made sure that the new design was just as good as the last one, whether it was for the same reasons or not. This way, we could ensure that our team could give our users the best experience possible so they would want to continuously use our application.