Context: City website redesign: responsive Tablet, desktop and mobile screens.
App used: Sketch
What I did: Information Architecture, feature prioritization, wireframing, and UI design
Sooo what's the deal?
As a resident who uses the city's website I noticed a couple of things that could be improved. The first being the navigation. The navigation in the city website can feel overwhelming, especially when you haven't been to the website in a while.
This, followed by the lack of better hierarchy within its departmental pages can make it a pain to find information. Pawtucket is a small city but I'm a firm believer that every city, not matter how small, should have an easy to navigate website.
I will go over the process I took to redesign the UI for desktop, tablet and mobile screens...
...But first some UI design
Home page - Landscape tablet
Home page - Landscape tablet
Departmental page - Landscape tablet
Mobile screens - Home and departmental page
The Process
Going into this redesign project I knew the website needed to serve users from many backgrounds with different types of goals. Having this in mind I began brainstorming by drawing up a quadrant where I could list user needs, user goals, my assumptions about users and possible constraints they might face.
This quadrant help me pinpoint the type of possible users. It also helped me get an idea of possible features and got me to start thinking about feature prioritization.
Brainstorming
Main assumptions I made about users include:
Website will target 3 types of users: city residents, visitors, and business owners including prospective ones.
City residents are the main users.
Residents will use the site to mostly pay bills, get certificates, licenses, etc.
Current & potential business owners will want info about licensing, resources, etc.
Visitors and residents want current news of what's happening in the city (ex: arts festival).
Visitors want to know info about the city.
Feature Prioritization
Pawtucket is a small city so I'm going by the assumption that most of the website users are residents followed by business owners (both current and prospective) and visitors, especially those coming to the city for the Arts festival. Some of the features and other items to add include:
Be able to pay bills
Be able to apply for licenses, get certificates, etc.
Have menu cater specifically to primary users: Residents, business owners and visitors
Senior center links on home page
Important departments need to be prominent. ex: Fire, police departments etc.
News & events prominent on home page (for residents and visitors)
Highlight common features used by residents
Information Architecture
Going through the pages from the current Pawtucket site I realized some of them could easily be consolidated into one. Having this in mind I rearranged some of the information architecture and created the site map above.
Wireframes
Home page wireframes - mobile & desktop
Wireframes allowed me to freely explore many different UI options in a short amount of time. They also served as a way to visualize the final product. I like to use annotations to keep track and remember items I sketched. "squiggly lines" can become hieroglyphics when you need to revisit designs days or weeks down the line so annotations for the win.
User Interface Design
After I decided on a layout and the hierarchy of items on the screen I designed the UI. Below are the finished desktop and mobile screens while the finished tablet ones are at the top of the page.
Desktop - Home page
Department page - City clerk
Home, department and Menu - Full view