Natalie Wysocki's Portfolio

Multiple examples of reading tools on mobile

Reading App Redesign

Reading App Redesign

Overview

  • Client with an existing web app that provides reading tools for studying ancient languages 
  • Redesigned branding guidelines and content for their marketing site
  • Designed enhancements to existing web app features
  • Designed new web app features
  • Planned and managed sprints in collaboration with client

Outcomes

  • Streamlined website content supported faster wayfinding
  • New feature designs provided expanded reading tools
  • Responsive designs enabled more access by more users
  • Delivered foundational branding and UI guidelines such that the dev team can maintain and extend on their own

Context – Lots of Ideas With Only a Little Planning

I worked with a client to overhaul their branding, redesign their marketing website, and add new features to their online reading platform across both desktop and mobile experiences.  

Their platform offers reading tools that enable readers to study the world’s classical languages. For example, the tools allow one to read a text such as Homer’s The Odyssey with the Ancient Greek and English versions side by side.

They had high-level ideas, but needed help refining and prioritizing them. I collaborated closely with the client to define scope, assigned tasks between myself and a teammate, and managed the execution of our planned design sprints.

Goal – Level Up Their Website, App Tools, and Process

Deliver interface designs and a style guide that were clear and complete enough for an external development team to implement the designs as well as understand and apply the branding and UX guidance to future work.

Proposed sitemap for the marketing website
Nav submenu design specs

Scope and Activities

  • Improved information architecture
  • Scope and sprint management
  • Iterative design process
  • Close collaboration with client team
  • Revamped branding guidelines
  • Redesigned  and reorganized marketing website content
  • Improved usability of existing tools on desktop and mobile 
  • Designed new features consistent with the existing platform
  • Created a comprehensive style guide

Conclusion – Refreshed and Ready to Run With

After multiple sprints and iterative design cycles, all design work was delivered to a happy client. Their content was more visually appealing, easier to navigate with improved information architecture, and their development team expressed satisfaction with the clarity of branding and usability guidelines for future work. 

Key lessons learned and experience gained include:

  • How to create a clear and comprehensive style guide that can speak for itself
  • How to refresh a brand without completely reinventing it
  • How to balance remaining consistent with established patterns versus proposing holistic changes while designing new features for an existing platform
Example of marketing website on desktop and mobile
Example of reading tool interface on tablet
Client Style Guide - Cover

Client Style Guide - Cover

Client Style Guide - Colors

Client Style Guide - Colors

Client Style Guide - Buttons

Client Style Guide - Buttons

Client Style Guide - Mobile Nav

Client Style Guide - Mobile Nav

Client Style Guide - Collections Nav

Client Style Guide - Collections Nav

Client Style Guide - Passage Nav

Client Style Guide - Passage Nav

Client Style Guide - Text Nav

Client Style Guide - Text Nav