RuralNet web application Design
Project overview
Problem : Access to reliable high-speed internet has quickly become a requirement for modern life. Yet numerous communities, particularly those in more remote areas, still lack access and any reasonable recourse to improve their situation. This is because large internet-server-providers (ISPs) typically advertise average or best-case speeds in an area that are not representative of real-world accessibility by consumers. As a result, gaining traction on legislative efforts to improve internet infrastructure becomes difficult, as frustrated individuals have no reliable data that reflects this discrepancy. This leaves legislators with no choice but to rely on the misrepresentative figures provided by ISPs.
Solution : The purpose of Rural Net is to provide a lightweight web application usable by anyone that can provide and store reliable repeated measurements of internet speed over multiple hours and days. Rural Net aims to make it easy to integrate this information with geolocation data, thereby providing a more accurate picture of real-world internet availability. At the same time, our hope is to share Rural Net and the collected internet speed data with any existing state or county level public service projects in this space, to facilitate future legislative efforts.
Client : RuralNet (Code for upper Vally Net : Code for America)
Timeline : 2 Months
Team : 3 Teammates
My Role : Product designer is responsible for designing the internet speed test application from user research to visual design. Also performed design lead role during the project to mentor and help other 2 designers for complete their tasks.
Methods : User Research, User personas, design ideation, low fidelity, application information architecture, Graphics, In depth style Guide.
Tools : Figma, Google Suite
Communication Channel : Slack for messaging, Google meet for meetings.
Project Management : Notion
Process
Deliverables
Speed test web app.
User Surveys plus Results
Publicly available map comparing measured speeds to ISP reported speeds.
Understand problem context area
Why speed is important?
High speed internet helps us to download and upload the data as well as we can watch videos without any latency. To understand how much data we are using on a daily basis As well as To understand the problem of rural people with internet connection. We conducted the user survey with the different category users and usage with the internet. As well as we took the Vermont place as an example of the internet connection.
This survey analysis graph helps us to understand how people are using the internet on a daily basis and how important it is in our lives.
1
We conducted the user interview with the three different users who are located in rural areas and we noticed the key insights.
User having trouble accessing the internet speed test applications.
Rural areas are having trouble accessing the internet and having low internet connectivity.
Users have a hard time downloading or uploading the documents and viewing videos.
Every category of age people has different requirements on the internet.
Understand target users
2
Conducted competitor research to identify weakness and strengths of the RuralNet application. We conducted the market research with other five competitor websites :
Ookla: https://www.speedtest.net/,. Fast: https://fast.com, RuralNet: https://ruralnet.codeforuv.org, libre: https://librespeed.org/, testmynet: https://testmy.net/
Market research & competitor analysis
3
From the market research we understood that users need a clear and simplistic web application for internet speed testing.
The speed test application would have a clear view of the map so we can easily detect the low speed internet from the locations.
Minimalist and educational details about the internet speed
Started working on ideation part of the application.
The process includes the most important key insights for the application. (Unique features), Those are Internet speed test results with map, User can submit the survey to help how the app is helping them in their everyday life.
Ideation
4
Sitemap of the application
5
To develop the ideas of the application, we created a sitemap of the application to understand the flow of the application as well as the tasks that user going to complete successfully.
Sitemap of the application includes the internet speed testing task as well as the user can see the results of the internet speed test along with that user will provide questionnaire about the experience of the app and internet speed.
Style guide & UI components
6
To create a consistency among the web application we created a style guide of the application that helps us to create a visual mockups for the application. While working on the style guide we set up a certain guide line of the accessibility and created a style guide that includes that accessible color palette with contrast colors, text size, wight and font family that helps to create a beautiful application, we did multiple variations on the speedometer graphics for progressing internet speed reading in speedometer, stoped speedometer and start internet speed test.
Accessibility test & Usability studies
7
Text color contrast and typography
Font size of at least 16px and ideally 20px for body text, so we created typography rules in our style guide as well as we tested with the temporarily disabled people and we confirmed that the test of the application is readable.
Most of the highlighted text is in heavyweight text so important text would be cathay and the user can read the data easily.
In the about RuralNet page there is a text explaining about the rural net. So their entire text would be body text, for the body text we used as 20px, font weight : regular and 50-60 characters around the length and line height is 1.5. [optimal line length : readability]
Tested the typography foreground and background color contrast and pass the test ratio of 4.5:1
Hierarchy of elements & Consistency & clarity
Speedometer located on the left side of the page and the remaining download and upload details are located at the right because the priority of the speedometer is less than the download and upload speed.
Used headings, titles and prompts.
speedometer with variable colors to represent the progress of speed test.
Uncluttered, simple screen layout
To get a good hierarchy of elements for the web application: start button placed in the middle of the screen with big eye catchy “START” letter so the user can easily click on the button. As well as the important details about the internet speed test is located around the start button.
We used a global navigation for the consistency of the website.
Icons with the medium weight text so user can easily identify the icon.
On the result page results of the internet speed test are more important than the start button.
Used exit, home, help, next page buttons on every page
Title of the page located in the middle of the screen so the user can easily identify the purpose of the page.
Build distinguished and consistent buttons.
Clear difference between the location title and icon and name of location so the user can easily identify the information and can read.
High fidelity mockups & clickable prototype
8
After applying the style guide as well as the site map of the application to develop the high fidelity mockups for the application as well as established the tasks for the application created a prototype to understand whether user completed their tasks successfully or not.
Here is the list of the tasks that user is going to complete using the below prototype.
Test the internet speed test and notice the upload and download speeds.
Completion on the internet speed test user can see the results and completed the survey, these survey helpful for the internet providers to improve the internet speed in rural areas.
User can see the results on the map to understand and detect the low internet areas.
Develop the app and live the application for everyone so they can test their internet speed.
More design research on mobile version of the app so the people can use the application handy, they can use when ever they want.
Design dark mode of the application for the people, who like to use dark mode theme.