.png)
Membership Management Application
Research
Analysis
Design
Project Details
Problem: Digitalize the existing manual membership issuing process of the VVOGA (Vishaka Vidyalaya Old Girls Association)
Client: VVOGA (Vishaka Vidyalaya Old Girls Association), Colombo, Sri Lanka.
Role: UX/UI Designer in Loonslab
Duration: January 2021 - May 2021
Contribution
User Interviews,
Competitor Analysis,
Creation of User Story Map,
Information Architecture,
Creation of the User Flows,
Low Fidelity Wireframes,
Mid Fidelity Mockups and
High Fidelity Mockups.
Tools used
Paper and pencil (Sketches),
Figma (Prototyping),
Miro (User flows and storymaps) Zoom (User interviews)
The Project
The VVOGA (Vishaka Vidyalaya Old Girls Membership Association) is an online high school alumni portal developed for the Vishaka College, Colombo, Sri Lanka. The VVOGA web application allow old pupils of the school to get the membership as well as the approval, contribute to the fundraising with online transactions and maintain the database of all the old pupils. The application further allows school development project and event management, communication in between stakeholders, analysis, and report generation of progressed events.
Stakeholder and User Interviews
I conducted a series of interviews to deeply understand the problem this project was attempting to solve. Therefore, I concentrated on understanding the user goals, the context of use, and current methods of membership approval process.
Then the following primary user groups have been identified by me based on their user roles,
-
New OGA membership applicants: A person who is willing to become a OGA member who is also an old pupil of the school.
-
Existing OGA members: The existing members of the OGA
-
Ex-Co members: These are the executive committee members who also the active members who perform the executive tasks to manage the membership association. Ex-Co members give the initial approval to the new members after reviewing the applications, organize events and school development projects.
-
Secretary (Admin): The head of the membership association who manages the complete membership portal. Secretary also controls the Ex-Co members’ tasks, appoint Ex-Co members as well as issue the final approval for new members.
Competitor Analysis
I conducted a competitor analysis to better understanding of the application area as well as to get the design inspirations.
Therefore, I searched for companies and applications which provides similar kind of services. Further I dug deep into current market solutions for the features which I have been already identified.
Thereafter the analysis was shared with the product owners and the software development team later lead to the final designs.
User Story Map
I created user story map to help conceptualize the cope of the project as well as to properly all the user stories, collaborating with the project manager, business analysist and the software developers. The user story map is an especially useful tool for documenting the project requirements, understand the product’s users, map user activities, identify the technical requirements as well as alternatives and plan the sprints.
The first level of the story map represents the main features and the functionalities of the application. The second level represents the user stories which will create each feature. The third level includes all the user activities and user tasks. By creating the user story map, I was able to prioritize requirements and create a strong wireframe.
Mapping the user flow
Hence there are multiple stakeholders and multiple approval stages, it is always important to identify the proper application approval process. The new membership application will go through different stages before it is getting approved. I worked closely with the customer to identify the most important requirements in their manual membership process. Later I communicate with the software developers and mapped the manual process into a digital process. Further I validated the user flow with the customer.
Swim lane diagram has been used visualize each stakeholder’s actions / accessibilities in the approval process.
.jpg)
Wireframes
Through the wireframe I was able to design user flow, interactions, and navigations. There were several iteration cycles have been used during the complete wireframe creation process and worked closely with the customers / end users. The technical feasibility of the created wireframes have been evaluated working closely with the software developers. Wireframes have been annotated to clarify the requirements.
Interface Details
Error Recovery
Error messages have been used to clearly communicate what went wrong as well as to inform how to recover from it. Usage of professional language implements professionality through out the app as requested by the customer.
Error Preventing
The application has been inherently designed to prevent errors.
Eg: The minimum requirement to become an OGA member is the attendance of the school at least for two years. So I have designed the wireframes to show dropdown results that the difference between the year of admission and the year of school leaving should be greater than or equal to two years and communicated this with programmers by the annotations.
Navigation
I have used simplified navigation patterns for the users to get interacted with the content of the application and used tabs to move in between content on a single page.
Minimal Performance Load
I have provided search bar which can be used to type in a key word / phrase which then allows to search members using any criteria. Additionally, the notification panel also provides the actionable links based on content.
Progress bar
The patter used in the progressbar notifies the users that their currently in the middle of the processes and how many more steps are remaining to complete the application process.
Product Mockup Screens
