GeekWire News App
I&A and Visual Design
2 Weeks
Spring
Interaction Designer-Aaron Hawkins
Team
User Researcher-Elson Tran
I&A/Visual Designer-C.L. Jin (me)
About the project
Project summary
Our research has shown that some of the users have chosen to abandon the app because the app does not provide enough features to help them read the News. Due to the facts that the app is on top with relevant topics, and the design is hard for them to read. In this project, we need to improve the reading experience and gain more users for the app.
My role
During this project, I was in charge of Information Architecture and recapture the brand image to create a new visual style.
Research
Client background
While our user researcher is targeting on user's pain points, I started my research with GeekWire's website to discover its business model.
GeekWire is focusing on providing breaking news and high-quality article in technology and business to support the local start-up companies, software engineer, local community, and GeekWire events.
Feature products:
Hight Quality Article & Breaking News in Technology
GeekWire Events
Job Board
Provide Resource for local engineer and startup companies
Advantage:
Professional Editor Team with Local In-Field Expert Support
Local Event Calendar
Local Tech Giant Sponsor News
GeekWire’s Mobile Application
Compared to the website version, the mobile application has a different marketplace. Their mobile application was designed as a newsfeed reader to help the user stay up to date with the most current in tech news and events. However, I found some interesting factors in their app:
Issue #1
The hamburger style menu seems not following the Apple Human Interface Guideline.
Issue #2
The mobile application provides very minimum functions that user can only share the article. The app is lack of industry standard.
Issue #3
In their news topic selection, they have a total of 45 topics that listed as alphabet order. This was hard for the user to scan and find the topic that interested in.
Competitor analysis
We compared GeekWire app with its competitor to find opportunities and discover the gap area. This provided some inspiration and the direction during our interviews.
Base on the user interface element description from usability.gov, I created a user interface comparison chart to discover how they deliver their content efficiently to the user in an intuitive way
What we learned?
All competitor’s mobile applications had a simplicity design. They provide minimum functionality that is just right for their users to read and stay current. Less functionality is one of the factors that lead to a smaller storage size for the mobile application. This increases better user experience in terms of faster front-end loading speed and responsive speed. More importantly, the user attracted more by the quality of the news content instead of overwhelming functionality.
Problem
What does our user think
We had serious concern about the 45 news-topic with alphabet order, but surprisingly, the data from our User Researcher surprised me. The users don’t mind about their news topics getting alphabet order or not, with that extra five-seconds given to look into the topics. The app doesn’t need to put that much focus on something small like this. They should spend more time staying informed with relevant tech news instead.
Another problem is the current design solution pushes all the news or article to the user, no matter if they are relevant to them; which is pretty irritating to users.
Problem Statement
Alex needs to stay informed with relevant tech news because she’s busy balancing her career and life outside of work.
Hypothesis
We believe that by creating a method to curate the content categories we will provide Alex with the news she cares about. We will know this to be true when she uses the GeekWire app more frequently.
Iteration
Information Architecture & Usability Testing
During the development phase, we had two design studio activities to brainstorming ideas and tested a total of two prototypes. Some of the features have been changed or removed while I was studying the Apple HIG.
At first we added a process to let Alex registers an account and selects the news topic before she reaches the News content, but after the usability test I deleted this part. Due to the facts of quality content, ease-of-use and it does not follow Apple HIG.
I originally added segmented control on the homepage that allow Alex to switch between selected topic news and other news published by GeekWire. However, I deleted this feature to reduce the distraction on News/Articles.
Sitemap Version 1.0
Search Function - Since there are still 45 news topics, a search function added can let Alex quickly finds the news topic that she cares about.
Hamburger Menu Icon for News Topics Selection - Allow Alex to view selected News topics or un-selected topics.
System Setting - Alex now can manage her account and change anything she has set up before.
Sitemap Version 2.0
Account Register Page/Step - Alex can choose to register an account with either Google, LinkedIn, Facebook or other Emails.
News Selected Process - Alex needs to select News topics after she finishes her account register.
Segmented Control - Alex can switch between “Your Topics” and “General News” on the main home page.
Sitemap Version 3.0
With my further study on Apple HIG (Apple Human Interface Guideline), I deleted the step-by-step process of registering the account, and selecting news topic. The users expected to see the actual content when entering a mobile application. However, the hamburger menu icon may potentially cause our app gets rejected by Apple App Store. Also, during the usability testing, our participants were confused the app with an Android app instead of an app on an iOS platform.
To stay consistency with Apple HIG, I moved the page into tab bar. This change leads our tab bar from three items to four items.
Visual Design
Typeface
Due to lack of resource of GeekWire’s brand assets, I first started with the font type. I picked Proxima Nova because it:
works well for screens: Its minimalist style creates a more modern visual style and works well with different screen resolutions.
has great flexibility: The clean and modern design does not draw extra attention from the reader. It allows the content speaks for itself. This feature makes the perfect solution for the News Industry.
Color palette
I extracted the two main colors from GeekWire’s app to stay in the same visual aesthetic.
I stayed away from using the combination of pure black and pure white to avoid high contrast and provide a user-friendly readability. Instead, I reduced the saturation and picked a dark gray that is closer to real life color for a more natural and comfortable reading experience.
Final Design
What I learned
Information Architecture
Building an information architecture may not be the best way to design a mobile app, but learning Apple HIG will keep our products structurally consistent with other products on the iOS platform.
Visual Design
I need to admit that my team underestimated the impact of visual design, which made us not systematically test the visual interface of the product. During the design process, I became more aware of how visual design can have a significant impact on the final shape of the product, such as interface layout, color contrast, font weight/size and so on. Each element has a significant affects on the interface.
This concept project not only gave me a deeper understanding of information architecture and visual design, but also made me feel more interested about visual design.
