Daily UI, with a twist

Over the last few months, I practiced UI design with Daily UI prompts. They were a great creative exercise, though admittedly, at times I surpassed the one-day scope. Around challenge 33, I changed course to focus more on my case study.

Later on, I revisited a few designs with fresh eyes. Given that the contexts are fictional, they needed to be approached with a grain of salt. But I still found the process of identifying and correcting earlier mistakes to be a great learning experience.

01

Sign up

Deciding on a wellness retreat

A retreat center offers multi-day events on subjects including yoga, nutrition and outdoor activities. Those interested can receive a guide detailing each available retreat by completing the form.

Before
Sign up form with "Request a retreat packet" text and inputs for name, email and retreat focus.
After
Sign up form with headline, name and email address inputs and retreat focus buttons.Photo by Kaylee Garrett on Unsplash
Changes made:
  1. Included a relevant photo to evoke aspiration
  2. Made the headline more personable and added explanatory copy
  3. Specified “Name” to be “Full name” and moved it above the text input field
  4. Retreat options were reconfigured to be buttons for easier selection
  5. Added the business name and menu button for context
  6. Added a check micro-interaction to indicate a valid and completed form field
  7. Made the "Submit" button copy more specific and changed the color to have a more accessible contrast

02

404 page

Shopping for an old favorite

A clothing store’s error page may occur when someone clicks an outdated link to an item that has since been changed or is no longer being sold.

Before
Error page with large 404, button to go back and large decorative "UH OH" design.
After
Error page with explanation, search field and helpful links incorporated.
Changes made:
  1.  Added copy explaining the issue and offering suggestions
  2. Included a search bar to encourage one to look elsewhere on the site
  3. Incorporated links to popular pages, and an option to chat with customer service
  4. Elaborated on navigation to include a business logo, more specific site sections, a place to sign in and a shopping bag icon

03

Search

Finding a new pet

A site specializing in cat and dog adoption enables animal shelter employees to post information about their available animals to the site. Those looking to adopt can search for pets in and around their community.

Before
Cat adoption page, showing navigation, search and information about 3 cats with learn more buttons.Photos (top to bottom): 1 & 2 by Milada Vigerova, 3 by Elodie Oudot, on Unsplash
After
Cat adoption page, showing more detailed search features and cat information arranged on cards.

Photos (left to right): 1 by Kari Shea, 2 by Madalyn Cox, 3 by Amber Kipp, on Unsplash

Changes made:
  1. Revised logo color to have more contrast for better legibility
  2. Brought in a location search field and included the user's location in the page's headline
  3. Added “filters” label, along with the option to remove filters
  4. Included copy showing current selections made to collapsed menu items and rotated the chevrons to the correct position
  5. Age and sex categories were left expanded by default since they are likely to be frequently-used
  6. Added breed filter
  7. Included the option to save search settings
  8. Added the number of search results
  9. Reworked navigation to include more imperative site sections and indicated the active page with an underline
  10. Added microcopy to the search field to guide what can be searched for
  11. Added an option to sort results (sort options would include the distance and the amount of time the posting has been on the site)
  12. To place more emphasis on the photo, the animal’s information was redesigned to fit on cards
  13. Copy was added for each pet and formatted into an easy-to-digest bulleted list

04

File upload

Applying for a job

A job site's interface has a four-step process for completing an application. The third step is a file upload screen, which enables someone to upload files by drag and drop or by browsing their files.

Before
File upload page showing applicant's name, a file upload space and uploaded file statuses.
After

File upload page with application status, upload instructions and distinct file upload statuses.

Changes made:
  1. Specified the text accompanying the chevron to the step that would be navigated back to
  2. The page's headline was changed to the current step of the application process
  3. Added a bar showing each step of the application process, along with an indication of the person's progress
  4. The job title was moved to the top right and the company name was added
  5. A link to tips on file specifications was included with a more specific error message, and red was added to distinguish the error state
  6. The button’s label lists the next step of the application process, and the inactive state was revised to a transparent version of purple, providing more clarity that it will become active once the files have been uploaded and the error has been resolved. 

05

Crowdfunding campaign

Supporting the community

The nature club for a fictional town, Andvale, is raising funds for the construction of a greenhouse. They have set up a fundraising page with information about the project in the hope that their community will make online donations.

Before
Fundraising page showing carrot photo, headline, goal, progress, supporters and donate button.
After
Fundraising page with an added website header and images featuring greenhouse project highlights.
Photos (left to right): 1 by Megan Thomas, 2 by Alex Block, 3 by Jonathan Kemper, 4 by Markus Spiske, on Unsplash
Changes made:
  1. Revised the copy to briefly list the community need and the potential project benefits
  2. Included images representing each project feature to elicit more excitement
  3. Reworked the progress bar design to be less clunky and to have more hierarchy between monetary amounts, supporters and the time left
  4. Made the donate button larger and changed it to a darker color for more contrast and emphasis
  5. Added the organization's name and site navigation menu, to clarify where the crowdfunding page exists

︎︎︎ View more
© 2021 Laurel Welch
© 2021 Laurel Welch