Practicing Design in COGS 187A at UCSD

Outlining my experience prototyping ‘Rising Edge’, an online music discovery service designed to connect music lovers, venues, and up-and-coming musicians

Entering my 5th year in college and 3rd at UCSD in 2016, I took COGS 187A, Usability and Information Architecture, during the second summer session. It was a Cognitive Science class that could be used as a technical elective for my Computer Science degree, and was a class aimed at the intersection of technology, design, and cognition in information systems. During the short 5-week session, we were instructed to create a brand, find a problem and identify the solution, prototype and test that solution, and ultimately pitch the final product to our peers. This is simply an outline of that process, and some of the takeaways I had from the experience.

Team Rising Edge during one of our first meetings!

Getting Started: Learning about Color, Typesetting, Logo Design

My team and I are all Computer Science majors so naturally we had to include a play on processor clocks, and Rising Edge was born. We settled on a general idea of a music website, and started to work on our logo design.

We got an introduction to color theory, typesetting, and basic logo design concepts, and began with simple paper-and-pen sketches. I tried to do a mix of typographical, abstract, and literal logos to get a sense of what concept would work best as a brand.

My first iteration was very simple, but was a very useful brainstorming opportunity.

After the six of us came up with a few ideas individually, we came together and tried to create some more polished versions of our favorite pen-and-paper concepts.

After discussing our sketches, the team split up once again to make polished versions.

These logos were far more polished than the original sketches, but unfortunately we decided to go with a different idea for the final logo. Based on a sound waveform, we thought it was aesthetically pleasing and energetic, while at the same time acting as a familiar icon associated with music and sound for our audience.

The final logo.

Need-finding: What’s the Problem?

Now that we had initialized our brand, it was time to figure out what problem in the world we were trying to solve. We had the rough idea that we would be music-related, and decided to make a music discovery site that connects listeners, artists, and venues in a novel way.

As I wrote in our team’s medium post for the week:

“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.
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.”

Starting to Build: Storyboarding and Low-Fidelity Prototypes

Now that we had established a more complete idea of the needs associated with our site, it was time to start brainstorming concrete design ideas and begin our low-fi prototyping.

To get a better idea of the specific features we wanted to offer, we began by collecting statistics on how our peers engaged with music in the digital age. We received 39 responses, of all three categories (listeners, venues, artists), many of whom were university students like ourselves.

The results of our surveys.

Now armed with data, we brainstormed persona ideas based on the categories of users Rising Edge could serve. We split up personas based on artists, venue owners, and listeners, and I got to work storyboarding how a world-famous superstar or up-and-coming rapper might interact with the site.

My contributions to the artist persona storyboarding

After the storyboarding, we settled on some of our more specific features and began to make low-fidelity prototypes using Basalmiq’s online software for rapid prototyping. We again split up the work, but this time I focused on the venue side of the application.

My low-fidelity prototype of a specific venue, made in Basalmiq.

Final Polishing: Testing and High-Fidelity Prototype in InVision

With our low-fidelity prototypes in place, it was time to begin user testing. We partnered with another team in our class, and got some valuable feedback. Based on their advice, we simplified our colors, created a consistent standard for all of our pages, and tried to unify our design as much as possible. At the same time, we were learning about web design heuristics that help keep the final product consistent with what users expect. It is important to stress usability, because a frustrated user won’t remain a user for long. With a color scheme, fonts, general design choices, and our features in place, it was time to begin the final high-fidelity prototype. We created ours using InVision, which allowed us to rapidly create a professional-looking simulated website with no coding whatsoever. We set to work creating our Home, Trending, My Music, Artist, Event, and Venue pages. I was in charge of the venues, which meant creating several mock specific venue pages, as well as a general ‘venues near by’ feature that allowed show discovery.

An example of the high-fidelity specific artist page.

With our final prototype in place, it was time to focus on our “Shark Tank” presentation. We re-visited our competitive analyses, created a presentation showcasing our unique features, created individual portfolios to showcase our talent, and a video to demo the product to potential investors (… or classmates, whichever). I was in charge of the video, and I was really pleased with the way it came out, especially considering I had never used iMovie before!

Final Takeaways

All-in-all, what started as a way for me to get some technical elective credits ended up being a rich learning experience. I learned so much about the design process, teamwork, and taking a concept from idea to execution. Most importantly though, this class taught me that design is all about patience, and practice. Design seems like all fun and games when compared to daunting coding, but it is an immeasurably important part of the entire creation process. It takes many iterations, lots of practice with online and offline tools, and intense collaboration to come up with a consistent, usable design, and this class was a great way to learn a lot of skills that can only be taught by doing.

Special thanks to my teammates: Zaid Elkurdi, Max Catozzi, Tong Lee, Brian Vu, and Austin (Hongda) Xiao!