UX DESIGN
Here is my portfolio for my UI/UX design case studies, Figma mockups, and usability test reports. I have strong interests in learning more about product design and UX research. Overall, I bring my strong suits to any team by being able to work independently and with a team. My background is in technical writing along with front-end development which are needed skills when it comes to refining the user experience for multiple audiences.
Case Studies
As a content creator for Ponderly, I helped with the app development process for 3 months. I wore many hats for my role by helping to conduct research on competitors, designing wireframes, writing instructions for modules, and more.
​
Learn more about my overall experience working for a startup company!
As the project lead for my senior capstone project, my team and I conducted a usability test on a popular bus route tracking app, TransLoc. Using many methods such as TAP, SUS, Likert scale, closed card sort, heuristic evaluation, and more, we were able to retrieve results and implement them into a redesign of some app pages like the homepage and search page.
Furthermore, explore my journey from my previous project, what changes I made in the revision, and how I grew from the experience.
For my prototype, BiteExpress, I created an interactive experience through Figma for foodies to get their food delivered to them. In this case study, I will explain my in-depth process and outcome with the app.
Through CursorSwap, a module designed to teach those how to customize their cursors, my partner and I utilized various principles and laws such as Spatial Contiguity Principle, Miller's Law, Multimedia Principle, and more in the design process. Explore the tedious process in this case study!
Mockups
Travel Landing Page Mockup
Member(s): 1
Tool: Figma
Duration: 1 week
​
For this mockup, I designed a webpage or landing page for a travel site, Ace Travel. Though the project was small, it introduced me to using auto-layout functions as well as allowed me to put my UI design skills to the test and I'm happy with the results.
​
Constraints
I encountered some constraints throughout such as getting the vacation tabs and comments to flex around each other; I cannot mention how many times I had to change settings for each individual component of the description boxes to work together! More of the complaints that I had with auto-layout involved:
-
Padding - trying to get the many elements to align and work together instead of breaking the entire component apart.
-
Component elements - understanding when it is necessary to leave an object to use auto-layout or to turn into a component then use auto-layout; it depends on the situation.
​
The various Figma functions paired together work but I believe it takes a long while for a new user to fully master them. It felt like there were occasional glitches that would undo my selections at times so unintentionally they affected my designing abilities.
Benefits
On the other hand, I can say that understanding these issues and developing workarounds allowed me to become more efficient at the program; perhaps in the future I can provide these tips to others who are struggling if these issues don't get fixed within Figma. I also feel like I was able to build upon these skills in my later projects such as my social media app prototype and BiteExpress food delivery app prototype.
​
Travel Website Mockup
Member(s): 1
Tool: Figma
Duration: 1 week
​
This mockup was designed for another travel site I created, NexTrip. For this project, I created the landing page and content pages on different interfaces ranging from desktop to an iPhone 14 frame.
This was my first big assignment so I did run into issues completing everything. As my only prior experience to auto-layout was the travel site as mentioned before, I had issues adjusting the layouts for the navigation bars.
​
Constraints
For the project, I had a few constraints along the way such as:
-
Deciding a good color scheme.
-
Designing the layout for the webpage.
​
Developing the color scheme took some time since I was unsure on how they should appear; I'm content with it but I would've liked to include some contrasting colors for the homepage. Nonetheless, designing a good layout using grids and spacing is necessary. As the webpage does present different content than the other frames, it would've been nice to include what the comments and vacation tabs would look like on a desktop site version. The constraints seem nitpicky, but I am happy with how much I was able to get done in the matter of a week and a half.
​
Benefits
Despite the constraints, some benefits did come from it such as:
-
Understanding Figma's auto-layout function.
-
Creating my first prototype from beginning to end.
​
Using Figma's auto-layout function as first was stressful but overtime, using my own judgement paired with some tips and tricks I found paired with their tutorials, it became easier overtime. There were many times throughout when I gave up simply would've taken a C instead of dealing with the function, but I finished it out towards the end. On the other hand, it provided me the opportunity to make mistakes and get feedback from my professor on what I should I improve on (e.g. using grids to help with the spacing on the layout, understanding how to use auto-layout effectively, etc).
Projects
Heuristic Evaluation (Gerhardt-Powals)
Members: 4
Tool: Microsoft Word
Methodology: Heuristic evaluation (Gerhardt-Powals method), user persona, user story
Deliverables: IMRaD report, memo
Duration: 1 week
​
Overview
In the span of a week, my team and I crafted a heuristic evaluation using Gerhardt-Powals’ principles to evaluate the website www.sebookstore.com for any usability errors that were present on the site (and are still present today, unfortunately). While performing the evaluation, we crafted a user persona, Brooke Turner, a 25-year-old college student who is studying HVAC, and how she would complete her goals of;
-
Gaining access to training resources
-
Getting the best study material that will allow her to ace her license exams for HVAC
-
Finding courses that are easy to follow
In addition to the persona, during the observation, each teammate performed an individual analysis of the site and rated various issues we discovered using severity codes ranging from cosmetic to major.
Constraints
There were a few constraints we ran into when we began doing the process and review notes our professor left for us. To summarize we had issues such as;
​
-
Confusion between the process with heuristic and cognitive walkthrough.
-
Final document errors (e.g. spelling errors, incorrect APA formatting)
-
Inconsistencies with the overall information regarding each teammate’s individual analysis.
-
Some information being miscategorized in either ‘results’ or ‘methods’, unspecified examples.
​
Benefits
There were benefits that came from the assignment such as;
-
Understood what a heuristic evaluation entailed and how Gerhardt-Powals’ principles guide researchers in checking the usability of a product over other methods.
-
Conducted thorough research to help fix a site and improve ease for the user.
To elaborate, the assignment was confusing and oftentimes I would get some methods such as cognitive walkthrough mixed up with the heuristic evaluation so having groupmates to bounce ideas off of and help with research was helpful. For example, there were some usability issues that I didn’t notice at first such as;
-
A lack of emergency exits and error preventions
-
Inconsistent wording and formatting on obscure pages for books and other products
Overall, with the extent of the assignment, having a team allowed us to check every inch of the site in hopes of finding errors that can be improved to help Brooke in her endeavors and other users. The usability test wasn’t as extensive but allowed me to place myself in a user’s shoes and figure out what are the typical functionalities of a user interface compared to other well-known websites or apps.
Cognitive Walkthrough
Members: 3
Tool: Microsoft Word
Methodology: Cognitive walkthrough, user persona
Deliverables: Cognitive walthrough report, memo
Duration: 1 week
​
Overview
For this project, our team of 3 created a cognitive walkthrough to evaluate how a user would interact with the website, divers-supply.com, to sign up for a scuba diving course.
Further, we organized the data using screenshots of our observations of the website and its in the perspective of our persona, Dylan, a 22-year-old student with an interest in scuba diving. The formal report demonstrates the purpose of the user visiting the site, what observations we noticed in helping the user reach their goal of signing up for a scuba diving course, and the conclusion we came to using the data we captured.
​
Process
Before starting the walkthrough, we crafted our persona to be a nice general fit for who the general audience of the website would be for--someone who is interested in scuba diving and the essentials that come along with it. The persona is very basic since the main focus of the report was on the steps needed to complete a goal on the website. That being said, we made a mini user story associated with Dylan describing his background, why he’s on the site, and what goal he is looking to accomplish.
Next, we created an action sequence or action tasks that the persona in perspective would need to accomplish to sign up for a scuba diving class. In hindsight, using a numbered list instead of bullet points would’ve been better to emphasize the step-by-step nature.
Further, we used screenshots and arrows to visually illustrate the steps Dylan would’ve taken to find the “Try Scuba” section then the enrollment section.
Finally, we noted any successes or failures we had during the cognitive walkthrough. This section was the most important since it highlights the ease or troubles one would have doing these simple tasks. A few issues we noticed during the walkthrough were;
​
-
Difficulty finding information on the website such as the “Scuba Lessons” option on one of the pages not having information on the enrollment process; something a user would expect to see.
-
Misleading or confusing options
-
Unhelpful pages by not redirecting the user to information that they’re looking for.
​
Constraints
With the project, there were some constraints I had with the cognitive walkthrough. I thought our group had a decent understanding of what the process was like but according to our grade, it didn’t seem like we did. Overall, some things could’ve been improved such as;
​
-
Better layout of the report
-
Better layout of the flow diagram
Another constraint was with time. Everything felt kind of rushed to understand and make an accurate report in the span of a week. I think that a few extra days would’ve helped us correct mistakes we made.
​
Summary
For our cognitive walkthrough, we created a brief persona named Dylan who is a 22-year-old student, looking for scuba diving lessons on the divers-supply.com website. Overall, the cognitive walkthrough was to explain the process the user would have to go through to sign up for a scuba diving lesson. We tried to be as detailed as possible while putting ourselves into the user’s shoes. With this process, we were able to make note of the successes and failures we had while completing the action sequence, moreover understanding the usability issues with the site.
UX Writing Microcopy Revision
Members: 2
Tool: Microsoft Word
Methodology: UX writing standards
Deliverables: Microcopy revision justifications memo
Duration: 1 week
​
Overview
In a week, my partner Makayla and I completed a revision of a poorly done user interface. We started by writing out the issues followed up with solutions, implementing them, then explaining why we made those decisions in a brief memo addressed to our professor. The purpose of the assignment was to redesign a microcopy to enhance a user’s experience.
​
Audience
The audience of the microcopy is aimed at people who need to use the settings to export files. The steps were originally very confusing and difficult to understand which hindered the user from completing the exporting process.
​
Process
As previously explained, we started off by highlighting the issues with the original microcopy and how it goes against UX writing’s standards. To simplify the revision process, we created a table showing the problems and solutions for the microcopy as shown below.
After identifying the pain points from the original copy, we made revisions to the copy such as improving the context of the buttons, steps, and layout for additional clarification.
Last but not least, we wrote a memo addressed to our professor explaining the changes we made to the copy and why those changes were necessary to improve the user experience. The memo can be found below.
Summary
For our UX writing assignment, my partner Makayla and I did a redesign of a microcopy interface for exporting files. The original copy had errors that impaired the user from having a decent experience. To start our process we made a table listing out the issues and possible solutions that could improve the experience. After brainstorming and comparing ideas, we implemented them in the revised copy. To wrap up the assignment, we wrote a memo addressing the issues with the original copy, why we fixed it and why those errors needed to be fixed.
Overall, the assignment was simple though made me overthink what would be considered confusing or essential to the user. The group effort was helpful in the sense that I missed some elements that she noticed, like the steps being rewritten better. This was an eye-opening experience to what UX writing for interfaces and copies entails and how there are many nuances that go into them.