The following is an ad hoc presentation demonstrating my high-level process for developing a website and app. In this case study, I begin from the highest level possible (starting with nothing but an idea) and finish with a low fidelity prototype.
WhatsON
October 2014
The Idea: With the proliferation of streaming services and dozens of streaming platforms, I was convinced that Users need a single place to discover everything that is available outside of their primary platform. This service will assist Users to navigate available content and encourage them to use services outside their primary streaming platform.
I begin by constructing a High Level overview: Concept, Hypothesis and Goal. What does the business need from the website or App? What do the Users need for it to be both an efficient and engaging experience?
I will know my product is a success if customers are purchasing streaming content outside of their most-used platform at a higher rate than before. That is how I construct the goal and objectives. I also consider how to perpetuate various possible revenue streams.
Now that I have a firm understanding of what the Business requires of the website or app, I consider the Users.
User Profiles (Personas)
Now I conduct interviews with Users who would be the target audience; In this example, customers who have no Cable subscription and had atleast 1 primary platform, such as Netflix, for their streaming needs. I then form a number of Personas-- target market individuals with varying behaviors and purchasing patterns. For this presentation, a Primary and Secondary Persona were enough.
After we establish our target primary and secodary personas, there are a number of directions the development process can take. For this presentation, I continue by establishing a corporate character. This is not to be confused with branding. I am not interested in visual design whatsoever; I am interested in Copy. I just established who we want to sell to. Now I consider how best to communicate with them.
High Level Branding
I begin thinking about how this service is represented to its customers and employees. I do not want to get caught up in Logos or Colors yet. Instead, I want to focus on copy, language, and personality. How will the Users be interacting with this product? How would the product speak to them?
Using my Primary and Secondary Personas, I decide what archetype this service is and what kind of corporate character it should exude.
I ask my interviewees what they think of this voice. How would they like it if the service spoke to them that way? Their responses influence my direction. This is an on-going process until I find a voice that speaks both in an engaging and efficient manner to them.
Now that I've settled on a voice for the service, I can create ad hoc copy decks and examples of Twitter or Facebook posts. It's all about Copy. I will need the marketing team to understand how this service speaks to its audience. The service will have an attitude and personality that is consistent throughout all of its many parts, both marketing and internal.
High Level User Task Flows
I can also create a number of high level user task flows. These are scenarios of how the Users would interact with the product, and what actions they would do. Doing this at the very high level can help with developing Copy early on. Such as: Instead of asking for Gabe to "Search", I can ask him "Looking for something specific?"
Information Architecture
Now that I know who will be using this service and what situations they may be in when needing it, I build a story map by using Post-Its with individual desirable actions. In this case, they will want to search. That gets a Post-It. They would also want to search by category or by what is popular. Those get their own Post-Its. The User would also want to learn more about the service and access their account.
That gives me 5 sweeping actions that will servce as the backbone of the website. (Search, Search by Category, Search by Popular, Company Profile, and My Account).
That gives me 5 sweeping actions that will servce as the backbone of the website. (Search, Search by Category, Search by Popular, Company Profile, and My Account).
I continue assessing more actions the Users would desire: Edit profile, Contact, Rate this Movie, Follow on Social Media, and etc. All of these actions would have to find a home beneath the primary 5.
New features and actions could be added in future releases or patches, so long as they don't disrupt our primary 5. This is how I begin creating an intuitable navigation and Sitemap.
You'll notice two things; our Home page is the "Search" desireable action-- the most used and most desirable action.
And on page 2.0 (Browse), our "Search by Category" desirable action, a Taxonomy is necessary. Our taxonomy will categorize streaming content based on Television or Film and Genre. I purposely leave out by platform, as that was one of the many complaints Users had. "Don't make me search by store, just tell me where to find the show I want!" ~Frusterated interviewee
Detailed User Flow
Another important deliverable is the Detailed User Flow. Unlike the previous high-level User Task flows (which helped me brainstorm copy and desirable actions), this User Flow is used by the engineers to code the site and app. Therefore detail is very important. Every entry and exit point within the service must be labeled. Depending on how technical the site is, the User Flow can be very large and intimidating. Depending on the project, I may have more than one to represent a particular action or feature. I used the Login/Logout action as an example of that in this presentation.
Lastly is the low-Fidelity prototype and Wireframe. I am not concerned with color or visual design. Instead I'm interested in User application and intuitability. From here I can decide where I need to adjust copy, heirarchy and so on. I have Users test it. If the tests go poorly-- if they get lost on a page or don't know where they are supposed to click for a desirable action, then I make adjustments and start over.
And that is my high-level, low fidelity process for designing a web site and service from scratch. After the prototype tests well and is approved, I begin working on the Visual Design.