Website & Mobile Web

UX Design | UI Design | UX Research


Vän i Umeå

Nonprofit association


May 2021 - Sep 2021


Nasim Nazemian

Marzie Tangestani


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.


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.


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


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


  • 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


  • Accessibility

  • Team/org alignment

  • Feedback from users/stakeholders

  • Intuitive and unsurprising design

  • Prioritization of feature introductions

UX Process


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?


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


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.


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.

Networking Website
Networking Website

Old Website

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.

Networking Website

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


Meet the Users

Based on the interviews and workshops we set up two personas. We referred to them throughout the entire product development process.


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


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.

Networking Website
Networking Website

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.

Networking Website

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.

Networking Website



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

Networking Website

UI Kit

Visuals follow a fresh, active and engaging style to communicate friendship, community, support and fun.

Networking Website
Networking Website

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.


  • 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


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.