Goodpoints
Goodpoints is a community based news application from a company that I co-founded. It features a front page, topics page and organizations page which are all ordered based on the amount of interaction users have with the content. The desire was to game-ify news content to create highly engaged communities around specifics topics. Below are some high levels product goals.
Product goals
- Create an engaged community.
- Let the community dictate what content is important.
- Transparently reward and track engagement.
- Use knowledge from gaming to add fun, competition, player journey.
Goodpoints is the first step in creating a template that we could use for other topics, company's, IP, etc. It's a product we hope to expand and grow to help facilitate social impact.
I created the UX, visual design and branding in collaboration with the other two founders. The idea is that we could publish apps every week under a new topic using the framework that we have created. In the future we will be iterating on the product based on the data we're collecting and hopefully some user interviews.
The Front Page
A screenshot of for the Front Page screen
The Front Page features an “up-voting system” that surfaces content that the community cares about. We clearly indicate the amount of +1's a post has so users understands why certain posts are at the top of the list. We focused on the ”+” animation to catch the user's eye and clearly indicate the value of certain interactions. In visual design we were influenced by Instagram's recent redesign and kept the visuals and UX simple. The content should be top priority.
Profile
A screenshot of the final Profile screen
The profile would be a important screen for the user to track their own progress/status. Our hope was that users would strive to earn points for supporting the topics they care about. Those points would ideally earn them credibility and status in the community. Their status would be visible to others through their rank.
iOS in full effect
The template app also included both a widget as well as an iMessage app. We wanted to take advantage of everything iOS offered. Their isn't a lot of competition using those features and we though if we were the first in the space we could own it. We also thought that it could appeal to Apple and maybe we could get featuring. It also makes it really easy to share content which helps with organic growth.
Process
We worked a little more scrappy manner at Hunhu. We would often brainstorm content, functionality and ideas whenever we were able to get together. These sessions shaped the product a great deal but there were little artifacts other than quick sketches like the ones above. In other circumstances I would do more detailed wireframes like the ones below.
Wireframes
Above are some early UX / Product Design wireframes. We had just pivoted to trending content from donations and this was my purposed product design. We have iterated quite a bit since these wireframes but this give you an idea of the functionality. We really wanted the user to feel rewarded when interacting with the content. The purpose of this flow is to show the various celebratory animations the user would receive when interacting with the app.
When designing this product is was important to keep in mind that this was intended for multiple topics, sources, etc. One of the main goals was to allow users to track their contribution to certain topics and brag to friends about it. The amount of user generated content would depend on the topic. For example in 3 Points, the basketball app, users tend to be more voyeuristic unless prompted with questions such as "Who is the best guard in the NBA?" It was a little more difficult to get people to post for Goodpoints. People take a big game when it comes to charity, donations and spending time on causes in a way that make an impact.
Branding / Visual Design
Early branding explorations for Goodpoints. It was fun getting back to my design roots and working on some branding. For Goodpoints I wanted the logos to be clean and modern to reflect the subject matter. We wanted the plus to be included because it was such a large part of the functionality of the application.
It had been a while since I had worked with typography and I really got into it. I went back to hand lettering before ultimately picking a pre-existing font. Creating the logo by hand brought me closer to the decision finer details of typography and how to express ideas with it.
Testing the template
To test whether or not we could create another version of the app as quickly as possible and to test out the product with a new set of people and new topic we released 3 Points on iOS. This became a passion product since I love watching and playing basketball. We scraped content from all the top social media accounts including some of my favorite reporters and players. It was a good reminder that you'll do much better at something if you truly have a passion for it.
Rebranding
For 3 Points I wanted the logos to be a little more bold and aggressive. The demographic we were going after for both was millennials but I think 3 points would be marketed more towards men. I tried to fit in the "+" no matter how subtle but gave up and decided to try an arrow instead. We were still optimizing so I wanted to evolve the overarching hunhu / Goodpoints brand. If it was a client and not a test app I wouldn't have been so flexible.
Globe Investor
We were approached by the Globe and Mail to create the Globe Investor app for iOS, Blackberry, and iPad. I art directed, designed the user experience, created the mocks in photoshop for iOS and iPad, and coordinated the production of assets for all 6 resolutions (gasp!).
I loved working with the Globe and Mail guys. They were super smart. We collaborated the entire way through and they pushed us to justify our decisions. At the time their wasn't a lot of great mobile prototyping software. So we had to iterate on software on device.
In creating this application we needed to give the user to access specific stocks instantly while also being able to browse the colossal amount of content the client's website contained. We created a number of systems to solve this puzzle including a robust search and by centering the home screen around the "My Watchlist" feature. The app was later voted one of the top financial apps of 2011 by Apple Canada.
Wireframes
The clients goal was to include 60% of the Globe Investor website into the mobile application. Through an extensive brainstorming / wireframing process, we achieved the 60% and more, creating a product that has been the clients most successful app to date. I've posted the basic flow from cold launch to detail view for iPad above.
Since iPad is a slightly different use case than phone we showed more information on the screen including a ticker with the user's "watchlist" of stocks they were following. I thought the more realistic use-case for the Globe Investor was more inline with the habits of an iPad user. After interviewing investment bankers, and stock brokers I realized that it probably wasn't a good thing to be constantly checking your stock's value. Having it on your phone was less useful in that case.
Working in multiple resolutions / platforms
A couple of concept mocks to illustrate the platform specific UX for Blackberry. I directed a junior designer who worked on this platform but didn't have much mobile experience. In total we had to provide mocks, assets and spec sheets for 6 resolutions over 3 platforms. That didn't include iPad which we never finished because we were aquired by Zynga first.
It was common for us to be working with all 3 major platforms (Android, BlackBerry and iOS) so we were well versed on the platform specific conventions and how to port an app from one to another.
The Score - Pitch Concept
This was a concept mock for The Score. One of my favorite clients at Five Mobile. I started with wireframes in Illustrator and designed the final UI concepts in Photoshop. The mocks were for a pitch to redesign an existing client's application and unify their design across 3 platforms (Android, BlackBerry and iOS). The visual design was very skeuomorphic which was the style at the time. I created these in late 2010 / early 2011.
The goal of the UX, specifically the top drawer, was to fit all of their content within a couple of clicks. This was extremely difficult given the amount of content and the frequency in which the data was updated. Unfortunately I've lost the original wireframes due to my computer crashing so I can't display them here. Our company was acquired during the concept / pitch stage and the project was paused. They used a similar UX system for their app when it was eventually released.
Pitching to clients
3 concept screens which also show purposed UX as well as revised visual design. These were the 3 screens that we choose to pitch to clients. I often led presentations to clients at Five Mobile. I worked hard on polishing the heavily stylized skeuomorphic visuals. Including the scoreboard style display on the game detail screen and the mesh texture on the top drawer. I'm a big sports fan so this was a super fun project for me.