CityScout (Website) is aimed at providing information access about a city for all online users of different demography.
CityScout (Mobile app) is aimed at providing offline information access capability about a city for all it's users.
Why is it designed?
Challenges identified
• Users are unable to find all relevant information about a city in one place. • The users with poor internet access face challenge viewing information on their device.
Goal
The product has a website and also a mobile app which is designed to provide offline viewing capability to it's users, all in one place. Also, with special handy features.
My role
Overview
• UX designer performing - Research, Visuals, Interaction and Motion design from conception to completionfor this app. • Design Tool: Adobe XD, Google Jamboard.
Contribution details
• Conducting User Research – Creating empathy maps, Personas, User stories & Journey maps, Defining problem & Hypothesis statements, User Flows, Competitive Audit. • Creating Wireframes. • Creating Low Fidelity prototypes. • Usability Study Plan and Research. • Creating Spread sheet notes and Affinity Diagrams to develop insights. • Creating Sticker sheet, Mockups and High-Fidelity prototypes using Adobe XD. • Accounting for Accessibility and Iterating on the design.
User Research: Summary
I conducted interviews and created empathy maps to understand the users.
Target Audience
Primary user groups identified were adults: · With limited internet. · With low/ limited technical literacy. · Who travel.
Pain points identified
· Lack of websites/ apps that provides city info all in one place. · Cost – Some apps charge for offline view. · Most apps feature geo-navigation.
Personas
Persona 1 - Carla Winston
Problem statement:
Carla is a mobile user with poor network and has challenge accessing information online due to network instability and it gets challenging if she wants to prepare for a travel.
Image – Persona: Carla Winston
Persona 2 - Paula Elson
Problem statement:
Paula is a user with limited technical literacy who prefers to get all relevant information in one website as she finds it overwhelming to refer various sites.
Image – Persona: Paula Elson
Competitive Audit
An audit of few competitor’s products provided direction on gaps and opportunities to address Circle's design.
Image (a) - Competitive Audit for CityScout (Website and App)
Image (b) - Competitive Audit for CityScout (Website and App)
Wireframes
Paper Wireframe - Website
I did a quick ideation – crazyeights to come up with ideas for the design. My focus was specifically on keeping the design simple and information easily accessible by users.
Image - Paper Wireframes of CityScout Website
Paper Wireframe - Mobile App
By drafting iterations of a screen in the app ensured that the elements which made it to digital wireframes would be well-suited to address user pain points.
Image (a) - Paper Wireframes of CityScout Mobile App
Image (b) - Paper Wireframes of CityScout Mobile App
Digital Wireframe - Website
As the initial design phase began, I made sure to base page designs on findings from user research and competitor analysis.
· Intuitive buttons and navigation. · Providing essential buttons. · Ample spacing between contents and visual elements. · Emergency call to action. · Categorical search.
were also a key part of my strategy.
Image (1) - Digital Wireframe of CityScout website (on mobile) highlighting features
Image (2) - Digital Wireframe of CityScout website (on mobile) highlighting features
Sitemap
Convenient usage was a primary pain point for users, so I used that knowledge to create sitemap. Goal here was to make strategic information architecture decision that will make overall website navigation simple and easy to use.
Image - Sitemap of CItyScout website
Digital Wireframe - Mobile
As the initial design phase of the mobile app continued, I made sure to base screen designs on findings from user research and competitor analysis.
Image - Digital Wireframe of CItyScout Mobile App highlighting features
Low - Fidelity Prototype
For Website
In this final version of prototype, design is more focused on intuitiveness, use of white space and providing essential buttons. I made sure to implement the inputs from my research on early version of prototype with an intention to address users concerns.
("Design changes" can be found under usability study)
Image - Low Fidelity Prototype of CityScout website with links connecting all the screens
For Mobile
In this final version of prototype, design is more focused on feature access and usage of screen space to include the essentials for quick reach of users.
("Design changes" can be found under usability study)
Image - Low Fidelity Prototype of CityScout Mobile App with links connecting all the screens
Usability Study finding
No.of participants – 5
Round 1 Findings Summary (Website)
· Minor adjustments in content layout and spacing.
Design changes (Website)
Early designs allowed for some customization as follow -
The initial design paved way for further discovery of design direction during usability study and the research participants provided insights on their concerns and added suggestions that would make their experience better.
· Added Light/ Dark mode. · Quick navigation access to essentials. · Scroll to top.
Image (1) - Final design of CityScout Website highlighting design changes
Image (2) - Final design of CityScout Website highlighting design changes
Round 1 Findings Summary (Mobile App)
· Quick search (City) feature on landing screen. · Share info feature. · Overall visual improvement.
Design changes (Mobile App)
Early designs allowed for some customization as follow -
The initial design paved way for further discovery of design direction during usability study and the research participants provided insights on their concerns and added suggestions that would make their experience better.
· Emergency CTA on home screen. · Feature to share info. · City description and quick access to view city info.
Image (1) - Final design of CityScout Mobile highlighting design changes
Image (2) - Final design of CityScout Mobile App highlighting design changes
Mockups - Website
Sample mockup images from the CityScout website
Image - CityScout Website Home Page (Guest User)
Image - CityScout Website Home Page (User Login)
Image - CityScout Website Hospitals Page
Image - CityScout Website Reviews Page
Image - CityScout Website City Destinations Page
Mockups - Mobile App
Sample mockup images from the app
Image - CityScout Mobile App Welcome Screen
Image - CityScout Mobile App Login Screen
Image - CityScout Mobile App Home Screen
Image - CityScout Mobile App City Info Screen
Image - CityScout Mobile App Hospitals Info Screen
High - Fidelity Prototype (Website)
The final high-fidelity prototype presented smooth userflows to access information about a city on CityScout Website.
Image- High Fidelity Prototype of CityScout Website with links connecting all the screens
· Provided multiple ways to facilitate navigation – Navigation indicators, Screen headings, clear hierarchy in each page. · Light and Dark mode features to view page in 2 different contrasts for users with sensitive vision. · Intuitive buttons and various convenient features at finger tip for users to help them use the CityScout more easily and also be able to respond faster in case of emergencies.
Takeaway
Impact
The responsive website and dedicated mobile app offers lot of accessibility features and navigation flexibility which makes users feel CityScout is inclusive and helpful.
What I learned
While designing the website, I learned how usability studies and peer feedback influenced each iteration of the website’s design and design change significantly impacted user’s experience.
While designing the mobile app, it offered challenges and made me take design decisions that would make availabiltiy of features more meaningful and usefulness of the designs positively impacetd users experience.
While also making sure both app and websites did not stray from their purpose of helping users get information access about a city.
Next Steps
To conduct follow-up usability studies to validate whether the pain points users expressed in previous studies have been addressed effectively.
THANK YOU!
For your time reviewing my work on CityScout Website & Mobile App. If you’d like to get in touch, please fill the form below and I will get in touch with you :-)
