My Profile
Case Study
The Client
My Profile is a contingent of the Freeware Lovers a company with whom I have prior experience working. As a result, when approached with the concept, I knew that Freeware Lovers is a free web service for mobile and desktop users designed for changing cases of bodies of text. Freeware Lovers is a community aimed at promoting free software and features.
The Challenge
Freeware lovers are looking to develop a digital business/ identity card allowing users to connect multiple platforms in one easy link as opposed to sending several links for friends or business connections to organise. The next step in technological development, updating physical cards to the 21st century.
Lead UX Designer
-
UX researcher
-
Interaction designer
-
Project Lead
The Roles
The Goal
Develop a portal allowing users to create an account, create a card and access to download, link and make changes where necessary. This portal needs to work seamlessly on both desktop and mobile to guarantee easy use regardless of location or access.
The Steps
1.) Research into the potential market for the product and best case uses problems that will need to be solved while maintaining a user-friendly interface.
2.) Compiling the research and arranging/assimilating the data to help develop an interface from the feedback and information gathered.
3.) Create flow maps, mock skeleton designs for both desktop and mobile layouts culminating in a low fidelity prototype and wireframe delivered to the Developers team and the User Interface team.
Time Allotment: 2 Weeks
Step 1.) Research
%20My%20Profile%20PRD.png)
%20My%20Profile%20To%20Do%20List.png)
Knowing this project would be a large one to take on, I recruited another UX designer, a UI designer, and a developer to help with the research and product development side. With this in mind, my first steps were to type up a Product Requirements document to help write down the aspects and understandings of the project as we knew it: Its purpose, the problems it will likely face, the target demographics and more. Following this, I divided up the roles suiting each team members strengths in a bid to utilise the members.
Unfortunately, due to the timing of the project, my teammates could not contribute as much as I had assigned in the "To-Do List" so I ended up taking on the research and initial design stages by myself. Although this was a daunting undertaking, I already had a list of the divided up tasks so, my approach was organised and straight forward.
The research began with an analysis of search trends and phrasing, keyword analysis and feature requirements. I merged this with a competitors analysis and a styling reference research guide.
With all the research completed, I compiled it into a "brief" document outlining the strengths of the competitors and what My Profile could learn from the features and usability of its competitors. With a brief segment at the end 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 demographic.
%20Impact%20map.png)
%20Completed%20Style%20Guide%20Draft%201.png)
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. Using colour theory to make the site appealing for the various demographics, ranging from business professionals to influencers to young adults, meaning it had to look sleek and professional, "cool" and inviting, and trustworthy. With this in mind, the font needs to reflect the same ideals while being legible across devices.
The next step of my process was to approach external research methods, writing up and creating a survey. I then shared across my LinkedIn to reach the professional market, connections of mine in the influencer market to get their input and among the students of my university to get the student input. As well as amongst Freeware Lovers to get their input and the input of their network.
%20My%20Profile%20Survey%20Results%201.png)
%20My%20Profile%20Survey%20Results%202.png)
%20My%20Profile%20Survey%20Results%203.png)
The graphs above contain the results of the surveys. The leanings of the various demographics by percentage to reflect the potential growth market of My Profile.
With three more steps in my research process, I card sorted social media accounts to determine which would be suggested by the various template purposes.
The card sorting results, as shown below, reflected the opinions of some potential users. The results speak for themselves, though not set, they are similar to what I had predicted they would be.
%20Card%20Sorting%20Setup.png)
%20Card%20Sorting%20Results%202.png)
%20User%20Flow%20Chart.png)
Unfortunately, this project did not have the budget for thorough and proper user testing. As a result, it required the creation of personas and user journey maps. Though not the most accurate method of testing, it put my empathy levels to the test. Before I could start developing the persona, I needed a User Flow Chart this helped plan out the routes each user would be taking to bring them through the My Profile experience.
Devising the Flow Chart allowed me to put some of my research into use, each step concerning ease of use and impact on the flow for the users' experience.
Creating the personas, I modelled them off traits of various people around me to better connect with their thought process. Adding these elements allowed me to properly consider legitimate responses to the "My Profile" flow and layout. I ran the personas through a template flow diagram to see how each character would react to the same process and where the design fails for which demographic and how to improve it.
Step 2.) Processing the Data/Planning the Design:
%20Affinity%20Diagram.png)
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. Due to the lockdown at the time of the Affinity Diagram, parts of the assistance had to come remotely. As a result, the process took two steps, firstly in the physical act of adding the post-its to the wall and secondly through a digital platform allowing for remote contributions. I completed the process with a guideline for the project design.
With the feedback and affinity diagrams done, I finished off the creation side of the process through sketching and prototyping the resulting layout. Sketching the design was very simple as all of the choices were informed by research results. 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. With this in mind, the emphasis was on the Users Experience as opposed to the style and Interface Design.
Step 3.) Prototype:
I made the prototype using Adobe XD. 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 I developed the hand-drawn designs into rudimentary digital design, creating the prototype from them with a bit more interactivity. Frankly, the digital prototype is easier to navigate and recognise the components, a low fidelity design such as the one I had planned on making would have been far too basic for this stage of the design process.
Step 4.) Testing:
Testing the early prototypes was done on a small and discreet scale as the style of the website was still in development. Any with links to the prototypes had to ignore the look and feel of the site. 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 their template 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 have begun working on the backend of the design to increase possibilities of the finished product. The design process continues to 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.
