Old Website
Website & Mobile Web
Redesign
UX Design | UI Design | UX Research
Client
Vän i Umeå
Nonprofit association
Duration
May 2021 - Sep 2021
Team
Nasim Nazemian
Marzie Tangestani
Tools
Pen & Paper, Miro, Figma
Research Role
Performed heuristic evaluation and competitive analysis, led a design sprint to form the journey map and MVP, conducted think-aloud usability tests and analyzed evaluation results.
Design Role
Lo-fi wireframes, conceptual development to mid-fi screens, refined features for the hi-fi prototype, and interaction design of the hi-fi prototype.
Overview
About the Product
Vän i Umeå is a non-profit association that creates meetings and friendship between Umeå residents from all over the world. The association owns a website as a means of providing information about its events and services.
Problem
The current website is confusing and unresponsive to users' needs. Per the result of our survey, 80% of the participants are not willing to try it again. They prefer to use VIU's Facebook group to get information.
Some issues with the current website:
Problematic information architecture, meaning users can't find what they are looking for, easily.
Problem with visibility of system status. e.g. no immediate or informative feedback on buttons, tabs,...
Poor visual design
Poorly designed forms
Solution
A redesign can resolve the usability issues and make the website the main means of communication between the association and its audience.
Deliver a great user experience to encourage engagement in activities, donations, volunteer work,...
Ensure consistency and clarity through the overall design
Revamp the site information architecture in order to create a smooth flow
Deliverables
Insights and reports from user research and interviews
Persona
Competitive analysis
Color palette + Typography guide
Button, links and states
Wireframes
Site Map
High-fidelity prototype
User testing results and iterations
Constraints
Accessibility
Team/org alignment
Feedback from users/stakeholders
Intuitive and unsurprising design
Prioritization of feature introductions
UX Process
Discover
Survey
We kicked off the project by conducting a survey to get more familiar with our primary users and their goals.
Who are our users?
What are their goals?
How they want to achieve their goals?
What platforms do they use?
Results
Per our survey results women are the most active users and the user age range varies between 20 – 60 years old.
Receiving information about the events is the majority of users’ primary goal and our users clearly prefer mobile over desktop.
We need to focus on:
Easily accessible events
Inclusivity
Responsive design
Interview
We included users with diverse needs in our interviews. During user interviews, users raised some crucial questions that targeted VIU's services and rules.
We witnessed users' confusion and uncertainty while performing regular tasks such as finding an specific event or sending the membership application on the website.
Results
Users' Frustrations:
Should I be a member, first?
Is there any age range for the activities?
How many persons will be in this event?
Do I need any specific tool, software, equipment?
How can I register?
Users need easily accessible
Events
Other services
Rules and regulations
Heuristic Evaluation
I have conducted a Heuristic evaluation test on the old website to measure the usability of user interfaces based on the established Nielsen-Molich heuristics.
Old Website
In combination with the user behaviuor recordings, the test result shows the following defections among others:
• Consistency and standards
• Error prevention
• Flexibility and efficiency
• Help users recognise, diagnose and recover from errors
Competitive Analysis
I picked 3 main competitor websites ( Hej Främling, Nya Kompis Byrån and Kompis Sverige) and tried to understand what they are doing right to help us outperform industry standards and what are their short-coming to identify areas of opportunity.
Stakeholder Interview
After bringing the data we have gathered through survey and interviews to the stakeholders’ attention, We noticed that engagement in events has a significant importance to them, as well.
Stakeholders need more user engagement in
Events
Volunteer work
Donation
Also, VIU is very flexible in terms of participation in its activities. And like many users, I also was not aware of this level of flexibility until I asked the stakeholders some questions.
Q: Do I need to be a member to participate in your activities?
A: No
Q: Do I need to register in activities?
A: No
Q: Do I need to have a Swedish Identification number to take part in activities?
A: No
Define
Meet the Users
Based on the interviews and workshops we set up two personas. We referred to them throughout the entire product development process.
Objectives
The stakeholders want more user engagement in activities and volunteer work, they want a fully functional/modern looking website that serves theirs as well as their users' needs:
•Deliver a great user experience to encourage engagement in activities, donations, volunteer work, …
•Ensure consistency and clarity through the overall design
•Revamp the site map/information architecture in order to create a smooth flow
Long Term Goals
•In 2 years, the website will become the users' primary means of getting information and services from VIU association.
•In 2 years, the number of members will increase by 40%
•In 2 years, the well-structured website will help the association to benefit from the support of more volunteers and donors
Ideate
HOW Might We...
After identifying design challenges through interviews and user research, we transformed these statements into questions that create a welcoming space for “out of the box” thinking.
HMW structure the information in a way that make sense for all kinds of users?
HMW design the web and mobile site in away that is beneficial to both native and immigrant users?
HMW help our non-savvy users to benefit from our redesign?
HMW describe our mission in a clear and simple way?
HMW restructure events page and make it usable/accessible to all users?
HMW build trust?
Mashup HMVs and User Journey Map
I mapped out the users’ steps to see how I could simplify their journey to help them reach their most important goals with the product.
Afterwards during a workshop and with the contribution of one of the stakeholders, we made a mashup between HMVs and user journey map while each HMV can support the elevation of user satisfaction and create a base for an early MVP.
Minimum Viable Product (MVP)
Minimum Viable Product
I used the HMW question generated in the previous stage to plot a list of the possible features on a graph.
This helped narrow down what was absolutely crucial for delivering the MVP.
Card Sorting and Site Map
We ran five closed card sorting sessions with five applicants. After gathering and analyzing the results, we decided on fewer number of categories to form a straightforward and easy to navigate site map.
Sketches
Sketches
It was time for some sketching to figure out how each page should look like and what could be the best and more accessible way of categorizing and displaying the events.
It turned out we needed to implement different sorts of filters on the website. Especially on its event page.
Low Fidelity Wireframes
Prototype
UI Kit
Visuals follow a fresh, active and engaging style to communicate friendship, community, support and fun.
Test
Tree Testing
We performed usability test sessions with 6 different participants; 4 of which were already familiar with Vän i Umeå and 2 were considered as new users.
The aim was to evaluate the site structure and the test was conducted on the mid-fidelity prototype.
We asked each one of them to perform 6-7 tasks on the desktop prototype as well as mobile web design and measured their success rate with regards to the time and effort they had to put to accomplish the task.
Results
We must consider multiple pathways for some frequently used information such as contact info.
Redesigning activity page and make it more accessible and easier to use.
Designing an updated form for membership
Interactive Prototype
Revamped the whole site map according to user research
Designed multiple pathways and view options for the most crucial parts of the website e.g. activities
Implemented a consistent UI and UX
Resolved inconsistencies in content creation
View the mobile prototype in Figma
View the website prototype in Figma
Takeaways
It was interesting to be able to interview with the actual users of the product and hear their frustrations, needs and sometimes fascinating ideas about the website.
Revisiting the design from stakeholders point of view and considering their goals and needs alongside the users' was also an invaluable experience.