Product & Content Designer
My Role
UX Writer, Content Designer
Team
Product Designer (1)
Software Engineer (1)
Product Manager (1)
Business Analyst (1)
Process
Plan > User Research > Ideate/Write Copy > Prototype > Test > Iterate > Test
Timeline
4 months
Tools
Figma, Asana
THE CHALLENGE
The Smart Cities Challenge is an annual competition that invites students from Historically Black Colleges and Universities across the country to create innovative solutions that utilize IoT technology. The competition is supported by a range of partners including the city of Winston-Salem, Winston-Salem State University, Mastercard, and Amazon.
​
Our task was to create a mobile app that improved utility management and city communication in Winston-Salem, NC. I participated in the competition as the content designer in a 5 member team, and competed against 29 other teams from other institutions.
SOLUTION
WSconnect is a mobile application designed to assist residents of Winston Salem, NC with discovering recreational/city council events and managing household utilities such as water, waste and electricity.
Our product simplifies the process for completing bill payments and finding relevant information. It also incorporates a community support feature that enables the city’s residents to become less reliant on the city’s customer support call center.
APPROACH
I began by brainstorming ideas during meetings with the team, and collaborating on tasks through Asana, and Figma. I also completed competitive analysis on Winston-Salem’s current methods for addressing waste disposal, and informing residents of important information and events.
Additionally, I studied the voice and tone used in the city’s website to grasp the language style, and conducted research studies with Winston Salem residents to understand their expectations for waste and utility management products.
After gaining better knowledge of the city’s needs and its audience, I created the app’s Style Guidelines, as well as the Information Architecture, and conducted usability testing in order to iterate and improve the app’s content.
PHASE ONE
Planning
While brainstorming our solution, we decided to develop a mobile application instead of a website, in order to encourage engagement by incorporating useful features. Subsequently, we identified our target audience (residents aged 25-40), and utilized Asana to manage, track, and assign tasks to each team member.
PHASE two
Research
I conducted competitive analysis on current alternatives, such as the city website, and partner city apps being utilized to meet residents' needs, and discovered the following:
-
Information on the city’s website was lengthy and not easily scannable
-
Content was hard to understand
-
Information Architecture lacked structure
We also interviewed 12 Winston Salem residents, including city council officials, and gathered information on the pitfalls of current alternatives and the resident’s expectations for better solutions.
Some key findings we highlighted in this stage were:
-
Average online rating for current alternatives was 1 out of 5 stars
-
Resident’s experienced confusion while navigating the city website
-
It took residents a lengthy process (6 clicks) to complete bill payments
PHASE THREE
UX WRITING/ CONTENT DESIGN
NAMING PROCESS
I conducted a thorough naming process, which included competitor analysis and copyright availability checks, which narrowed potential names to 5. Then, I presented the options to the team and leadership. The final decision was made to choose “WSConnect” with Winston-Salem’s acronyms to enhance recognition and trust.
INFORMATION ARCHITECTURE
I wanted to complement the user experience with a clear Information Architecture of secondary options. The IA would then be refined based on feedback from user testing.
STYLE GUIDE
After plenty of research and interviews with city officials, I was able to create a style guide that reflected the city’s values and principles. Being able to produce these guidelines would help encourage consistency across the product.
SIMPLE
The app is straight to the point, so are our words. We avoid using complex or vague words to encourage comprehension.
CONCISE
Our users need to get the right answers to their questions, and they need to get them without coming across unnecessary information. We make sure the articles they need are easily found and succinct.
Maintain a proper voice and tone while ensuring that copy is clear and easily understandable.
Vague and overly formal language.
Honest
We take the time to explain why, so users are at ease when they are prompted to provide personal information.
ONBOARDING
My goal was to create a smooth onboarding process. It was important to make sure users understood the app's features and felt comfortable with providing their personal information.
The app opens with its logo, along with its name written in Bold
The user is then taken through three subsequent screens with short descriptions of the app's key functions. They can click “Next” to read each one or click “Skip” to bypass them.
They are prompted to create an account and enter in their first and last name, email and password
Finally, they enter their address information while being informed on why it is needed.
usage overview
The utilities section needed to show the total balance owed for water and electricity bills,the separate bill amount for both utilities. Also, the waste section showed trash and recycle pickup dates, a scheduled pickup option and articles with tips on managing these services.
Since the sections displayed a lot of information, it was important to clearly label every overview card.
PHASE FOUR
Usability Testing
We conducted usability testing on 12 Winston Salem residents. The participants were asked to complete certain tasks using the app, while we observed, took notes, and asked for feedback.
PHASE FIVE
Iteration
While analyzing data collected from usability testing, I discovered that 40% of Winston-Salem’s population spoke Spanish. As a result, I decided to make the content more inclusive by giving users the option to select English or Spanish as their preferred language. This action would translate the in-app copy into whichever option was selected.
The “reschedule missed trash” and “schedule trash” options were redundant,
so I removed irrelevant copy, and condensed it into one option.
BEFORE
AFTER
During testing, participants did not understand what the camera icon displayed on this screen was used for. To solve this issue, I included a tooltip to inform first-time users of its function.
BEFORE
AFTER
OUTCOME
After we developed the app, I received positive feedback from city officials on the structured Information Architecture, clear calls to action and human feel of my copy. In addition, my team and I placed 2nd in the competition, and were approached by an investor who expressed interest in providing funding to further develop, and launch WSconnect.
We are currently discussing next steps with the city to materialize the launch of WSConnect in Winston Salem, NC.
