Simply Context
Case Study
The Design Process
1
Discovery
Here we decided who would be the target user for Simply Context, what features might be desired or needed in the design in order to drive engagement
4
Wireframe
&
Prototyping
In this phase I designed a low fidelity wireframe to design to test users in navigating around and complete tasks.
2
Research
In this phase of the design I learn more about the target user and what their desire are in an app, by asking open ended questions in both user surveys and in-person interviews. Next I conduct market research by analyzing competing businesses and see what they offer and try to offer better features.
5
Design
In this phase I designed the final iteration of kickback.io, here I came up with the color scheme, iconography, typography, layout, and animation.
3
Sketch
In this phase of the design, I sketch out multiple designs and ideas to better understand what direction to go in.
6
Final
Here we wrap up the design process by asking individuals to test out the prototype, once they have completed testing I would make any changes necessary based on what I observed and what feedback was given to me by the user.
Problem
People are unsure what articles and stories are biased or catered to particular audiences.
Solution
An app that shows what party the articles swings to, the writer partying leaning status, as well as originality.
Duration
2 months
User/Market Research
User Research was a crucial step in the design process, here I was able to learn more about Simply Context target user and what appeals to them. Next I was able to look into potential competitors to determine pros and cons of their website and/or application, and with that address pain points in the applications and also provide features that Simply Context competitors don't have.
Competitor Audits
User Surveys
User Forms
User Personas
Name:
Fred Smith
Age
45
Occupation:
Trend Researcher
Problem: Fred has always been told that anyone and any company can put a spin on any news story and thus makes him skeptical of an article's bias.
Need: Fred wants to know to if his article is written by someone who leans towards a certain political party or has certain bias towards certain groups.
Solution: Simply Context provides information about the article which include possible political bias, word count, originality, and number of pictures used
Name:
Ted McManus
Age
20
Occupation:
College Student
Problem: Ted has just be handed an assignment to do a research paper on the United States economy, and to make things more complicated his teacher says he can't use any information from a potentially highly biased source.
Need: Ted needs to find articles that cover the economy and are not biased
Solution: Simply Context provides a category that covers the economy and provides information about the articles that present bias levels.
User Flow
.jpg)
#1206A6
Typography
League Spartan
Color Scheme
Blue was the main color chosen for the simply context, it is used to to let users know when a button can be tapped.
I chose league spartan because it was the most simple and easy to read in different sizes, plus it aligns with the app's name. The variations of the type going from regular, medium, to bold was to establish a visual hierarchy.
Screens
Onboarding Page
The onboarding pages include a progress bar to show the user how much progress they made, this is to discourage any impatience when it comes to creating a profile.
Home Page
The Home Page is arranged by user visually hierarchy, it starts with breaking news, recommended, favorite category, local news, the short stories.
.png)
Article Information Page
The user can view the statistics about the article they are reading, this includes, originality, political bias, category, wordcount, and number of pictures. They can compare articles to others but it does require the user to upgrade to premium.
.png)
.png)
Article Page
This is where the user can read the article, if the user is not a fan of reading everything there is a "summarize" button set on a sticky scroll. On the right there is drop down, here the user can like and comment on the article, I also designed the drop down to have statistics button to ensure that users who like and comment also think about the stats of the article.
.png)
Conclusion
Results
Users who tested the final prototype where enthusiastic about it. They were able to complete the tasks in good time. Users have also said they even though the navigation bar is a little big at the bottom they said it is good so that text is eligible.
What I Learned
I learned to ensure that there is plenty of time to test the mid-fidelity wireframes, as well as expand my research beyond those who are willing to take time out of their day for free.