Digital App
Surf Social is a digital mock-up/prototype of an Interactive APP for an iPhone as a companion piece to the Passion Guide project Surf Social San Diego Edition, exploring on screen what paper is not capable of executing. Moreover, it serves as a platform to foster professional growth, networking, and recruitment via its dedicated competition page. Meanwhile, the print version is a magazine-styled guide to the top breaks in San Diego with advice on how to access the wave and tips depending on the reader's skill level.
Software and skills used to create this project included: Front End Development, Adobe Xd, Adobe Illustrator, Adobe Photoshop, Photography, and Collage.
Included on this page
Inspiration
Process
Mockups
Final Design Working Prototype
Inspiration
I wanted to incorporate the information and general theme from the printed version of Surf Social but clean it up to a more simple, sleek, and calculated design. The deep rich textures and feelings provoked by some of California's luxury beaches inspired the color theme. For the technical and working aspects of the app, I took inspiration from Instagram, Nike, and Handshake. I also was inspired by the Surfer Journal and its ability to easily transfer between sophisticated and experimental designs.
Process
After the first couple variations I quickly recognized. that there were too many colors, it was too busy, and the layout felt very compact. I made a few minor adjustments to make the design more user friendly which resulted in the following screen mockups.
After, I then did some field testing with twenty randomly selected (non-art major) students around campus. The first thing I noticed was the lack of navigation as I originally was assuming the user would automatically know where to click. I used this to then approach my revisions with the assumption that user has never opened an app and would have no background knowledge on where to navigate. Another major takeaway from the user testing was the time students spent on each page as majority stayed on the navigation page to explore and the profile page was quickly opened and closed without interest. I knew I had to expand on the navigation page as thats what users were most interested in, as well as make the profile page more engaging. Another critique I received was that the color was distracting at certain times or hard to read. This led me to completelty rebrand the app with a new color scheme, logo, and overall aesthetic.
Major Takeaways from User Testing:
1) Improve Navigation and user friendly features
2) Expand the explore page and revamp the user profiles page to increase engagement
3) Less is more, cut back on the overload of colors to create a more professional feel and drop the outline stroke
Mockups
Final Design
My biggest takeaway from this project was that less is more, especially when working digitally. I came in very passionately with an overlay of colors and cramped busy layouts trying to fit everything onto one screen. After some field testing I quickly realized that I needed to take advantage of this new media that could include features the printed version could not. This included pop out features, scrolls, and interactive features. My feild testing encouraged me to change my design approach to a more flat design style with a simple color palette that pushed the media and was userf friendly. It also drastically changed my design process as it forced me to consider the user before the art itself asking questions such as: What will make them stay on this page the longest, where should I place the navigation bar for easiest accessiblity throughout the app, how can I make this engage the user from every screen? I also was challenged in maintaining the original aesthetic developed from the print version over to the digital app without relyying stricly on copied media uses. Translating between print and digital was not easy but after field testing and many variations, brainstorms, and skeatches I was finally able to impliment similar elements throughtout both pieces to create a cohesive overall branding.