Portfolio
Vasen App
Vasen is a floral delivery app that focuses on unique arrangements and allows the user to create custom bouquets to suit their needs. This was the first project that I completed in my UX Design course from Google. I selected the prompt design a mobile app for a flower shop in Copenhagen.
Project Overview
Project Vision
Create a mobile app that makes it easy and fun to create unique custom flower arrangements.
My Role
Lead UX + UI Designer
Lead Researcher
Project Duration
May 2021 - May 2022
My Responsibilities
User interviews, creating personas, conducting a competitive audit, tracking user journey and flows, creating storyboards, mapping information architecture, creating wireframes, conducting research and usability testing, as well as creating high and low fidelity mock ups in Figma.
Creating Personas
user stories & problem statements
I started my research by conducting a series of phone interviews with possible users. I then created three user personas based on my research that helped me summarize the desires and concerns of possible users. These characters helped me visualize and empathize with user concerns.
Once the personas had been created, I wrote user stories and problem statements for each of my characters.
Competitive Audit
I researched five floral delivery companies that had their own mobile apps and created a spreadsheet to gather and sort information about key elements of each app.
I assessed the strengths and weaknesses of each company’s service and design by using each of their apps and websites. This process helped me to better understand the market that my app would be entering and identify gaps in their service that Vasen could fill.
I consolidated the highlights of my reasearch into a competitive audit report so that I could share my findings with project managers or stakeholders.
User Journey
Based on the Freja persona I created, I began solving the problem of creating a custom floral option for the app. I mapped out Freja’s user journey using the app, and noted what pain points she might encounter. Then I created a user flow chart to show how she might interact with the app.
& user flows
Storyboards
Storyboards are a great way for me to utilize my background in illustration and sequential art to make visuals that stakeholders will easily understand and positively engage with. These two storyboards show my persona, Freja, interacting with the Vasen app.
My big picture story board follows Freja as she plans a photoshoot in her apartment. Dissatisfied with more traditional flower delivery companies, she turns to the Vasen app for something special.
My close up story boards follow the complete process of using the Vasen app, from download to delivery. I wanted to focus on the custom floral arrangement option, because it is one of the most unique aspects of this app and design.
Information Architecture
& wireframes sketches
I laid out a basic sitemap of the pages I would need for my app, and then I began creating low fidelity wireframes sketches. I made sure I had several ideas for each of the main pages I would be working on. I used Procreate to draw my rough drafts before moving into Figma.
Lofi Wireframes
in Figma
Now that I had a strong idea of what information my app needed to include, and how it might be layed out on the page, I began working in Figma. I created low fidelity wireframes for all the pages of my app.
I included a few basic icons and titles in my design, but much of the design is left to the imagination at this stage.
Research Plan
I started preparing for my first usability study by outlining a research plan. In the plan, I lay out the background of my project, my research goals and questions, the methodology of my study, and the participants.
I identified three key performance indicators that I wanted to measure in my study: time on task, user error rates, and a system usability scale. I then prepared a script for my study, so that I could be certain that I would give each user the same information and questions.
1st Usability Study
insights, mapping & presentation
I conducted a remote, monitored usability study with five users from different backgrounds. As the users worked their way through the low fidelity prototype, I took notes on what they were saying and doing in a spreadsheet. I made note of their time on task, all comments on the design and app, as well as their rating scale for each element of the website.
After the study, I synthesized the data that I had gathered from my users in order to develop insights on how to develop my app. I created a digital affinity diagram in order to visualize common themes that I found amongst users. I used that information to find common problems with my design, that I could then work on solving.
Once I had drawn conclusions from my study, I created a presentation to share my findings with other members of my team, project managers, or shareholders. The presentation identifies pain points for the user within the map, insights, and solutions for a better user experience.
High Fidelity Mock Up
& sticker sheet
With some incredible user feedback to guide me, I began working on my High Fidelity Mock Up. During this phase of the design process, I got to flex some of my communication design skills by utilizing typography, emphasis, color theory, negative space, visual weight, and proportion.
I wanted to ensure that my design was accessible for all people to use, so I used websites like Web AIM and Color Oracle to ensure that the colors I utilized in my text and iconography would be easy to read.
In this phase of the design, I finalized my typography and color palette choices. I began working on a sticker sheet of components that I would use throughout my app. My sticker sheet includes menus, buttons, forms, date cards, and other repeating visual elements from my app.
To fill out the design and make it seem more unique, I created my own spot illustrations in Procreate for the home page and congratulations page. I also drew the icons for the navigation bar, custom screen, and back buttons.
At this stage, I found stock images for my product photos that reflected the Vasen brand. I also created some images for my custom page using Photoshop.
2nd Usability Study
analyzing & synthesizing results
In my second usability study, I used many of the same questions from my first study. I wanted to be able to track whether or not the user experience had improved from the first study. I also invited back the same participants, who were eager to see how the app had changed and progressed.
I once again broke down all my notes into a spreadsheet for easy study. I also created a new affinity map to track patterns in the data from my user. These pain points and ideas will prove helpful in informing my final design.
High Fidelity Prototype
finalizing the design
I utilized the feedback from my second usability study to make changes to my hifi mock up. I also went through my design and reconsidered the motion design of each of the pages, so the animation can help guide the user through the flow.
Once I determined the design was a true representation of the user experience, all components were finalized, and users were able to interact with the app without any guidance, I decided it was time to finalize my design.
