we are
Team Rising Edge
Zaid Elkurdi, Brian Vu, Max Catozzi, Hongda Xiao, Tong Lee, Nick Campbell
Welcome to the Medium blog of Team Rising Edge! Here we’ll keep track of our design and creation processes as we create the next great internet brand.
Week 1: Idea Creation & Logo Design
Written By: Nick Campbell
Because everyone in our group is in the CSE Department, we landed on the name “Rising Edge” — a play on processor clocks. We decided on a music-based project bringing audiences the artists on the rise and cutting edge music. Our first goals were creating logos and initializing a brand for our project.
To start, everyone on the team drew and digitally polished several logo ideas related to the themes of music and our name. Members of the team came up with at least three different designs, from which we chose the collective favorites to continue polishing and professionalizing.
While brainstorming our designs and starting the initial process, we learned about color, value, hue, and different design principles related to logo creation. After the first sketches, we picked our favorite logos, and started work on creating our first branding elements!
At last, we finally settled on the logo to represent our website:
With this, we are well on our way to creating a cohesive brand for Rising Edge!
Moving forward, we need to focus on need-finding for our project. We have been brainstorming ideas for the direction the project will take, and have settled on some very exciting concepts such as facilitating new artists looking for a larger audience, helping venues book up-and-comers with enthusiastic followings, and allowing users to create playlists to share with friends. The three topics we want to focus on are:
Music Discovery
We aim to enable our users to discover new music that they are actually interested in, and not just a random assortment of played-out songs or barely-tangentially-related tunes. We want to tailor the listening experience to the users preferences while simultaneously expanding their libraries.
Cult-Building
We also want to assist artists in finding new listeners — what we affectionately call “cult-building”. As music fans, we really just want to help talented musicians create cult followings, and get the recognition they deserve!
Show Planning
We think it would be great to bring the music business into the twenty-first century, so we are also exploring the concept of linking artists to venues. In other words, we would love to find a way to not only show musicians new gigs in their area, but also allow venues to reach out to performers they love who are garnering buzz.
We are definitely excited at the endless possibilities, and can’t wait to continue the need-finding process and narrowing down our vision for the project!
Week 2: Needfinding — On The Rise…
Written by: Brian Vu
Putting our Brains Together
Sitting down together, we began to brainstorm on the various types of audiences our website would attract. Bouncing around from recreational listeners to hardcore bands and record labels, we finally narrowed our audiences down to three definitive categories:
Venues would include any such location that would want to reach out to artists such as concerts, clubs, bars, or even miscellaneous events such as a birthday party. Using our website, venues will be able to reach out to any artist they like to perform at their event.
Furthermore, our website’s function would also focus on catering to bands who are on the lookout for recruiting new members or vice versa. Not only would we aim to attract such a crowd, we would also emphasize on helping bands gain recognition for themselves as well.
Lastly, we decided to fit the rest of the non-artists/venue audience under one single umbrella labeled “Listeners”. We strive to be fully inclusive of our audiences and therefore, want to create an environment on our website where all of these categories can feed off of each other’s need and as a result, grow as a community.
With this, we formed our perfect trifecta.
“What would the audience like?”
The key to finding out what our audiences want doesn’t solely rest on a group of six guys trying to brainstorm ideas. It is important that we not only observe our audience’s needs but also to walk in their shoes and assume the role of the subject. What would it be like if I were a dive bar manager one day looking to spice up my venue with some music? With this thought in mind, we concocted a list of questions aimed at finding out how our audiences think with the help of Google Forms:
We directed our surveys at a variety of people under the three groups we had and garnered quite a diverse result from all 39 of our interviews.
The input given by our interviewees helped us tremendously in finding out what our users need most from our website. With this plethora of information, we advance to our next phase.
Observing our Competition
In order to fully understand how to market our website and to rise to the top, we needed to do some competitive analysis of our main competitors in which we narrowed down and mapped out their key features and flaws:
Seizing the Opportunity
Upon mapping out all of our main competitors features, we arrived at a handful of limitations that these websites had. Determined to gain the competitive edge, we mulled over the thought of what we could do to improve on these limitations…
Thinking hard on what we can do to guide our website in the right direction, we made a list of improvements and ultimately set them to be our website’s identity and purpose.
Week 3: Personas & Storyboards — Coalescing Theme…
Written by: Tong Lee
Analyzing the customer’s needs
We took a team approach to finding out what our potential customers, music fans, artists/bands, and venues, thought was most important for our site. Sending out a survey that covered the questions we felt that were most important we started to build a picture of what features would be most successful and important to our future clients.
Using the data that we received from our survey responses we started to see that there were many sites which allowed people to listen to their favorite bands or artists. Sites such as Spotify, Pandora, and iTunes offers up ample choices in music genres. However, what we found surprising was that when it came to discovering new artists/bands word of mouth and YouTube were the biggest contributors. This helped build our initial hypothesis and ideas that even though sites like Spotify and Pandora were good places to listen to established artists it lacked the focus of helping music fans and artists would still relatively undiscovered. With this new confirmation and knowledge we started to narrow down our targeted audience and build upon the foundation we had already laid down.
Building the personas
Our survey concentrated on music lovers in general. Therefore our survey was specific enough to get the responses we needed while still being inclusive of all genders, ages, and backgrounds. In this way we could build a website that would appeal to a large audience and increase our potential customer pool. As we started pouring over our data three main personas started to emerge. Music fans, ardent music lovers who are always looking to find new artists and explore new music genres. Indie artists/bands who still building their fan base and are looking for new avenues to achieve this end. And smaller venues who are actively looking for bands or artists who can bring in more potential customers to their events without having to break the bank.
Creating the stories
Once we had our personas we were able to paint a clearer pictures of how and when each of these personas would use our services. Our storyboards focused on the main functions that our website would provide to the fans, bands/artists, and venues. With many other sites the fan interaction is limited to liking the artists on their Facebook page or following their Twitter.
We wanted to give the fans the ability to not only share an artists music but also be more involved within the community that we hope to build with our website. Fans who are active would have chances to get prizes such as concert tickets and albums downloads.
For the rising artists and bands we wanted to give them a platform to market their music with low cost investments that would help them and us grow in the long term.
This included ways in which the artists could interact directly through the sites with fans. By having these social aspects available to our artists we could help them build up a loyal fan base and at the same time allow them to reward their fans with exclusive deals and prizes.
Lastly we wanted to give small venues, promoters, and festivals the tools to attract new and affordable talents to perform at their events.
Venues would now be able to search through the site to up look artists based on their what the venue is seeking such as price, genre, and available time. Venues could then book these artists in a simple and straight forward manner saving them valuable time and, hopefully, a lot less headache.
Using these storyboards we have continued to refine what features and services we are looking to have for our website. With each members storyboard we have had a chance to see the unique opportunities that are waiting to be utilized for bringing fans, artists, and venues together.
Week 4: Gathering Feedback & Prototyping
Written by: Zaid Elkurdi, Max Catozzi, Hongda Xiao
Initial Design (Zaid Elkurdi)
After performing needfinding and storyboarding we felt like we had a pretty solid grasp as to what our users wanted, and we were ready to create the first prototype of our website. The first prototype we created was quite low-fidelity and done with just pencil and paper. The reason that we did not spend the time to create a high fidelity prototype is that this first version is meant for conducting initial user testing. By painting in broad strokes we can give testers a feel of our website, get usability feedback from them, and then iterate on that feedback quickly.
The process began with us brainstorming the screens/pages that we needed for our website. Our audience will be composed of listeners, venues, and artists so certain screens must be created to tailor the experience for each type of user.
For instance, based on our needfinding, we knew that listeners’ priorities were curation and discovery so our initial design for the “listeners” included a home page with trending music, an events page with events near them, and a music page where they could curate and add to their collection. With an idea of what pages should be included in our website, we each set out to create our own designs for them.
Our Artist page (pictured above), is the page that users will see when they click on artist’s profile. We chose to include only the features that listeners would find the most useful: the artist’s top tracks, their nearby events/shows, a short bio, and an option to donate to the artist. In addition, this page was designed with artists in mind, as they want to be able to connect with fans and make new ones. The inclusion of the artist’s image, a timeline of their popularity, their bio, and their tracks/albums are elements that artists can customize in order to personalize their page.
Because the layout for the venue, artist, and event pages should be consistent we chose to base the venue and event page layout off of the artist page layout.
We found that venues want to be able to connect with listeners and artists alike, so the venue page was designed with that in mind. Like the artist page, venues can personalize their page by changing their featured events, images, and bio/description. In addition to that, we’ve added buttons so that listeners can request that a venue host a specific artist and artists can request to perform at the venue.
With the venue, event, and artist page done, we moved on to the “Featured” page and “My Music” page.
The featured page is our way of addressing listeners’ desire to discover new music and artists’ desire to “make it big”. By prominently featuring “Rising” stars, both the listeners’ and artists’ desires are being fulfilled. On this page we display Rising Edge’s trending artists/songs so that listeners can find out what other people are enjoying and artists with good songs can gain traction.
Finally, the “My Music” page is the hub of all music curation on the Rising Edge website.
This page is customized for each user, and features their favorite songs, playlists, and even suggested songs and events based on the music they listen to. We designed this page with the hope that we could deliver both a intuitive curation system and a powerful way to discover new music.
With our low fidelity prototype created, we then began the user testing process.
Gathering and Analyzing User Feedback (Max Catozzi)
With the help of some other COGS 187 team members we were able to simplify, construct, and arrange our ideas in a more concise and provoking manor. Our original ‘lo-fi’ designs could roughly get the job done, but there is no doubt that the pages were cluttered and did not share enough commonalities.
In order to gather feedback we set up a demonstration of sketches and had another team analyze the current site design. Their constructive advice was centered around usefulness, clarity, and overall appeal. They determined that the key features of the site for them are artist discoverability, profile individuality, and ease of use, but they also made it clear that our initial design does not provide all of those things. So, we set out to re-think the way we approached the design.
Within the first moments of the demonstration there were strong suggestions about getting rid of any ‘auto-play’ music features, getting rid of excess information on each of the screens, and getting rid of the carousels. Based on user feedback, it was unanimously decided that carousels were more work than their aesthetic worth can justify, and they were eradicated. Other feedback included getting rid of redundancy between pages, simplifying the UI design, and keeping a consistent theme throughout the project.
Re-design Prototype and Testing (Hongda Xiao)
We completed the final iteration of the prototyping based on our user testing results. Since our website has specific artists in mind including users, artists and venues, we decided to reduce some unnecessary information from the original design so that the users can clearly understand the structure of the website within seconds. To do so, we redesigned the original prototype by reducing the contents in the home page and keeping the menu bar consistent on each page of the website. Also, we reduced the redundancies from the previous prototype by making the website more image-centric rather than text-centric.
Here is an overview of all pages of the website from the final iteration.
For the home page, we decided to give it a cleaner appearance to improve its usability. Based on the user feedback, we shortened the video playing field into a smaller music player and it will not make any sound unless the user enables the volume. We also included an calendar under the events tab so that the user could easily click into the event pages to see the particular upcoming event. Also, we want to give the users easy access to the ‘RISINGEDGE’ AND ‘ARTISTS’ page by providing an overview of each.
Below are the ‘RISINGEDGE’ and ‘MY MUSIC’ page in their consecutive order. For the ‘RISINGEDGE’ page, we feature the top artists based on the trend and included a music player for their musics. We also highlighted the ‘trend’ feature of the page by combining a diver range of colors and utilizing the gradient effect. To do so, we want to highlight our website for its uniqueness and originality. For the ‘MY MUSIC’ page, the page layout and contents will show differently depends on the user type. If the user is not signed in to the site, RisingEdge will assume the user is a listener and will show featured artists here. If the user is an artist or venue, this page will show contents that is more related with their perspectives.
For the ‘EVENT’ page, we want to clearly show the upcoming local events so that the user could easily find his or her entertainment needs. Also, we included a Similar Events bar to the right based on the user’s previous search results. The website has a great sharing feature where the user can easily export the event information to other social sharing websites like Twitter and Facebook.
For the ‘ARTISTS’ page, we modified our original design based on the user feedback that the initial contents were too dense. Instead, we displayed large cover photos and images of the artists for the site appearance. By clicking on the image, the user will be redirected to the particular album or artist playlists.
For the three types of venues page, we organized the pages with clear graphical layout to improve the user experience of the website. Those individual pages will show up differently depends on the specific user type.
After another round of intensive user testing among team members, we made some small fixes to make sure the website is consistent by linking all the pages together. Finally, we concluded the final design phase of this amazing music website and we are ready to move into the building phase.
Week 5: High-Fidelity Prototype & Conclusion
Writers: Zaid Elkurdi, Hongda Xiao, Nick Campbell
Low-Fi Prototype Final User Testing
After we finished prototyping our final version of Low-Fi website, we conducted another round of user testing to discover any features that might not be clear to the user. We received positive feedbacks on the usability of the website as well as the design suggestions that we used to improve the final prototype.
Design Changes
The users who tested our website still felt that some of the pages were too busy and sometimes were distracting when trying to explore and navigate the website. Based on these user testing feedback we made changes to minimize or reduce the amount of information that was present in each page. For the home page we cut back the on the colors and simplified the top portion to feature just one artist so that the user would not be deluged with too much information right from the start. Users also felt that the ‘my music’ page (the main landing page once the user logged in) was too distracting with all the different tabs and boxes. To this end we decided to make the playlists and library the focal point of the ‘my music’ page leaving out artist news to reduce clutter. The events page was minimized by focusing on the featured events and just creating a simple list of other events which gave the page a clean and polished look. The venues page also underwent a similar process to help clean and streamline the overall look and feel of the website.
High-Fidelity (Final) Prototype
To accomplish the goal of providing a crafted High-Fi prototype that keeps users in mind, we used both Sketch and Adobe photoshop to create a highly detailed final website. The overall consensus that we reached is that the website should stay consistent throughout the pages. To do so, we created an initial template that only has the navigation bar, and then we individually designed each page before meeting up to link them.
Initially, we had a lot of challenges because the pages had completely different layouts and color schemes. To make sure that the final pages are consistent with each other, we decided on a universal font and redesigned the navigation buttons and labels for the users.
Listed below are the major changes we did to the website.
‘my music’ page
For the my music page, we decided to use a cleaner design than the Low-Fi prototype to show the playlists and the music library. Based on the user feedback for the Low-Fi prototype, there were some redundant tabs on the page that made the overall layout confusing. To address the issue, we centered the playlist in the page and just listed the album covers on the sides.
‘events’ page
For the ‘events’ page, instead of having a lot of images featuring local concert events together, we used a banner image upfront to feature a single event to the user. We listed a short synopsis of the related events below this banner image and the users can navigate to the specific events on their own selection.
‘artists’ page
For the ‘artists’ page, we kept our original design because the users gave positive feedback about the cleanliness of the page layout. We carefully crafted this general artists page and its related specific artists page by making sure the cover sizes are well aligned.
‘venues’ page
Because the feedback from the user testing suggest that our original ‘venues’ page design does not clearly state its purpose, we completely redesigned the page. Like other pages, we included large banners to feature the venues and included a list of nearby venues under the header image.
After a few more rounds of user testing among team members and gathering feedback from the Teaching Assistant about the 90% High-Fi prototype, we narrowed down and fixed a few more design details. We are satisfied with our final design for the project and are very excited to present it to the class!
Website Description
Rising Edge is a website for artists trying to gain traction, venues looking for performers, and people trying to find new music. Artists can interact with fans, spread music, and coordinate with venues to find a gig to play at in a click. Or, if you just enjoy listening to music, you can use our powerful features to find the newest music and curate your collection. Rising Edge is unique in its focus on the up-and-comers, its discovery tools, and the fact that listeners can interact with venues and artists like never before.
Takeaways from COGS 187A
At several points in the design process we got together and brainstormed ideas for a particular layout, screen, or set of features, and then split up to design in parallel. Eventually we’d meet back up, compare designs, and be shocked at how different each of us had envisioned the screen or feature. Every time we went through this process we ended up with a very diverse set of designs and we feel that we could not have achieved the same results if we hadn’t designed in parallel.
Unique Perspectives:
Nick Campbell: This class taught me that the best way to learn design is to do design work. The fact is, there are only so many design principles and skills to be taught, and at a certain point it’s more useful just to practice. I loved the class format, and genuinely enjoyed the process of planning, building, and finally marketing a product. I remember having a panic attack when I realized how much back-end our site would require, and the flood of relief when I learned we would simply be doing prototypes. That being said, I realized that it takes a lot of work just to get to a prototype and that while the implementation is often the most daunting, it can also be the most straight-forward and… ahem… programmatic part of the process. Design isn’t as obvious and the line between right and wrong is often blurred. This class was a great supplement to my CSE education, gave me a great introduction to the world of interaction design, and has opened my eyes to possibly even a new career path.
Brian Vu: Before taking this class, I expected it to be a class about building a website/app through a ton of implementation. I was ready for another CSE course. However, the whole experience took me by surprise and continued to do so as the course went on. The in depth design process and the step by step process of making the website as a team definitely opened my eyes to a whole new perspective of what it takes to be a front end developer/designer. Before taking this class, the prototyping process would be a thing I always took as being a waste of time. However, I’ve now learned that it is actually the most important process in creating a better overall design. Being a part of this team and this course has by far been the most rewarding experience for a summer course I’ve had, and the design aspects of website-building will definitely ingrain itself in my brain for life.
Max Catozzi: This class took me by surprise. Coming into it I was honestly not very excited to be taking a course in the cognitive science department, I thought it was going to be all theory and no implementation. I thought that the structure would be more in line with computer science classes, with minimal instructor / student interaction and rarely any feedback. Well I sure was wrong about all of that. I love the free and enriching environment that the COGS 187 class provides, it is unlike any class I’ve taken at UCSD. As we near the end of the course I feel I’ve definitely gained a lot. Not only have I learned new ways to approach a web design project, I’ve learned new ways to communicate ideas and collaborate with teammates and fellow coworkers. I feel that those skills are sometimes equally as important to design as the design skills themselves.
Zaid Elkurdi: As computer science majors we’ve all implemented apps and websites, but rarely spend time working on design. While implementing a front-end, it’s easy to get lost in the technical details and forget how critical usability and approachability are. From our experience designing Rising Edge we’ve discovered that good design is just as (if not more) important than good implementation. Essentially, even if your front-end is perfectly implemented it’s still not worth much if it’s poorly designed.
Hongda Xiao: I was surprised by how much this class challenged me in ways I never thought possible. As a future Software Developer, this class has taught me the importance of really understanding what the users want. Through a series of learning experience on prototyping, user testing, and designing, etc. I am inspired to build some original and aesthetically pleasing projects in the near future. I also really appreciate that the professor and TAs have been showing a lot of care to all of our learning experience.
Tong Lee: Coming into this class I was expecting to do a lot of coding to get the app or website we planned to make up and running in five weeks. I was somewhat surprised that there would be almost no coding in the class. However, since the class had no coding and we were able to concentrate solely on the frontend design interface I found it to be pretty enjoyable. It also taught me the value of good and simplistic design which can still accomplish what you want without overwhelming your users. I was also able to brush up on a lot of my rusty art skills and that was also pretty enjoyable throughout the class session.
LINK TO OUR FINAL DEMO VIDEO:
LINK TO OUR FINAL PRESENTATION:
https://docs.google.com/presentation/d/1Jk7TNzpX2PVbqUhpAoPYtuDKaRTaOuH9KHct1EGInTg/edit#slide=id.p
