My Profile
Case Study
Client
My Profile is a contingent of the Freeware Lovers. Freeware Lovers is a community aimed at sharing free software and open source features.
Product
Freeware lovers are looking to develop a digital business/ identity card allowing users to connect multiple platforms with one easy click.
My Profile.
Steps
-
Product research - Competitors, market.
-
User research - Surveys, personas.
-
Designs - User flows, card sorting, prototyping.
-
Feedback - Testing, iteration, repeat.
Requirements
Design a portal allowing users to create, share, download and link a digital business card. with standard CRUD. This portal needs to work on both desktop and mobile to guarantee.
Time Allotment: 2 Weeks
Product research
%20My%20Profile%20PRD.png)
The team consisted of a part time junior UX designer, a part time junior UI designer, and a developer. First steps were to write up a Product Requirements document with the project lead to cement in requirements. Following this, I divided up the roles suiting each team members strengths.
%20My%20Profile%20To%20Do%20List.png)
Naturally due to the part time nature of the other designers, their input was limited. The research began with an analysis of search trends and phrasing, keyword analysis and feature requirements. Merging with competitor analysis and a styling reference to create a research guide.
%20Completed%20Style%20Guide%20Draft%201.png)
With the research summary outlining the potential features and options, My Profile might offer. With this, I made an impact map of the demographics and use cases, marking the impacts and deliverables for each.
%20Impact%20map_edited.jpg)
After creating the competitive benchmark and the impact map, I developed a rough draft style guide with potential colours, fonts and examples of how it could look. Making the site appealing for the various demographics, ranging from business professionals to influencers to young adults, it has to look sleek and professional, "cool" and inviting, and trustworthy.
The next step was external research methods, survey and persona drafting. I did the unthinkable, shared across my LinkedIn to reach the professional market, connections in the influencer market and among the students to get their input.
User research
%20My%20Profile%20Survey%20Results%201.png)
%20My%20Profile%20Survey%20Results%202.png)
%20My%20Profile%20Survey%20Results%203.png)
Creating the personas, I modelled them off traits of various people around me to better connect with their thought process.
Persona journey framework:
Personas and frameworks:
With the research collected and collated, survey data logged, and the personas with their expected flows tracked out. The next step is creating an affinity diagram with the results and mapping out a user flow before beginning prototyping.
Design
Gathering all the research, I then went through everything with some help from some fresh eyes to interpret the information as thoroughly as possible. Assorting the information on post-its adding each idea to the wall as we progressed.
%20Card%20Sorting%20Results%202.png)
Finished Affinity diagram:
%20Affinity%20Diagram.png)
%20User%20Flow%20Chart.png)
Devising the flow chart allowed me to map out the research and requirements better understanding the screens and interactions and what happens with every click.
With the affinity diagram and flow chart done, I finished off sketching and prototyping the layout. Sketching the design was very simple as all of the choices were informed by previous steps. Meaning every option and the style all fell into place. With a UI Designer on board, I only had to create the shell of the site to be decorated.
I made the prototype using the now defunct Adobe XD, Figma is the industry standard but at the time I was curious to see what adobe could do. Originally it was going to be made through Marvel as a low fidelity prototype from the sketches of the layout, unsatisfied with the result and limitations of the prototype
Finished prototype screenshots:
With the prototype laid out and the interactivity mapped the next step is to test and iterate on the designs themselves. Once the testing angle has been satisfied it is ready to be handed off.
Testing
Testing the early prototypes was done on a small and discreet scale with the style of the website was still in development. The focus for this round of testing was more on the interactivity and usability of the navigation.
The responses were good, with a few questions as to how they could highlight independent links, expanding the Social Media account limitations, how many base templates there are and how can one create templates further down the line. Many questions were about the sharing capabilities of the cards themselves and how to use it with developing technologies.
It was also at this stage developers and, the UI Designers started to join the project. I began handing over the responsibilities of the project to them in the form of Wireframes.
What's Next?
Developers began working on the backend. The design process continues improving the UI side. I will have a role in the further development of the project and to make sure that the finished project is still usable and easily navigated by going forward with testing before it is released. Tasks to be completed include the creation of templates, stylised design, user testing and finalised wireframe for developers.
Reflections
In hindsight, approaching the research elements of this project, I found the pandemic situation created a slant on the long term effects of the potential market, short-term demand for digital identity cards created and used in remote and socially distant networking events. Though a boom in the market, this trend is only a short term and the potential for growth in digital networking goes beyond the pandemic. However, my research should have factored in the pandemic a little more as survey results skewed towards the issue.