Portafolio de diseño de experiencia de usuario y de diseño de interfaz

1. Laura Castaño
UX/UI Designer
UX/UI Design Portfolio
Selected Samples

2. • Projects —
1. Senior Care Connect — iOS App
2. Olive+Elliot — Website
3. Wishplay — Webapp
4. Vesta — Website
5. Aviron — iOS App
6. Epoch — Webapp
• About the designer —
Table of Contents

3. 1. Senior Care Connect
May 2019 — 3-week sprint
Problem — Finding a caregiver in
Toronto is time intensive and expensive.
How might we help families in need of in-
home care and caregivers find each other
without being location bound?
Role Played— Part of the UX Design
team.
Activities Performed— Conducted
benchmarking, interviews, domain
research, designed the wireframes.
Prototyped the mid fidelity wireframes to
then do testing. Participated actively in
the feature prioritization stage.

4. 1. Senior Care Connect
Research
Interviews—3 families in need o in-home
care and 4 caregivers.
Online surveys— 6 Responses
Benchmarking— 2 online agencies, 1
offline agency and a Marketplace (Kijiji)
Domain Research— 5 articles about
PSW Caregivers.

5. 1. Senior Care Connect
Research —Key findings
— Families want to be able to see
caregivers experience, their skills,
their hourly rate and if they have
any medical knowledge.
— caregivers available are from
around the world and are not
prescreened.
— From the traditional agency
perspective the prescreening and
training is very thorough and
matching is done by the agency.
…I don’t need to go back and forth with
somebody. I get it right away. It’s very
transparent.
Families
Caregivers
“It’s very important for me that I have
a say on whether I can/want to work
with a certain family or patient. Just
goes back to knowing that I’m the
right fit for the need”

6. 1. Senior Care Connect
Feature Prioritization — Based on the client’s requirements
and what we found from the research process we decided to
design a multi-user app, meaning there’s a side for families
and a side for caregivers. Designing for the different needs
and frustrations of our personas we created a list of features
that our app should have and prioritized the ones below.

7. 1. Senior Care Connect
Early Designs
Low fidelity—With the list of
features our app should have
we started by drawing the low
fidelity versions and made 5
different iterations.
Mid-Fidelity—We ended up
with 2 versions and around
100 screens.

8. 1. Senior Care Connect
Results
4 major sections: Search, job
dashboard, chat and profile.
Family side — search for caregiver and
invite them to apply to a job post.create
a job posting and manage it. Review
caregiver. Manage seniors profiles.
Caregiver Side— See job postings and
apply to it, add a mini cover letter to
make it more personal. See the jobs
they applied too and manage it. Send
request to be reviewed.

9. 1. Senior Care Connect
Final Design

10. 1. Senior Care Connect
Final Design
The final design was an app where both sides can
meet in even conditions. Both have control over the
process. Caregivers apply to jobs according to their
needs (time, distance, pay, type of care needed, …).
Families can post and actively look for the caregivers
that they believe is suitable for their needs, they don’t
have to wait for applicants they can look for the best
candidates on their own.

11. 1. Senior Care Connect
Final Design
Main takeaways—This project was challenging in
many aspects. First, finding caregivers to talk to was
very difficult as they don’t feel comfortable
participating in interviews or filling out surveys about
their jobs. In the design process, it was challenging
to figure out and understand the logic behind the
multi-user app. I also learned that many of the
features we thought about were not possible for this
project because of the business model of the client.
Next project: Olive+Elliot

12. 2. Olive+Elliot
April 2019 — 3-week sprint
Problem — How do we convince eco-
fashion designers to choose Olive+Elliot
textiles over competitors? How do we
evoke trust and credibility in Olive+Elliot?
How do we communicate the value in
Olive+Elliot’s business model?
Role Played— Part of the UX Design team,
Design of a website that introduces the
brand and its sustainable business model.
Activities Performed— Conducted
benchmarking, interviews, domain
research, designed the wireframes.
Prototyped wireframes to do testing.
Information architecture on the site.

13. 2. Olive+Elliot
Research
Interviews—6 Retailers, 4 Grant
Funders, 1 Angel Investor.
Online surveys— 38 Responses from
environmentalists.
Benchmarking— Everlane (apparel
brand), Hemp Fortex (textile supplier) ,
Piñatex (pinapple leather), Peggy Sue
(Apparel Brand)
Domain Research— articles about
sustainable fashion Industry and
Crowdfunding.

14. 2. Olive+Elliot
Research —Key findings
What was most important to them
was that the quality of the product
matched the price. Then, the
perceived transparency of the
brand/supplier and finally the
credibility.
We decided not to focus on
investors as we found out that they
don’t make their decisions based
on the company’s website.

15. 2. Olive+Elliot
Early Designs
Low fidelity—After working on
the site map and the content of
each page we each came up with
a low fidelity version. Should be
easy to navigate, informative and
transparent, simple sales inquiry
process.
Mid-Fidelity—We ended
up with 2 versions after
the testing session. In the
first version we failed to
present the business
model clearly leading to a
change in the site map.

16. 2. Olive+Elliot
Testing sessions
We based the sessions on 3 main
user needs:
• Access to a breadth of
transparent information about
the company.
• Stay informed about
sustainable fashion companies.
• Source a variety of high quality,
sustainable textiles
Findings:
• User can tell the company makes luxury sustainable textiles, but is unsure
about how much of the production process they handle and what sets
them apart.
• Navigations was unclear.
• Sales process is not clearly differentiated from the contact us page.

17. 2. Olive+Elliot
Final design
• A clear value proposition outlined and
presented in the home page.
• A succinct presentation of the business
model and the reasons behind it.
• Showcase the entire process of the
company with enough details.
• Include a page where the textiles are
showed so that potential buyers can see
the details, how it looks on garments
(through the capsule collection).
• Finally, a contact us page with a sales
inquiry form so that interested buyers can
get the materials they desire.

18. 2. Olive+Elliot
Final design

19. 2. Olive+Elliot
Final design
Main takeaways—We wanted to give the a website that
was well structured and had the perfect content tailored
to her current stage and the needs and wants of its
target users. Getting this right required a lot of listening,
researching and understanding each stage of the
production process, the values of the brand, and the
impact it wants to create in the world. With great effort
and teamwork, we manage to design a site for
Olive+Elliot to grow into on not grow out off.
Next project: Wishplay

20. 3.Wishplay
May 2019 — 3-week sprint
Wishplay is a startup that is granting virtual wishes
to dying patients in the hospitals through VR. From
their experience and talking with the patients they
decided they needed to offer a product that
would allow dying patients to leave a digital
legacy for their loved ones.

21. 3.Wishplay
May 2019 — 3-week sprint
Problem — How do we help people get in
the habit of recording their memories and
life legacy? How do we empower
people who want to leave a recorded
legacy for their loved ones?How do
we make it easy and comfortable for
users to record emotional videos for their
loved ones before they pass?
Role Played— Part of the UX Design team,
Activities Performed— Conducted
benchmarking, interviews, prepared
surveys, domain research, designed the
wireframes. Prototyped wireframes to do
testing in the Mid-fidelity stage.

22. 3. Wishplay
Research
We wanted to understand what people want to talk about when death is
imminent. We also wanted to know what is it that people value to have after
their loved ones pass. Finally, we wanted to validate the idea and see if
people are actually interested in recording a message for when they pass.
Interviews— 8 interviews with people in different life circumstances.
Patients and caregivers.
Online surveys— 19 Responses.
Benchmarking— Safe Beyond, Record me Now, Oneday, Emortal,
Ourlastmsg, and VoiStory.
Domain Research— articles about palliative care, legacy building.

23. 3. Wishplay
Research —Key findings
• From the perspective of the patient,
it is important to leave a repository
of memories if they are leaving a
young kid behind. And so they
prefer to leave a sort of manifesto
were they explain their life
philosophy and values. Maybe leave
special guidance videos for those
important stages in their kid life
since they won’t be able to be
physically present when those
happen.
• Those who have suffered a loss
wish they could still get life advice
from their loved ones or how to
cope with difficult situations.

24. 3. Wishplay
Feature Prioritization — a landing page for the first timers to
get to know the service, how it works and all the value it will bring
to their life. Then, once inside the app, the users can either record
memories or create personal scrapbooks where they can upload
photos of those meaningful moments of their life or even create a
collection with their secret recipes and share those with their loved
ones.
As some people might have difficulties finding the right thing to say,
it was important to have a series of prompts that would guide the
user and give ideas on what is it that families want to know about.
In order to ensure that the messages that are recorded are
successfully delivered to the chosen recipients, the user needs to
set a trustee.

25. 3. Wishplay
Early Designs
Low fidelity—we started
drawing the low fidelity
versions for tablet users
focusing on making the app
very accessible.
M i d - fi d e l i t y — f o c u s o n
onboarding by helping the user get
comfortable with the app right from
the beginning. Through this stage
we tackled the main user flow
which is to record a message by
answering a prompt of his liking.

26. 3. Wishplay
Testing Session
Our main objective was to make sure the user
feels empowered and able to record these
messages without any help. After 8 testing
sessions we made the following adjustments.
• Lots of context at sign-up
• Control when videos are released
• Robust on-boarding
• Option to take time to add trustees/
recipients
• Preview prompts

27. 3. Wishplay
Final Design
The final product we came up with is
accessible from different devices with a lot
of hand-holding for the user so it never gets
lost or feels confused. The onboarding is
very robust, leads the user to record a
simple message since the beginning and
can be revisited whenever the user needs a
reminder. We emphasized this section and
added a lot of context to each screen and
every stage of the process to make sure the
user never feels confused.We improved the
information architecture by focusing on the
prompts. Depending on the stage of life of
the user, the questions and the topics
they might want to talk about change.

28. 3. Wishplay
Final Design

29. 3. Wishplay
Final Design
Main takeaways— Some of the challenges I faced while
working on this project revolved around how to find the
right people to talk to about death. It is a very sensitive
topic that needs to be handled with care. Also, this project
though me about the importance of setting a relevant
scope that answers to the user needs and the client’s
expectations. More so when the time frame is so limited.
Next project: Vesta

30. 4.Vesta
July 2019 — 3-week sprint
Brief — Redesign the website and
convey a clear message for
employers and employees to
understand their value proposition
and encourage them to see the
company as the best solution for
their workplace dynamics.
Role Played— UI Designer.
Activities Performed— Design
inception, mood boards, style tiles,
style guides, High Fidelity
wireframes, prototype.

31. 4.Vesta
July 2019 — 3-week sprint
Vesta is a company that was born, among other reasons,
after the global #MeToo movement. Their mission is to
create a trusted and secure platform that supports folks’
individual pathway to justice and to healing.

32. 4.Vesta
Design Inception
Vesta’s “Why” is to provide a
safe digital space where
individuals can work together
towards improving the
workplace environment.
Following this Why, the mood of
the company had to be
respectful, empathetic, formal,
transparent, safe and helpful.
From there we assigned the
adjectives to the rest of the
elements and continued with the
design process.

33. 4.Vesta
Logo Exploration
Vesta is the goddess of the hearth, home, and family in
Roman religion. Vesta embodies protection through fire and
not a human representation. Our client’s current logo uses
the V for Vesta, the flame to represent the fire, and a shield
to represent protection.

34. 4.Vesta
Style Tiles
The blue pallet was perfect for
this project as it is a colour that
conveys stability, harmony, peace
and calm. It is also the colour
most used in the HR world which
is one of our target personas.
With the colours and mood in
place, I set to continue my
exploration of the design and
worked on two sets of style
tiles to get a better idea of what
the website should look like. In
it I explored two very different
ways to work with the colour
pallet that we chose while being
sure I followed the mood of the
brand.

35. 4.Vesta
Final Design
The home page had to be the start of the
show, so that’s the one I spent the most
time on. As it is the first page, it has the
be the strongest, clearest and
interesting one making sure it speaks to
both employers and employees. It has to
encourage the visitor to scroll and read
all the other pages. I worked on making
it approachable, smooth, open and
inviting. The About Us, What we offer,
and Resources pages follow the same
aesthetic approach.

36. 4.Vesta
Final Design

37. 4.Vesta
Final Design
Main takeaways—Even if my main role in this project was
as a UI designer, I made all my design decisions taking into
consideration the main users, their needs and their
frustrations. I kept in mind their emotional state and tried to
communicate the positive mission of the company in the
visual direction. It’s not only about making the website
pretty and appealing, but it’s also about being able to
communicate the company’s values beyond words.
Next project: Aviron

38. 5.Aviron
August 2019 — 3-week sprint
Problem— How do we create
a companion mobile app that
will enhance the user
experience?
Role Played— UI Designer.
Activities Performed—
Design inception, mood
boards, style tiles, style
guides, High Fidelity
wireframes, prototype.

39. 5. Aviron
Aviron is an interactive rowing
machine, that enables the user to
be apart of an exhilarating and
engaging workout experience.
Key Features:
• interactive touchscreen
• Innovative dual air & magnetic
resistance.
• Ergonomically designed
• Immersive interactive experience.

40. 5. Aviron
Design Inception
Starting with the Why we
can move to define the
mood. In this case, the
why of Aviron is to
Change and improve
lives through immersive
fitness. The mood is
competitive, exhilarating,
confident, intense, sexy
and fast. From here we
could define the visual
language in terms of
space, colour,
movement, and shape.

41. 5. Aviron
Style Tiles
After working on the mood boards, I started working on the Style
tiles that would solidify the mood and translate it into interface
elements that would be applied to the final design. Both options
have a fast feel with aspects of a community, yet the first one
is geared towards a sexier and fast-moving vibe. The other one
is emphasized in the gaming aspect and the luxurious feel.

42. 5. Aviron
Final design
The app will have 5 elements that answer to the needs of the personas. Once the user
downloads the app it will get through onboarding and see a list of all the features the app
offers.
• A Qr code so that, once the user is in the rowing machine at the gym they can easily
connect their profile and data to that rowing machine they are about to use.
• Then we have the Leaderboard. This is one of the main features as it introduces the
gamification and competition aspect that our user personas are looking for.
• Then we have the Discovery section, were users can see all the available training
programs, the latest training included in the app and the recommended workouts.
• The Dashboard where users will be able to track their training and their performance. As
part of gamification and habit formation, it was important to include an element of
accountability by allowing users to take pictures from the app and add tags and stickers
where they can show off their progress.
• And finally, in the Profile section, the users can see their achievements, connect with
other rowers and eventually invite them to race and compete against each other.

43. 5. Aviron
Final design

44. 5. Aviron
Style Guide
We added the main
colours and the
gradients, the
typography, and the
different sizes. We
also included profile
picture sizes and
header backgrounds.
The spacing of the
app followed the 8pt
method for
scalability.

45. 6. Epoch App
September 2019 — 3-week sprint
Problem— How do we
design a platform that
streamlines the process for
organizing events, and also
provides meaningful
analysis for HR to assess
employee engagement?
Role Played— UI Designer.
Activities Performed—
Design inception, mood
boards, style tiles, style
guides, High Fidelity
wireframes, prototype.

46. 6. Epoch App
EPOCH is an employee engagement platform for
companies to increase social impact and cross-functional
connections. It is a solution for companies that embrace
social responsibility and wants to offer paid time off to
participate in community service projects.

47. 6. Epoch App
Design Inception
Just like Simon Sinek
recommends, I started
the definition of the
visual language with the
Why of the company. Then
I defined the mood, I set
the attributes that the
visual language should
convey. Colours should be
lively and professional,
space open and modern
with flexible shapes and
direct movement.

48. 6. Epoch App
Style Tile
I proposed two very different mood boards and colour palettes to the client. The mood of the first is
one of community, sharing and positive impact. The second one was more inspired in the event
planning aspect with a more professional vibe.
Then I worked on a set of style tiles so that they could get a better idea of what each mood board
could look like in the final design.
The first style tile, following the mood from the first mood board, has a more playful and engaging
feel. The second one is more professional and clean.

49. 6. Epoch App
Final design
The dashboard would have 6 items: Home- Events- Organizations- Reports- Analytics
and Settings.
• The first item on the menu is the dashboard. It has an overview of all the main
information users will find in the app.
• In the Events section, users can see all the current, upcoming and past events.
They can create a new event and filter the list.
• In the Organizations section, users can see the list of the organizations the
company works with to do the volunteer events. On the organization details, the
user can see the upcoming events held by that organization and past events.
• The Reports the user can view and download reports to track the performance.
• And in the Analytics section, the user will be able to see the goals set and how
they are doing while trying to achieve those.

50. 6. Epoch App
Final design

51. 6. Epoch App
Style Guide

52. 6. Epoch App
Final design
Main takeaways —This was one of the most challenging
projects I have worked on. Dashboards have a whole
different set of requirements that need to be met. There is a
lot of information, therefore, the hierarchy has to be clear in
order to prevent the user from feeling confused and
overwhelmed. While working on this project I confirmed the
importance of good UX and how great UI can elevate the
final design.

53. Who is Laura?
I'm a UX/UI designer with a
background in International
Business Management and a
certificate in Art Fundamentals.
My comprehensive background helps me
understand business needs beyond design and
aesthetics. On the other hand, my artistic
training and creativity have shaped me into a
person who trusts the process and is willing to
go through as many iterations as necessary.
My mission: design beautiful websites, apps
and products that are accessible and make a
difference through delightful experiences.